/*
Theme Name: Crochet Bandana (GeneratePress Child)
Template: generatepress
Description: Premium redesign - real hero, sectioned homepage, card system,
             and refined article typography. Requires the free GeneratePress
             parent theme. No page builder, no external fonts (system stack
             only, for guaranteed load reliability and speed).
Version: 2.0
Text Domain: crochet-bandana-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --cb-rose: #c17d8a;
  --cb-rose-dark: #a3606d;
  --cb-rose-light: #f3e4e7;
  --cb-plum: #4a2c33;       /* deep, moody accent for dark sections */
  --cb-plum-light: #6b4149;
  --cb-cream: #faf6f3;
  --cb-ink: #3a2f2d;
  --cb-ink-soft: #6b5f5c;
  --cb-border: #e8ddd7;
  --cb-white: #ffffff;

  --cb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cb-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --cb-radius: 10px;
  --cb-radius-lg: 16px;
  --cb-shadow: 0 4px 16px rgba(58, 47, 45, 0.06);
  --cb-shadow-hover: 0 10px 28px rgba(58, 47, 45, 0.10);
  --cb-content-width: 700px;
  --cb-section-width: 1180px;
  --cb-section-pad: clamp(3rem, 6vw, 5.5rem);
}

* { box-sizing: border-box; }

/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */
body {
  font-family: var(--cb-font-body);
  color: var(--cb-ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  background: var(--cb-white);
}

h1, h2, h3, h4, .wp-block-heading {
  font-family: var(--cb-font-heading);
  color: var(--cb-ink);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 0.6em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-top: 2.4em; margin-bottom: 0.6em; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); margin-top: 1.8em; margin-bottom: 0.5em; }

p { margin-bottom: 1.2em; }

a { color: var(--cb-rose-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cb-ink); }

/* Comfortable reading measure on article/page content (not the homepage
   sections, which manage their own width) */
.entry-content,
.site-content article .inside-article {
  max-width: var(--cb-content-width);
}

.entry-header .entry-title {
  font-size: clamp(2rem, 5vw, 3rem);
  max-width: var(--cb-content-width);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   3. HEADER
   Verified against GeneratePress's actual markup (docs.generatepress.com /
   generate.support): <header id="masthead" class="site-header"><div
   class="inside-header"><div class="site-branding"><p class="main-title">...
   and a separate <nav class="main-navigation"> element. ".main-nav" and
   ".site-title" (used in the previous version of this file) are NOT real
   GeneratePress classes - that's exactly why header/nav styling silently
   failed to apply on the real site: the CSS selectors matched nothing.
   ========================================================================== */
