/*
Theme Name: Seduction Junction
Theme URI: https://seductionjunction.com
Author: Seduction Junction Editorial
Author URI: https://seductionjunction.com/about
Description: A dark luxury editorial theme for SeductionJunction.com — a lifestyle and confidence publication. Deep burgundy palette with gold accents, Cormorant Garamond typography, hero section, marquee ticker, category pills, and article card grid. Designed for attraction, confidence, style, and psychology content. Auto-imports 15 articles, 6 categories, About and Contact pages on activation. Includes affiliate-ready article templates, animated hero, and responsive mobile layout.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seductionjunction
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, theme-options, two-columns, right-sidebar, footer-widgets, editor-style, rtl-language-support, sticky-post, microformats, threaded-comments, translation-ready, holiday, entertainment, news
*/

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:   #f5ede0;
  --deep:    #1a0505;
  --crimson: #8b1a2e;
  --gold:    #c9933a;
  --blush:   #d4847a;
  --muted:   #6b4f4f;
  --light-bg:#fdf6ee;
  --border:  #e8d5b0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Georgia', serif;
  background: #fff;
  color: #1a1a1a;
  font-size: 18px;
  line-height: 1.8;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--crimson); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold); }

/* =============================================
   GOOGLE FONTS LOADED VIA functions.php
   ============================================= */

/* =============================================
   SITE HEADER & NAV
   ============================================= */
#site-header {
  background: var(--deep);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(201,147,58,0.15);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.site-logo a, .site-logo a.logo-text-link {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-decoration: none;
}
.site-logo a em, .site-logo a span { font-style: italic; }
.site-logo a:hover { color: var(--cream); }
.custom-logo-link img { height: 44px; width: auto; }

#site-navigation ul {
  display: flex;
  list-style: none;
  gap: 32px;
  align-items: center;
}
#site-navigation ul li a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,237,224,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
#site-navigation ul li a:hover,
#site-navigation ul li.current-menu-item a { color: var(--gold); }

.nav-subscribe {
  padding: 8px 20px;
  background: var(--crimson);
  color: var(--cream) !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  transition: background 0.2s !important;
}
.nav-subscribe:hover { background: var(--gold) !important; color: var(--deep) !important; }

/* Mobile hamburger */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  margin: 5px 0;
  transition: all 0.3s;
}

/* =============================================
   HERO — HOMEPAGE ONLY
   ============================================= */
.hero-section {
  background: var(--deep);
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(139,26,46,0.35), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(201,147,58,0.12), transparent 50%);
}
.hero-content { position: relative; z-index: 2; padding: 40px 20px; }
.hero-eyebrow {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--cream);
  margin-bottom: 20px;
}
.hero-title em { font-style: italic; color: var(--blush); }
.hero-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 32px;
}
.hero-desc {
  font-size: 0.85rem;
  color: var(--cream);
  opacity: 0.5;
  max-width: 380px;
  margin: 0 auto 40px;
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: 0.05em;
  line-height: 2;
}
.hero-cta {
  display: inline-block;
  padding: 14px 40px;
  background: var(--crimson);
  color: var(--cream);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: background 0.3s;
  text-decoration: none;
}
.hero-cta:hover { background: var(--gold); color: var(--deep); }

/* Marquee */
.marquee-wrap {
  overflow: hidden;
  background: var(--deep);
  border-top: 1px solid rgba(201,147,58,0.12);
  border-bottom: 1px solid rgba(201,147,58,0.12);
  padding: 14px 0;
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 25s linear infinite;
  white-space: nowrap;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  opacity: 0.6;
  flex-shrink: 0;
}

/* =============================================
   LAYOUT CONTAINERS
   ============================================= */
.site-main { max-width: 1200px; margin: 0 auto; padding: 60px 32px; }
.content-sidebar-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
.full-width { max-width: 800px; margin: 0 auto; padding: 60px 32px; }

/* =============================================
   SECTION LABELS
   ============================================= */
.section-label {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 8px;
}
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--deep);
  line-height: 1.15;
  margin-bottom: 40px;
}
.section-title em { color: var(--crimson); font-style: italic; }

/* =============================================
   POST CARDS — GRID
   ============================================= */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.posts-grid.two-col { grid-template-columns: repeat(2, 1fr); }

