/* ==========================================================================
   Entry content styling
   The n8n pipeline writes RAW semantic HTML into post_content (no Gutenberg
   block comments). WordPress renders that untouched inside core/post-content.
   Every rule below targets plain tags so the automated articles look
   correct without the workflow ever needing to emit block markup.
   ========================================================================== */

.entry-content {
  max-width: 800px;
  margin-inline: auto;
  font-family: var(--wp--preset--font-family--source-serif);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--wp--preset--color--text);
}

.entry-content > * + * {
  margin-top: 1.5rem;
}

.entry-content p {
  margin: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  color: var(--wp--preset--color--text);
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.entry-content h2 { font-size: 1.75rem; }
.entry-content h3 { font-size: 1.375rem; }
.entry-content h4 { font-size: 1.125rem; }

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}

.entry-content li + li {
  margin-top: 0.5rem;
}

.entry-content li {
  color: var(--wp--preset--color--muted);
}

.entry-content a {
  color: var(--wp--preset--color--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content a:hover {
  color: var(--wp--preset--color--cta);
}

/* Images / figures dropped in by n8n (OpenAI-generated PNGs uploaded via
   /wp-json/wp/v2/media and referenced by source_url in the body) */
.entry-content figure {
  margin: 2rem 0;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.entry-content figcaption {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* Tables (comparison specs, pricing tables, etc.) */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--wp--preset--color--border);
  text-align: left;
  vertical-align: top;
}

.entry-content th {
  background-color: var(--wp--preset--color--surface);
  font-weight: 700;
  color: var(--wp--preset--color--text);
}

.entry-content tr:nth-child(even) td {
  background-color: var(--wp--preset--color--background);
}

/* Blockquotes / pull quotes */
.entry-content blockquote {
  border-left: 3px solid var(--wp--preset--color--primary);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--wp--preset--color--primary);
  font-size: 1.25rem;
}

/* Affiliate CTA / disclosure blocks -- n8n wraps these in a div with a
   known class so the theme can style them distinctly from body copy. If
   the automation doesn't add this class yet, plain paragraphs still
   render fine with the default styles above. */
.entry-content .su-affiliate-cta {
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 1.5rem;
}

.entry-content .su-affiliate-cta a {
  display: inline-block;
  background-color: var(--wp--preset--color--cta);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 600;
}

.entry-content .su-disclosure {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--muted);
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 1rem;
}

/* ==========================================================================
   Category / archive cards (used by templates/archive.html and the
   Explore section pattern on the front page)
   ========================================================================== */
.su-card {
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
}