.site-header {
  background: var(--cb-white);
  border-bottom: 1px solid var(--cb-border);
}
.site-branding .main-title,
.site-branding .main-title a {
  font-family: var(--cb-font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cb-ink);
}
.main-navigation a {
  font-family: var(--cb-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cb-ink);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.main-navigation a:hover { color: var(--cb-rose-dark); }
/* The current-page nav item otherwise falls back to the browser/theme
   default (blue, underlined) because WordPress core's own current-page
   classes carry higher specificity than a plain ".main-navigation a" rule.
   current-menu-item / current_page_item are WordPress CORE's standard,
   documented classes on the <li> (added by wp_nav_menu() itself, not
   theme-specific), so this is a verified, not guessed, selector. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--cb-rose-dark);
  text-decoration: none;
}
/* "Free PDF" nav item as a button: add the CSS class "nav-cta" to that one
   menu item under Appearance -> Menus -> (expand the item) -> CSS Classes.
   The setup plugin also adds this automatically when it builds the menu. */
.main-navigation .nav-cta > a {
  background: var(--cb-rose);
  color: #fff !important;
  padding: 0.5em 1.1em !important;
  border-radius: 999px;
}
.main-navigation .nav-cta > a:hover { background: var(--cb-rose-dark); }

@media (max-width: 782px) {
  .main-navigation .main-nav { flex-wrap: wrap; }
}

/* ==========================================================================
   4. FOOTER
   Verified: <footer class="site-footer">...<div class="site-info"><div
   class="inside-site-info">. The "Powered by GeneratePress" text is removed
   via the generate_copyright filter in functions.php (confirmed across
   GeneratePress's own docs/forum) - CSS can't remove theme-generated text,
   only functions.php can actually replace it.
   ========================================================================== */
.site-footer, .site-footer a { background: var(--cb-plum); color: #ebd9dc; }
.site-footer a:hover { color: #ffffff; }
.site-footer { padding: 3.5rem 0 1.5rem; font-size: 0.92rem; }
.site-footer .site-info,
.site-footer .inside-site-info {
  background: var(--cb-plum);
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2rem; padding-top: 1.25rem;
  font-size: 0.85rem; opacity: 0.75;
}
.site-footer .site-info a,
.site-footer .inside-site-info a { background: transparent; }

/* ==========================================================================
   5. BUTTONS - both native WP button blocks and our .cb-btn (homepage)
   ========================================================================== */
.wp-block-button__link,
.pdf-cta-button,
.cb-btn {
  background: var(--cb-rose);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover,
.pdf-cta-button:hover,
.cb-btn:hover {
  background: var(--cb-rose-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--cb-shadow-hover);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.cb-btn--outline {
  background: transparent;
  color: var(--cb-rose-dark) !important;
  border: 2px solid var(--cb-rose);
  padding: calc(0.85rem - 2px) calc(1.75rem - 2px);
}
.cb-btn--outline-on-dark {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.7);
  padding: calc(0.85rem - 2px) calc(1.75rem - 2px);
}
.cb-btn--outline-on-dark:hover { background: rgba(255,255,255,0.12); color: #fff !important; }

/* ==========================================================================
   6. SECTION SYSTEM (creates the alternating light/cream/dark rhythm that
      makes the homepage read as "sectioned" rather than one long scroll)
   ========================================================================== */
.cb-section {
  padding: var(--cb-section-pad) 1.5rem;
  max-width: var(--cb-section-width);
  margin: 0 auto;
}
/* Full-bleed technique used by .cb-hero, .cb-section--cream, .cb-cta-banner
   below: this escapes ANY parent container width (GeneratePress's
   .grid-container or otherwise) without depending on knowing that
   container's exact max-width - verified-robust regardless of theme
   container specifics. */
.cb-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.cb-section--cream { background: var(--cb-cream); max-width: none; }
.cb-section--cream > * { max-width: var(--cb-section-width); margin-left: auto; margin-right: auto; }

.cb-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-rose-dark);
  margin-bottom: 0.75rem;
}
.cb-eyebrow--on-dark { color: #f0c9cf; }

.cb-section__heading {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0 !important;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.cb-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center 30%;
  color: #fff;
  overflow: hidden;
}
.cb-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(58,30,34,0.72) 0%, rgba(58,30,34,0.45) 55%, rgba(58,30,34,0.25) 100%);
}
.cb-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 4rem 2rem;
  margin: 0 auto;
  text-align: center;
}
.cb-hero__title {
  color: #fff;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  margin-bottom: 0.5em;
}
.cb-hero__subtitle {
  font-size: 1.15rem;
  color: #f6e9eb;
  margin-bottom: 2rem;
}
.cb-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   8. PDF OPT-IN CARD (the primary conversion element - deliberately the
      most visually distinct card on the page)
   ========================================================================== */
.cb-pdf-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  background: var(--cb-white);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-hover);
  border: 1px solid var(--cb-border);
  overflow: hidden;
  max-width: var(--cb-section-width);
  margin: 0 auto;
}
.cb-pdf-card__visual {
  background: linear-gradient(160deg, var(--cb-rose-light), var(--cb-cream));
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem;
}
.cb-pdf-card__visual img {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(58,47,45,0.18);
  transform: rotate(-2deg);
}
.cb-pdf-card__content { padding: 3rem; }
.cb-pdf-card__heading { margin-top: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.cb-pdf-card__body { color: var(--cb-ink-soft); }
.cb-pdf-card__form { margin: 1.5rem 0 1rem; }
.cb-pdf-card__consent { font-size: 0.8rem; color: var(--cb-ink-soft); }

/* ==========================================================================
   9. FEATURED PATTERN ("Start Here")
   ========================================================================== */
.cb-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.cb-featured__image img {
  width: 100%;
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow);
}
.cb-featured__list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.cb-featured__list li {
  padding: 0.5rem 0 0.5rem 1.75rem;
  position: relative;
  color: var(--cb-ink-soft);
  border-bottom: 1px solid var(--cb-border);
}
.cb-featured__list li:before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--cb-rose);
  font-weight: 700;
}