.post-card { display: flex; flex-direction: column; }
.post-card-thumb {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--deep);
  margin-bottom: 20px;
  position: relative;
}
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card-thumb img { transform: scale(1.04); }
.post-card-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.post-card-cat {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.post-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--deep);
  margin-bottom: 10px;
}
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--crimson); }
.post-card-excerpt { font-size: 0.82rem; color: #666; line-height: 1.7; margin-bottom: 14px; }
.post-card-meta {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.6rem;
  color: #aaa;
  letter-spacing: 0.08em;
  margin-top: auto;
}
.read-more-link {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  transition: gap 0.2s;
}
.read-more-link:hover { gap: 14px; color: var(--gold); }

/* Featured post (large) */
.post-card.featured .post-card-thumb { aspect-ratio: 16/9; }
.post-card.featured .post-card-title { font-size: 1.9rem; }

/* =============================================
   SINGLE POST
   ============================================= */
.single-post-header { background: var(--deep); padding: 80px 32px 60px; text-align: center; }
.single-post-header .post-cats {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.single-post-header .post-cats a { color: var(--gold); }
.single-post-header h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--cream);
  max-width: 780px;
  margin: 0 auto 24px;
}
.single-post-header .post-meta {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.68rem;
  color: rgba(245,237,224,0.4);
  letter-spacing: 0.1em;
}

/* Post body */
.post-body { max-width: 780px; margin: 0 auto; padding: 60px 32px; }
.post-body p { margin-bottom: 1.5em; }
.post-body h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 300; color: var(--crimson); margin: 2em 0 0.6em; }
.post-body h3 { font-size: 1.15rem; color: var(--deep); margin: 1.5em 0 0.5em; }
.post-body blockquote { border-left: 3px solid var(--gold); margin: 2em 0; padding: 4px 24px; color: #555; font-style: italic; }
.post-body ul, .post-body ol { margin: 0 0 1.5em 1.5em; }
.post-body li { margin-bottom: 0.4em; }
.post-body img { margin: 2em auto; border-radius: 2px; }
.post-body a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }

/* Intro pullquote */
.post-body .intro {
  font-size: 1.1rem;
  color: #444;
  border-left: 4px solid var(--gold);
  padding-left: 20px;
  margin: 0 0 2em;
  font-style: italic;
  line-height: 1.7;
}

/* Tip box */
.post-body .tip-box {
  background: var(--light-bg);
  border: 1px solid var(--border);
  padding: 20px 24px;
  margin: 1.5em 0;
  border-radius: 3px;
}
.post-body .tip-box strong {
  display: block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 6px;
}

/* Affiliate box */
.post-body .affiliate-box {
  background: #fff8f8;
  border: 2px solid var(--crimson);
  padding: 24px;
  margin: 2em 0;
  border-radius: 3px;
}
.post-body .affiliate-box h3 { margin: 0 0 8px; color: var(--crimson); font-size: 1rem; }
.post-body .affiliate-box p { margin: 0 0 12px; font-size: 0.9rem; color: #444; }
.post-body .affiliate-box a.aff-btn {
  display: inline-block;
  background: var(--crimson);
  color: white;
  padding: 10px 24px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}
.post-body .affiliate-box a.aff-btn:hover { background: var(--gold); }

/* Tags */
.post-body .post-tag {
  display: inline-block;
  background: var(--light-bg);
  color: var(--crimson);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  padding: 4px 12px;
  letter-spacing: 0.1em;
  margin: 0 4px 8px 0;
  text-transform: uppercase;
}

/* CTA section inside post */
.post-body .cta-section {
  background: var(--deep);
  color: var(--cream);
  padding: 40px;
  text-align: center;
  margin: 2.5em 0 0;
  border-radius: 3px;
}
.post-body .cta-section h2 { color: var(--gold); font-size: 1.5rem; margin-bottom: 8px; }
.post-body .cta-section p { color: #ccc; font-size: 0.85rem; margin-bottom: 20px; }
.post-body .cta-section a {
  display: inline-block;
  background: var(--crimson);
  color: white;
  padding: 12px 32px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}
.post-body .cta-section a:hover { background: var(--gold); }

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar { position: sticky; top: 90px; }
.widget { margin-bottom: 40px; }
.widget-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.sidebar-post { display: flex; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #f0e8dc; }
.sidebar-post:last-child { border-bottom: none; }
.sidebar-post-thumb { width: 70px; height: 70px; flex-shrink: 0; background: var(--deep); overflow: hidden; }
.sidebar-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-post-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.95rem; line-height: 1.3; color: var(--deep); }
.sidebar-post-title a { color: inherit; text-decoration: none; }
.sidebar-post-title a:hover { color: var(--crimson); }
.sidebar-post-cat { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }

/* Email widget */
.email-widget { background: var(--deep); padding: 28px; color: var(--cream); }
.email-widget p { font-size: 0.82rem; color: rgba(245,237,224,0.6); margin: 0 0 16px; line-height: 1.7; }
.email-widget input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,147,58,0.3);
  color: var(--cream);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.78rem;
  margin-bottom: 10px;
}
.email-widget input::placeholder { color: rgba(245,237,224,0.25); }
.email-widget button {
  width: 100%;
  padding: 11px;
  background: var(--crimson);
  border: none;
  color: white;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.email-widget button:hover { background: var(--gold); }

/* =============================================
   CATEGORY PILLS ON HOMEPAGE
   ============================================= */
.cat-pills { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.cat-pill {
  padding: 8px 20px;
  border: 1px solid var(--border);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
}
.cat-pill:hover, .cat-pill.active { background: var(--crimson); border-color: var(--crimson); color: white; }

/* =============================================
   PAGINATION
   ============================================= */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 60px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s;
}
.pagination a:hover, .pagination .current { background: var(--crimson); border-color: var(--crimson); color: white; }

/* =============================================
   ABOUT PAGE
   ============================================= */
.page-header { background: var(--deep); padding: 80px 32px 60px; text-align: center; }
.page-header h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; color: var(--cream); margin-bottom: 12px; }
.page-header .page-subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--gold); font-size: 1.2rem; }