.su-eyebrow {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* Query loop post cards on Home / Blog / Category / About Sophie */
.su-post-card {
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.su-post-card .wp-block-post-featured-image img {
  border-radius: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.su-post-card .wp-block-post-title,
.su-post-card .wp-block-post-title a {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--text);
  text-decoration: none;
}

.su-post-card .wp-block-post-excerpt {
  font-family: var(--wp--preset--font-family--source-serif);
  color: var(--wp--preset--color--muted);
  font-size: 1rem;
}

.su-post-card .wp-block-post-date,
.su-post-card .wp-block-post-author {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--muted);
}

/* Graceful fallback when a post has no featured image yet (featured_media
   is not automated in n8n today per project notes) */
.su-post-card:not(:has(.wp-block-post-featured-image)) .su-post-card-body {
  padding-top: 1.5rem;
}

/* Responsive helpers used across templates */
@media (max-width: 781px) {
  .su-stack-tablet { flex-direction: column !important; }
}
@media (max-width: 599px) {
  .su-stack-mobile { flex-direction: column !important; }
}

/* ==========================================================================
   Blog index (templates/home.html) + Category archive (templates/archive.html)
   ========================================================================== */

/* Category pill navigation under the hero */
.su-cat-nav {
  row-gap: 12px;
  column-gap: 12px;
}

.su-cat-pill {
  margin: 0;
}

.su-cat-pill a {
  display: inline-block;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.su-cat-pill a:hover {
  background-color: var(--wp--preset--color--primary);
  color: #FFFFFF;
}

/* Category label shown on each post card (post-terms block) */
.su-post-card-cat {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

.su-post-card-cat a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

/* "Read article" link at the bottom of each card */
.su-read-link {
  margin-top: 4px !important;
}

.su-read-link a {
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 600;
  color: var(--wp--preset--color--cta);
  text-decoration: none;
}

.su-read-link a:hover {
  color: var(--wp--preset--color--cta-hover);
  text-decoration: underline;
}

/* Empty state card (query-no-results) already reuses .su-card, just
   centre its text content consistently */
.wp-block-query .wp-block-query-no-results {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Legal / institutional pages (page-about.html, page-about-sophie.html,
   page-start-here.html, page-privacy.html, page-terms.html,
   page-affiliate-disclosure.html, page-editorial-policy.html)
   ========================================================================== */

/* Narrow, highly readable column for post-content on these templates.
   Reuses the same tag-level rules already defined above (h2/h3/ul/table/
   blockquote/a), so legal body copy edited in WordPress inherits the
   same typography as blog articles automatically. */
.su-legal-content .entry-content,
.su-legal-content .wp-block-post-content {
  max-width: 680px;
  margin-inline: auto;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.su-legal-content .wp-block-post-content > * + * {
  margin-top: 1.5rem;
}

.su-legal-content h2 {
  font-size: 1.5rem;
  margin-top: 2.25rem;
}

.su-legal-content h3 {
  font-size: 1.1875rem;
}

/* Affiliate disclosure prominent callout */
.su-disclosure-callout {
  background-color: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 4px solid var(--wp--preset--color--cta);
  border-radius: 12px;
}

.su-disclosure-callout p {
  margin: 0;
}

.su-disclosure-callout p + p {
  margin-top: 8px;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Logo: give it real breathing room instead of shrinking to fit */
.wp-block-site-logo img {
  max-height: 44px;
  width: auto;
}

/* Nav links: proper spacing + no underline until hover.
   !important because core/navigation's blockGap attribute doesn't
   always translate to a reliable inline gap style across WP versions --
   this guarantees the spacing regardless. */
.wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation ul.wp-block-navigation__container {
  gap: 32px !important;
  column-gap: 32px !important;
}

.wp-block-navigation .wp-block-navigation-item {
  margin-right: 0 !important;
}

.wp-block-navigation .wp-block-navigation-item a {
  text-decoration: none;
  white-space: nowrap;
  padding: 0 !important;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
  color: var(--wp--preset--color--primary);
}

/* Search: compact icon by default. The input DOES exist in the HTML
   (buttonPosition:"button-inside" -- unlike "button-only", which never
   renders an <input> at all and made the icon permanently non-functional).
   JS toggles .is-open on click to reveal it; see functions.php. */
.su-header-search {
  position: relative;
}

.su-header-search .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  border: none !important;
}

.su-header-search .wp-block-search__input {
  display: none;
  width: 0;
  border: 1px solid var(--wp--preset--color--border) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 14px;
  transition: width 0.2s ease;
}

.su-header-search.is-open .wp-block-search__input {
  display: block;
  width: 200px;
  margin-right: 8px;
}

.su-header-search .wp-block-search__button {
  background-color: var(--wp--preset--color--primary) !important;
  border-radius: 999px !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0;
}

.su-header-search .wp-block-search__button svg,
.su-header-search .wp-block-search__button-icon {
  fill: #FFFFFF;
  color: #FFFFFF;
}

/* ==========================================================================
   Post card meta line -- single line "Author · Date" via CSS pseudo dot
   ========================================================================== */
.su-post-card-meta {
  gap: 0 !important;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--muted);
}

.su-post-card-meta .wp-block-post-author,
.su-post-card-meta .wp-block-post-date {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--muted);
}

.su-post-card-meta .wp-block-post-author::after {
  content: " · ";
}

/* ==========================================================================
   Featured first post -- CSS-only horizontal card (image left, text
   right) on desktop, spanning the full grid width. No duplicate query,
   no hardcoded post ID: purely :first-child in the same native loop.

   IMPORTANT: grid-column only has an effect on a direct child of the
   CSS Grid container. WordPress's Post Template block renders each
   post inside its own <li> wrapper -- that <li> is the real grid item,
   not .su-post-card (which is nested one level deeper, inside the li).
   Setting grid-column on .su-post-card was a no-op; the "featured" card
   stayed trapped in a single narrow grid column, which is why the image
   looked squeezed and the title wrapped badly. grid-column now targets
   the actual grid item (the li, matched here as the direct child of
   .wp-block-post-template) instead.

   Only applies when the post actually HAS a featured image (:has()).
   Without this guard, a post with no image gets squeezed with nothing
   to fill the other half, causing the oversized title to wrap badly.
   When there's no image, the first post falls back to a normal card.
   ========================================================================== */
@media (min-width: 782px) {
  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) {
    grid-column: 1 / -1;
  }

  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .su-post-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .su-post-card-image {
    width: 50%;
    flex-shrink: 0;
  }

  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .su-post-card-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .su-post-card-body {
    width: 50%;
    justify-content: center;
    padding: 40px !important;
  }

  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .wp-block-post-title,
  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .wp-block-post-title a {
    font-size: 1.75rem;
  }

  .su-blog-query .wp-block-post-template > :first-child:has(.su-post-card-image img) .wp-block-post-excerpt {
    font-size: 1.0625rem;
  }
}

/* ==========================================================================
   Category cards on the Home "Explore" section -- photo + body
   ========================================================================== */
.su-cat-card {
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.su-cat-card-image {
  margin: 0;
}

.su-cat-card-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.su-cat-card-body {
  padding: 20px;
}

.su-cat-card-body > * + * {
  margin-top: 8px;
}

/* ==========================================================================
   "Start Here" mini cards on Home (light section, small icon + one line)
   ========================================================================== */
.su-mini-card {
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 16px 20px;
  gap: 12px !important;
  height: 100%;
}

.su-mini-card p {
  margin: 0;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.9375rem;
  font-weight: 500;
}

.su-mini-card p a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}

.su-mini-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ==========================================================================
   Newsletter section (light mint background, embedded CF7 form)
   ========================================================================== */
.su-newsletter-form {
  margin-top: 16px;
}

.su-newsletter-form form.wpcf7-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.su-newsletter-form input[type="email"],
.su-newsletter-form input[type="text"] {
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--border);
  padding: 12px 20px;
  min-width: 260px;
}

.su-newsletter-form input[type="submit"] {
  border-radius: 999px;
  background-color: var(--wp--preset--color--primary);
  color: #FFFFFF;
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Pagination -- circular page numbers, current page filled teal
   ========================================================================== */
.su-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  padding: 0 10px;
}

.su-pagination .page-numbers.current {
  background-color: var(--wp--preset--color--primary);
  color: #FFFFFF;
}

.su-pagination a.page-numbers:hover {
  background-color: var(--wp--preset--color--surface);
}

/* ==========================================================================
   Start Here page -- large descriptive cards + numbered list section
   ========================================================================== */
.su-start-card {
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
}

.su-start-card > * + * {
  margin-top: 8px;
}

.su-numbered-card {
  background-color: var(--wp--preset--color--card);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 16px 20px;
  gap: 16px !important;
  align-items: center !important;
}

.su-numbered-card + .su-numbered-card {
  margin-top: 12px;
}

.su-numbered-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--wp--preset--color--mint-tint);
  color: var(--wp--preset--color--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0 !important;
}