/* ==========================================================================
   10. CATEGORY CARDS
   ========================================================================== */
.cb-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.cb-category-card {
  background: var(--cb-white);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cb-category-card:hover { box-shadow: var(--cb-shadow-hover); transform: translateY(-2px); }
.cb-category-card h3 { margin-top: 0; }
.cb-category-card p { color: var(--cb-ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   11. ARTICLE CARD GRID (homepage "Latest" + archive/category listings)
   ========================================================================== */
.cb-article-cards { gap: 1.5rem; margin-top: 2.5rem !important; }
.cb-article-card {
  background: var(--cb-white);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  overflow: hidden;
  padding-bottom: 1.25rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cb-article-card:hover { box-shadow: var(--cb-shadow-hover); transform: translateY(-2px); }
.cb-article-card img { border-radius: 0; margin-bottom: 0.9rem; }
.cb-article-card .wp-block-post-title { font-size: 1.1rem; margin: 0 1.1rem 0.4rem; }
.cb-article-card .wp-block-post-terms {
  margin: 0.9rem 1.1rem 0; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--cb-rose-dark); font-weight: 700;
}
.cb-article-card .wp-block-post-excerpt { margin: 0 1.1rem; font-size: 0.92rem; color: var(--cb-ink-soft); }

.blog .site-main article,
.archive .site-main article,
.category .site-main article {
  background: var(--cb-white);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   12. DARK CTA BANNER (second PDF ask - deliberately different visual
       treatment from the card above, for rhythm)
   ========================================================================== */
.cb-cta-banner { background: var(--cb-plum); color: #fff; padding: var(--cb-section-pad) 1.5rem; }
.cb-cta-banner__inner {
  max-width: var(--cb-section-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cb-cta-banner h2 { color: #fff; margin: 0 0 0.4em; }
.cb-cta-banner p { color: #e7cdd1; margin: 0; }

/* ==========================================================================
   13. ABOUT TEASER
   ========================================================================== */
.cb-about-teaser { text-align: center; max-width: 640px !important; border-radius: var(--cb-radius-lg); }

/* ==========================================================================
   14. TABLES
   ========================================================================== */
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.wp-block-table th, .wp-block-table td { padding: 0.7em 1em; border: 1px solid var(--cb-border); text-align: left; }
.wp-block-table th { background: var(--cb-rose-light); font-family: var(--cb-font-heading); font-weight: 700; }
.wp-block-table tr:nth-child(even) td { background: var(--cb-cream); }

/* ==========================================================================
   15. IMAGES - Pinterest-friendly presentation
   ========================================================================== */
.wp-block-image img { border-radius: var(--cb-radius); height: auto; }
.wp-block-image figcaption.wp-element-caption {
  font-size: 0.88rem; color: var(--cb-ink-soft); text-align: center; margin-top: 0.5em; font-style: italic;
}
.step-photo-pair { display: flex; gap: 0.75rem; }
.step-photo-pair .wp-block-image { flex: 1; }

/* ==========================================================================
   16. PDF CTA COMPONENT (in-article, ~25 instances)
   ========================================================================== */
.pdf-cta-box {
  background: var(--cb-cream);
  border: 1px solid var(--cb-border);
  border-left: 4px solid var(--cb-rose);
  border-radius: var(--cb-radius);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.pdf-cta-heading { font-family: var(--cb-font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.5rem 0; }
.pdf-cta-body { margin: 0 0 1rem 0; }
.pdf-cta-consent { font-size: 0.8rem; color: var(--cb-ink-soft); margin: 0.75rem 0 0 0; }

/* ==========================================================================
   17. CHECKPOINT / TIP CALLOUTS + RELATED-READING LISTS
   ========================================================================== */
.wp-block-quote {
  background: var(--cb-cream);
  border-left: 4px solid var(--cb-border);
  border-radius: 0 var(--cb-radius) var(--cb-radius) 0;
  padding: 0.9rem 1.25rem;
  margin: 1.5rem 0;
}
.wp-block-quote p { margin: 0; }

/* Generic list-card treatment - improves the existing "Related Reading"
   bullet lists (and any other list) without touching article content */
.entry-content ul:not(.cb-featured__list) li {
  list-style: none;
  background: var(--cb-cream);
  border-radius: 8px;
  padding: 0.7rem 1rem 0.7rem 2.2rem;
  margin-bottom: 0.5rem;
  position: relative;
}
.entry-content ul:not(.cb-featured__list) li:before {
  content: "→";
  position: absolute; left: 0.9rem;
  color: var(--cb-rose);
  font-weight: 700;
}

/* ==========================================================================
   18. AD SLOTS - fixed reserved height prevents layout shift (CLS)
   ========================================================================== */
.ad-slot { display: block; margin: 2.5rem auto; text-align: center; }
.ad-slot--in-content { min-height: 280px; }
.ad-slot--leaderboard { min-height: 90px; }
.ad-slot--sidebar { min-height: 250px; }

/* ==========================================================================
   19. SETUP PLACEHOLDER (visible until MailerLite is connected)
   ========================================================================== */
.needs-credentials-placeholder {
  background: #fff8e6; border: 2px dashed #d4a72c; border-radius: 6px;
  padding: 1rem 1.25rem; font-weight: 600; color: #6b5217;
}

/* ==========================================================================
   20. DEFENSIVE: hide legacy default-widget output if a sidebar template
   ever renders one (purely visual, touches no data)
   ========================================================================== */
.widget_search, .widget_recent_entries, .widget_recent_comments,
.widget_archive, .widget_categories, .widget_meta, .widget_calendar { display: none; }
.site-content .content-area { width: 100%; max-width: none; }

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .cb-pdf-card { grid-template-columns: 1fr; }
  .cb-pdf-card__visual { padding: 2rem; }
  .cb-featured { grid-template-columns: 1fr; gap: 2rem; }
  .cb-category-grid { grid-template-columns: 1fr; }
  .cb-cta-banner__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .cb-hero { min-height: 460px; }
  .cb-hero__inner { padding: 3rem 1.5rem; }
  .cb-hero__actions { flex-direction: column; width: 100%; }
  .cb-hero__actions .cb-btn { width: 100%; text-align: center; }
  .cb-section { padding: 3rem 1.25rem; }
  .cb-pdf-card__content { padding: 2rem 1.5rem; }
  .pdf-cta-box { padding: 1.25rem; }
  .pdf-cta-button { display: block; text-align: center; }
  .step-photo-pair { flex-direction: column; }
  .wp-block-table { overflow-x: auto; display: block; }
}

/* ==========================================================================
   22. PRINT
   ========================================================================== */
@media print {
  .site-header, .site-footer, .pdf-cta-box, .ad-slot, .cb-hero__actions { display: none; }
}