.page-content { max-width: 780px; margin: 0 auto; padding: 60px 32px; }
.page-content p { margin-bottom: 1.5em; }
.page-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.7rem; font-weight: 300; color: var(--crimson); margin: 2em 0 0.6em; }
.mission-box { background: var(--deep); color: var(--cream); padding: 40px; margin: 2em 0; }
.mission-box h2 { color: var(--gold); margin: 0 0 12px; }
.mission-box p { color: #ccc; margin: 0; }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 2em 0; }
.value-card { border: 1px solid var(--border); padding: 20px; }
.value-card h3 { color: var(--crimson); font-size: 0.95rem; margin-bottom: 6px; }
.value-card p { font-size: 0.85rem; color: #666; margin: 0; }

/* =============================================
   CONTACT FORM
   ============================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; }
.contact-info h3 { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--crimson); margin-bottom: 6px; }
.contact-info p { font-size: 0.88rem; color: #666; margin-bottom: 24px; }
.contact-info a { color: var(--crimson); }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea,
input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  font-family: Georgia, serif;
  font-size: 1rem;
  color: #1a1a1a;
  background: #fafafa;
  margin-bottom: 16px;
}
textarea { height: 140px; resize: vertical; }
input[type="submit"], .submit-btn, .wp-block-button__link {
  background: var(--crimson);
  color: white;
  border: none;
  padding: 13px 36px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
input[type="submit"]:hover, .submit-btn:hover { background: var(--gold); }

/* =============================================
   FOOTER
   ============================================= */
#site-footer {
  background: var(--deep);
  color: var(--cream);
  padding: 60px 32px 32px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 32px;
}
.footer-brand .footer-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 12px;
}
.footer-brand .footer-logo span { font-style: italic; }
.footer-brand p { font-size: 0.8rem; color: rgba(245,237,224,0.4); line-height: 1.8; max-width: 260px; }
.footer-col h4 { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); opacity: 0.7; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.82rem; color: rgba(245,237,224,0.45); text-decoration: none; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--cream); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.68rem; color: rgba(245,237,224,0.2); font-family: 'Montserrat', Arial, sans-serif; }
.footer-bottom a { color: rgba(245,237,224,0.35); font-size: 0.68rem; font-family: 'Montserrat', Arial, sans-serif; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .content-sidebar-wrap { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .header-inner { padding: 0 20px; }
  #site-navigation { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--deep); padding: 20px; border-top: 1px solid rgba(201,147,58,0.15); }
  #site-navigation.open { display: block; }
  #site-navigation ul { flex-direction: column; gap: 16px; }
  .menu-toggle { display: block; }
  .posts-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .site-main, .full-width, .post-body, .page-content { padding: 40px 20px; }
  .single-post-header, .page-header { padding: 60px 20px 40px; }
}