/*
Theme Name: Cool Mom Picks
Theme URI: https://coolmompicks.com
Author: CMP Team
Author URI: https://coolmompicks.com
Description: A modern WordPress FSE block theme for Cool Mom Picks — curated picks for modern family life.
Version: 0.15.5
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cmp
Tags: full-site-editing, block-patterns, wide-blocks, custom-colors, custom-fonts
GitHub URI: https://github.com/dingman/cmp
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* Transitions — scoped to specific properties */
  --cmp-duration-fast: 150ms;
  --cmp-duration-base: 250ms;
  --cmp-duration-slow: 700ms;
  --cmp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cmp-transition-color: color var(--cmp-duration-base) var(--cmp-ease);
  --cmp-transition-transform: transform var(--cmp-duration-base) var(--cmp-ease);
  --cmp-transition-shadow: box-shadow var(--cmp-duration-base) var(--cmp-ease);
  --cmp-transition-bg: background-color var(--cmp-duration-base) var(--cmp-ease);

  /* Shadows */
  --cmp-shadow-lift: var(--wp--custom--shadow--lift);
  --cmp-shadow-xl: var(--wp--custom--shadow--xl);

  /* Borders */
  --cmp-border: 1px solid var(--wp--preset--color--border);
  --cmp-border-subtle: 1px solid var(--wp--preset--color--border-light);

  /* Link underline */
  --cmp-underline-thickness: 0.5px;
  --cmp-underline-offset: 3px;

  /* Opacity overlays */
  --cmp-bg-50: rgba(248, 246, 241, 0.5);
  --cmp-bg-60: rgba(248, 246, 241, 0.6);
  --cmp-bg-80: rgba(248, 246, 241, 0.8);
  --cmp-text-04: rgba(41, 44, 50, 0.04);
  --cmp-text-05: rgba(0, 0, 0, 0.05);
  --cmp-border-50: rgba(236, 233, 230, 0.5);
}

/* ==========================================================================
   Text Selection
   ========================================================================== */

::selection {
  background: var(--wp--preset--color--brand-light);
  color: var(--wp--preset--color--text);
}

a::selection {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Post Content: Image Containment
   ========================================================================== */

.wp-block-post-content img,
.wp-block-post-content video,
.wp-block-post-content iframe {
  max-width: 100%;
  height: auto;
}

.wp-block-post-content img.size-full {
  width: 100%;
}

/* ==========================================================================
   Post Content: Image Alignment (classic classes)
   ========================================================================== */

.wp-block-post-content .aligncenter {
  display: block;
  margin-inline: auto;
  clear: both;
}

.wp-block-post-content .alignleft {
  float: left;
  margin-right: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--sm);
  max-width: 50%;
}

.wp-block-post-content .alignright {
  float: right;
  margin-left: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--sm);
  max-width: 50%;
}

@media (max-width: 600px) {
  .wp-block-post-content .alignleft,
  .wp-block-post-content .alignright {
    float: none;
    margin-inline: auto;
    max-width: 100%;
    display: block;
  }
}

/* ==========================================================================
   Link Hover: Rising Highlight (post/page content only)
   EXPERIMENTAL — remove this entire section to revert to plain underlines
   ========================================================================== */

.wp-block-post-content a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--link);
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--brand-light), var(--wp--preset--color--brand-light));
  background-position: 0 100%;
  background-size: 100% 0;
  background-repeat: no-repeat;
  border-bottom: 1px dashed var(--wp--preset--color--border-light);
  padding: 0 0.15em;
  transition: background-size var(--cmp-duration-base) var(--cmp-ease),
              color var(--cmp-duration-base) var(--cmp-ease),
              border-color var(--cmp-duration-base) var(--cmp-ease);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--brand-hover);
  border-color: transparent;
  background-size: 100% 100%;
}

/* ==========================================================================
   Template root: structural container — sections own their spacing
   ========================================================================== */

.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* ==========================================================================
   Full Viewport Template
   ========================================================================== */

body:has(.is-full-viewport) .wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.is-full-viewport {
  flex-grow: 1;
  min-height: calc(100dvh - 120px);
}

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

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: var(--wp--custom--z-index--header);
  background-color: var(--wp--preset--color--background);
}

body.admin-bar header.wp-block-template-part {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 0;
  }
}

.cmp-header {
  z-index: var(--wp--custom--z-index--header);
}

/* Equal-width header zones for true center alignment */
.cmp-header .is-layout-flex > .wp-block-group {
  /* Required: WP core sets flex-basis:auto on flex children via :where() */
  flex-basis: 0;
}

/* ==========================================================================
   Header Logo / Title Toggle
   ========================================================================== */

/* Hide text title when a custom logo is active */
.wp-custom-logo .cmp-header .wp-block-site-title {
  display: none;
}

/* Logo sizing */
.cmp-header .wp-block-site-logo {
  margin: 0;
}

.cmp-header .wp-block-site-logo img {
  max-height: 60px;
  width: auto;
}

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

.cmp-header .wp-block-search__inside-wrapper {
  border: none;
  background: transparent;
}

.cmp-header .wp-block-search__input {
  width: 200px;
  height: 36px;
  padding: 4px 0;
  font-size: var(--wp--preset--font-size--small);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--wp--preset--color--text);
  letter-spacing: 0.025em;
  transition: border-color var(--cmp-duration-base) var(--cmp-ease);
}

.cmp-header .wp-block-search__input:focus-visible {
  border-bottom-color: var(--wp--preset--color--text);
}

.cmp-header .wp-block-search__input::placeholder {
  color: var(--wp--preset--color--text-muted);
}

.cmp-header .wp-block-search__button {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--wp--preset--color--text-muted);
  transition: var(--cmp-transition-color);
  min-width: unset;
  order: -1; /* SOT: icon sits left of input */
}

.cmp-header .wp-block-search__button:hover {
  color: var(--wp--preset--color--text);
}

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

.cmp-tagline {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  font-family: var(--wp--preset--font-family--body);
  margin-top: 2px;
}

/* Responsive: hide tagline, reduce title on mobile (SOT: hidden md:block, text-3xl) */
@media (max-width: 767px) {
  .cmp-tagline {
    display: none;
  }

  .cmp-header .wp-block-site-title {
    font-size: 1.875rem;
    white-space: nowrap;
  }
}

/* Mobile search icon (right zone) — collapsed state */
.cmp-header .cmp-mobile-only .wp-block-search__button-only .wp-block-search__button {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--text);
  padding: 6px;
  min-width: 36px;
  min-height: 36px;
  cursor: pointer;
}

/* Mobile search — expanded dropdown below header (SOT pattern)
   The wrapper is absolutely positioned below the sticky header.
   Using absolute + top:100% instead of fixed avoids cross-browser
   issues with fixed-inside-sticky and adapts to header height. */
@media (max-width: 767px) {
  .cmp-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--wp--preset--color--background);
    border-top: 1px solid var(--wp--preset--color--border);
    z-index: calc(var(--wp--custom--z-index--header) + 1);
    animation: cmp-slide-down 0.2s ease-out;
  }

  .cmp-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
    width: 100%;
    height: 36px;
    padding: 4px 16px;
    font-size: 16px;
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    background: color-mix(in srgb, var(--wp--preset--color--background) 50%, transparent);
    border: none;
    border-radius: 0;
    box-shadow:
      0 0 0 1px var(--wp--preset--color--text),
      0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px -1px rgba(0, 0, 0, 0.1);
  }

  .cmp-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input::placeholder {
    color: var(--wp--preset--color--text-muted);
  }

  /* Visually hide submit button inside the dropdown — keeps it in a11y tree for Enter/screen readers */
  .cmp-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper .wp-block-search__button {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@keyframes cmp-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Navigation Hover Underline
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation-item__content {
  position: relative;
}

/* Expand hover target on parent items with submenus — padding extends the
   hoverable area vertically so the user doesn't lose hover easily. */
.wp-block-navigation .has-child:not(.wp-block-navigation__submenu-container .has-child) > .wp-block-navigation-item__content {
  padding: var(--wp--preset--spacing--xs) 0;
}

.wp-block-navigation .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wp--preset--color--text);
  transition: width var(--cmp-duration-base) var(--cmp-ease);
}

.wp-block-navigation .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item) > .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item:not(.wp-block-navigation__submenu-container .wp-block-navigation-item):hover > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation-item__content::after {
  width: 100%;
}

/* ==========================================================================
   Navigation Dropdown
   ========================================================================== */

.wp-block-navigation .wp-block-navigation__submenu-icon {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  align-self: center;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  width: 12px;
  height: 12px;
  transition: transform var(--cmp-duration-base) var(--cmp-ease);
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg path {
  stroke-width: 2;
}

:where(.wp-block-navigation) .wp-block-navigation__submenu-container {
  border-radius: 0;
  padding: var(--wp--preset--spacing--md);
  width: 200px;
  min-width: 200px;
  gap: 0;
  /* transform-origin must live on the base rule so it's present before the
     animation starts. The animation itself is deferred to the open-state
     selector below so it replays on every click, not once at page load. */
  transform-origin: top center;
}

/* Match core specificity (0,3,0) for submenu overrides. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--background);
  border: 1px solid var(--cmp-border-50);
  box-shadow: var(--wp--custom--shadow--sm);
  top: 100%;
  margin-top: 4px;
}

/* Invisible hover bridge — extends the submenu's hit area upward to overlap
   the parent item, preventing hover loss when moving mouse down to the dropdown. */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}

/* Fire the enter animation each time aria-expanded flips to true.
   Because the animation property is absent in the closed state and present
   only in the open state, the browser restarts it on every open event.
   We also suppress the core opacity transition here to prevent it from
   fighting the keyframe animation over the same opacity property. */
@media not (prefers-reduced-motion) {
  .wp-block-navigation .has-child
    .wp-block-navigation-submenu__toggle[aria-expanded="true"]
    ~ .wp-block-navigation__submenu-container {
    animation: cmp-dropdown-in 350ms ease forwards;
    transition: none;
  }
}

@keyframes cmp-dropdown-in {
  from { opacity: 0; transform: scale(0.95) translateY(-0.5rem); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

:where(.wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--nav-link);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  padding: 4px var(--wp--preset--spacing--sm);
  line-height: 28px;
  color: var(--wp--preset--color--text);
  transition: background-color var(--cmp-duration-fast) var(--cmp-ease);
  display: flex;
}

:where(.wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--cmp-text-04);
}

/* ==========================================================================
   Responsive Visibility
   ========================================================================== */

/* Responsive toggles scoped to .cmp-header to beat WP is-layout-* (0,1,0)
   with (0,2,0) specificity — no !important needed.
   SOT breakpoints: md (768px) for search/hamburger, lg (1024px) for nav. */
.cmp-header .cmp-mobile-only {
  display: flex;
}

.cmp-header .cmp-desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .cmp-header .cmp-mobile-only {
    display: none;
  }

  .cmp-header .cmp-desktop-only {
    display: flex;
  }
}

/* Desktop nav: hidden until lg (1024px), matching SOT lg:flex */
.cmp-header .cmp-desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .cmp-header .cmp-desktop-nav {
    display: flex;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.cmp-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
  margin: 0;
}

.cmp-skip-link a {
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.cmp-skip-link:focus-within {
  position: fixed;
  top: var(--wp--preset--spacing--sm);
  left: var(--wp--preset--spacing--sm);
  width: auto;
  height: auto;
  z-index: var(--wp--custom--z-index--skip);
}

/* Screen reader only — visually hidden, accessible to AT */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  /* WP a11y convention for screen-reader-text */
  word-wrap: normal;
}

/* Focus-visible for all interactive elements */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--text);
  outline-offset: 2px;
}

/* Suppress focus ring on mouse click */
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   Global Resets
   ========================================================================== */

img {
  border-radius: 0;
}

/* ==========================================================================
   Global Form Elements
   ========================================================================== */

:where(label) {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--text);
  display: block;
  margin-bottom: var(--wp--preset--spacing--xs);
}

:where(input, textarea, select)::placeholder {
  color: var(--wp--preset--color--text-muted);
  opacity: 1;
}

:where(input, textarea, select) {
  transition: border-color var(--cmp-duration-base) var(--cmp-ease);
}

:where(input, textarea, select):focus-visible {
  border-color: var(--wp--preset--color--text);
  outline: none;
}

:where(textarea) {
  min-height: 120px;
  resize: vertical;
  line-height: var(--wp--custom--line-height--normal);
}

:where(input[type="submit"], button[type="submit"]) {
  background-color: var(--wp--preset--color--action);
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: 0px;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
  cursor: pointer;
  transition: background-color var(--cmp-duration-base) var(--cmp-ease);
}

:where(input[type="submit"], button[type="submit"]):hover {
  background-color: var(--wp--preset--color--action-hover);
}

/* ==========================================================================
   Block Style: Blockquote
   ========================================================================== */

/* All blockquotes: base styling */
blockquote {
  position: relative;
  border-left: 3px solid var(--wp--preset--color--brand);
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--line-height--relaxed);
  color: var(--wp--preset--color--text);
  margin: var(--wp--preset--spacing--lg) 0;
}

/* Decorative open-quote mark */
blockquote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 12px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--brand);
  opacity: 0.3;
  pointer-events: none;
}

/* Citation styling */
blockquote cite {
  display: block;
  margin-top: var(--wp--preset--spacing--md);
  font-family: var(--wp--preset--font-family--body);
  font-style: normal;
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}

blockquote cite::before {
  content: '\2014\00a0';
}

/* Pullquote: centered drama */
.wp-block-pullquote {
  text-align: center;
}

.wp-block-pullquote blockquote::before {
  content: '\201C';
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--brand);
  opacity: 0.5;
  margin-bottom: var(--wp--preset--spacing--sm);
}

.wp-block-pullquote cite {
  font-family: var(--wp--preset--font-family--body);
  font-style: normal;
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}

/* ==========================================================================
   Label Component (consolidated)
   ========================================================================== */

.cmp-label {
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--body);
  margin: 0;
}

/* ==========================================================================
   Block Style: Category Badge
   ========================================================================== */

.is-style-category-badge.is-style-category-badge {
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--body);
}

.is-style-category-badge a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Block Style: Card Lift
   ========================================================================== */

.is-style-card-lift {
  transition: var(--cmp-transition-transform), var(--cmp-transition-shadow);
}

.is-style-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--cmp-shadow-lift);
}

/* Reserve 2-line height for card titles in grid layouts to align images */
.wp-block-post-template.is-layout-grid .wp-block-post-title {
  min-height: 60px;
}

/* ==========================================================================
   Block Style: Image Zoom
   ========================================================================== */

.is-style-image-zoom {
  overflow: hidden;
  position: relative;
}

.is-style-image-zoom a {
  display: block;
  width: 100%;
  height: 100%;
}

.is-style-image-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cmp-duration-slow) var(--cmp-ease);
}

.is-style-image-zoom:hover img,
.is-style-card-lift:hover .is-style-image-zoom img,
.wp-block-post-template > li:hover .is-style-image-zoom img {
  transform: scale(1.05);
}

/* Culture section: grayscale images with color on hover (SOT) */
.has-canvas-background-color .cmp-post-grid__image-link img {
  filter: grayscale(100%);
  transition: transform var(--cmp-duration-slow) var(--cmp-ease),
              filter var(--cmp-duration-slow) var(--cmp-ease);
}

.has-canvas-background-color .cmp-post-grid__card:hover .cmp-post-grid__image-link img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Group hover: highlight post-grid title when card is hovered */
.cmp-post-grid__card:hover .cmp-post-grid__title a {
  color: var(--wp--preset--color--brand);
  text-decoration: underline;
  text-decoration-thickness: var(--cmp-underline-thickness);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Block Style: Section Label
   ========================================================================== */

.is-style-section-label.is-style-section-label {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  font-family: var(--wp--preset--font-family--body);
}

/* ==========================================================================
   Block Style: Card Bordered
   ========================================================================== */

.is-style-card-bordered {
  border: var(--cmp-border);
  padding: var(--wp--preset--spacing--lg);
}

/* ==========================================================================
   Block Style: CTA Text Link
   ========================================================================== */

.is-style-cta-link {
  font-size: var(--wp--preset--font-size--badge);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--body);
}

.is-style-cta-link a {
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: var(--cmp-underline-offset);
  transition: text-decoration-color var(--cmp-duration-base) var(--cmp-ease);
}

.is-style-cta-link a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--cmp-underline-thickness);
  text-decoration-color: currentColor;
}

/* Group hover: activate CTA underline when parent card is hovered */
.cmp-guide-card:hover .is-style-cta-link a,
.wp-block-post-template > li:hover .is-style-cta-link a,
.wp-block-post-template > li:hover .wp-block-read-more.is-style-cta-link {
  text-decoration: underline;
  text-decoration-thickness: var(--cmp-underline-thickness);
  text-decoration-color: currentColor;
}

/* CTA arrow: slides right on hover, never underlined */
.cmp-arrow {
  display: inline-block;
  margin-left: 0.25em;
  text-decoration: none;
  transition: transform var(--cmp-duration-base) var(--cmp-ease);
}

.is-style-cta-link a:hover .cmp-arrow,
.cmp-guide-card:hover .is-style-cta-link a .cmp-arrow,
.wp-block-post-template > li:hover .is-style-cta-link a .cmp-arrow,
.wp-block-post-template > li:hover .wp-block-read-more.is-style-cta-link .cmp-arrow,
.cmp-article-guides__card:hover .cmp-arrow,
.cmp-article-guides__viewall:hover .cmp-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Base Button Transition
   ========================================================================== */

.wp-element-button {
  transition: var(--cmp-transition-bg), var(--cmp-transition-color);
}

/* ==========================================================================
   Block Style: Outline Button
   ========================================================================== */

.is-style-outline-button .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--wp--preset--color--text);
}

.is-style-outline-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Block Style: Dark Outline Button
   ========================================================================== */

.is-style-dark-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--wp--preset--color--background);
  color: var(--wp--preset--color--background);
}

.is-style-dark-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
}

/* ==========================================================================
   Block Style: No Decoration Link
   ========================================================================== */

.is-style-no-underline.is-style-no-underline a {
  text-decoration: none;
}

/* ==========================================================================
   Generic: Dot List Item
   ========================================================================== */

.cmp-dot-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
}

.cmp-dot-item::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   Generic: Underline Form
   ========================================================================== */

.cmp-form-underline {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cmp-bg-50);
  padding-bottom: var(--wp--preset--spacing--sm);
  max-width: 448px;
  margin: 0 auto;
  transition: border-color var(--cmp-duration-base) var(--cmp-ease);
}

.cmp-form-underline:focus-within {
  border-color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Generic: Elegant Input (serif italic, transparent)
   ========================================================================== */

.cmp-input-elegant {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--small);
  padding: var(--wp--preset--spacing--sm) 0;
  width: 100%;
}

.cmp-input-elegant::placeholder {
  color: var(--cmp-bg-60);
}

/* ==========================================================================
   Generic: Ghost Button (text-only, transparent)
   ========================================================================== */

.cmp-btn-ghost {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--body);
  transition: var(--cmp-transition-color);
}

.cmp-btn-ghost:hover {
  color: var(--cmp-bg-80);
}

/* ==========================================================================
   Generic: Wide Button
   ========================================================================== */

.cmp-btn-wide .wp-block-button__link {
  padding: var(--wp--preset--spacing--md) 40px;
}

/* ==========================================================================
   Generic: Card Subtle (muted bg + border)
   ========================================================================== */

.cmp-card-subtle {
  background: var(--wp--preset--color--canvas);
  border: 1px solid var(--cmp-border-50);
  padding: var(--wp--preset--spacing--xl);
}

/* ==========================================================================
   Generic: Pullquote
   ========================================================================== */

.cmp-pullquote {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.65;
}

/* ==========================================================================
   Generic: Link Lists (clean nav lists)
   ========================================================================== */

.cmp-link-lists ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--nav-link);
  line-height: 28px;
}

.cmp-link-lists ul li {
  margin-bottom: var(--wp--preset--spacing--md);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--nav-link);
  line-height: 28px;
}

.cmp-link-lists a {
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--nav-link);
  line-height: 28px;
  transition: var(--cmp-transition-color);
}

.cmp-link-lists a:hover {
  color: var(--wp--preset--color--text-muted);
}

/* ==========================================================================
   Layout: Sidebar Stack
   ========================================================================== */

.cmp-sidebar-stack {
  border-top: var(--cmp-border);
  padding-top: var(--wp--preset--spacing--xl);
}

@media (min-width: 1024px) {
  .cmp-sidebar-stack {
    border-top: none;
    border-left: var(--cmp-border);
    padding-top: 0;
    padding-left: var(--wp--preset--spacing--xxl);
  }
}

/* Sidebar: Featured post (first loop) */
.cmp-sidebar-featured {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cmp-sidebar-featured > li {
  padding-bottom: var(--wp--preset--spacing--xl);
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin-bottom: var(--wp--preset--spacing--xl);
}

/* Sidebar: Compact posts (second loop) */
.cmp-sidebar-compact {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cmp-sidebar-compact > li + li {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--xl);
}

.cmp-sidebar-compact > li {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--wp--preset--spacing--md);
  align-content: center;
  min-height: 96px;
}

.cmp-sidebar-compact .wp-block-post-featured-image {
  grid-column: 1;
  grid-row: 1 / -1;
  overflow: hidden;
  align-self: center;
}

.cmp-sidebar-compact .wp-block-post-featured-image img {
  aspect-ratio: var(--wp--custom--aspect-ratio--square);
  object-fit: cover;
  width: 96px;
  height: 96px;
}

.cmp-sidebar-compact .wp-block-post-terms {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.cmp-sidebar-compact .wp-block-post-title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  line-height: 1.3;
}

/* ==========================================================================
   Responsive: Hero columns stack at lg breakpoint
   ========================================================================== */

@media (max-width: 1023px) {
  .cmp-sidebar-stack {
    margin-top: var(--wp--preset--spacing--xxl);
  }
}

/* ==========================================================================
   Dynamic Post Links
   ========================================================================== */

.wp-block-post-title a {
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: var(--cmp-underline-offset);
  color: inherit;
  transition: color var(--cmp-duration-base) var(--cmp-ease),
    text-decoration-color var(--cmp-duration-base) var(--cmp-ease);
}

/* Group hover: highlight title when post card is hovered */
.wp-block-post-template > li:hover .wp-block-post-title a {
  color: var(--wp--preset--color--brand);
  text-decoration: underline;
  text-decoration-thickness: var(--cmp-underline-thickness);
  text-decoration-color: currentColor;
}

.wp-block-post-featured-image {
  margin: 0;
}

.wp-block-post-excerpt {
  font-weight: 300;
}

.wp-block-read-more.is-style-cta-link {
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: var(--cmp-underline-offset);
  transition: text-decoration-color var(--cmp-duration-base) var(--cmp-ease);
}

.wp-block-read-more.is-style-cta-link:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--cmp-underline-thickness);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Infinite Scroll Loader
   ========================================================================== */

.cmp-infinite-loader {
  display: flex;
  justify-content: center;
  padding: var(--wp--preset--spacing--xl) 0;
}

.cmp-infinite-loader__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--text-muted);
  animation: cmp-pulse 1s ease-in-out infinite;
}

@keyframes cmp-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-infinite-loader__dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ==========================================================================
   Newsletter Dark Section
   ========================================================================== */

.cmp-newsletter-dark {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
}

.cmp-newsletter-dark .is-style-section-label {
  color: var(--cmp-bg-80);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.cmp-newsletter-dark h2 {
  font-weight: 500;
  color: var(--wp--preset--color--background);
}

.cmp-newsletter-disclaimer {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cmp-bg-50);
  margin-top: var(--wp--preset--spacing--lg);
}

.cmp-newsletter-dark .cmp-dot-item {
  font-size: var(--wp--preset--font-size--small);
  color: var(--cmp-bg-80);
}

/* Newsletter dark: form container — plugin-agnostic */
.cmp-newsletter-dark form {
  max-width: 448px;
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-bottom: 1px solid var(--cmp-bg-50);
  padding: 0 0 var(--wp--preset--spacing--sm);
  transition: border-color var(--cmp-duration-base) var(--cmp-ease);
}

.cmp-newsletter-dark form,
.cmp-newsletter-dark fieldset {
  display: flex;
  align-items: center;
  gap: 0;
  min-inline-size: 0;
  width: 100%;
}

.cmp-newsletter-dark fieldset {
  margin: 0;
}

.cmp-newsletter-dark form:focus-within {
  border-bottom-color: var(--wp--preset--color--background);
}

.cmp-newsletter-dark fieldset {
  padding: 0;
}

.cmp-newsletter-dark fieldset > * {
  margin-bottom: 0;
}

/* Beat plugin default margin (e.g. .frm-fluent-form .ff-el-group at 0,2,0) */
.wp-block-group.cmp-newsletter-dark form div {
  margin-bottom: 0;
}

.cmp-newsletter-dark fieldset > :has(input[type="email"]),
.cmp-newsletter-dark fieldset > :has(input[type="text"]) {
  flex: 1;
  min-width: 0;
}

.cmp-newsletter-dark fieldset > :has(button[type="submit"]),
.cmp-newsletter-dark fieldset > :has(input[type="submit"]) {
  flex: 0 0 auto;
}

.cmp-newsletter-dark input[type="email"],
.cmp-newsletter-dark input[type="text"] {
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--small);
  padding: 0;
  height: auto;
  width: 100%;
}

.cmp-newsletter-dark input::placeholder {
  color: var(--cmp-bg-60);
  opacity: 1;
}

.cmp-newsletter-dark button[type="submit"],
.cmp-newsletter-dark input[type="submit"] {
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  height: auto;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--cmp-transition-color);
  flex-shrink: 0;
}

.cmp-newsletter-dark button[type="submit"]:hover,
.cmp-newsletter-dark input[type="submit"]:hover {
  color: var(--cmp-bg-80);
}

/* ==========================================================================
   Legal Links
   ========================================================================== */

.cmp-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xl);
  font-size: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cmp-legal-links a {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--text-muted);
  transition: var(--cmp-transition-color);
}

.cmp-legal-links a:hover {
  color: var(--wp--preset--color--text);
}

.cmp-footer-privacy .cmp-legal-links {
  gap: var(--wp--preset--spacing--md);
}

.cmp-footer-privacy .cmp-legal-links a {
  font-weight: 400;
}

.cmp-footer-privacy .cmp-legal-links a:hover {
  color: var(--wp--preset--color--text);
}

.cmp-link-sep {
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--text-muted);
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Article Gift Guides (bottom of single posts)
   ========================================================================== */

.cmp-article-guides {
  border-top: var(--cmp-border);
  padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--lg);
}

.cmp-article-guides__inner {
  max-width: 960px;
  margin: 0 auto;
}

.cmp-article-guides__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: var(--cmp-border);
  padding-bottom: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--xl);
}

.cmp-article-guides__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.2;
  margin: 0 0 4px;
}

.cmp-article-guides__subtitle {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
  font-weight: 300;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}

.cmp-article-guides__viewall {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  white-space: nowrap;
  transition: var(--cmp-transition-color);
}

.cmp-article-guides__viewall:hover {
  color: var(--wp--preset--color--brand);
}

.cmp-article-guides__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--lg);
}

/* Constrain width when fewer than 3 guides */
[data-guides="2"] .cmp-article-guides__grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

[data-guides="1"] .cmp-article-guides__grid {
  grid-template-columns: 1fr;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.cmp-article-guides__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cmp-article-guides__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--cmp-border-subtle);
  margin-bottom: var(--wp--preset--spacing--md);
}

.cmp-article-guides__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform var(--cmp-duration-slow) var(--cmp-ease),
              filter var(--cmp-duration-slow) var(--cmp-ease);
}

.cmp-article-guides__card:hover .cmp-article-guides__image img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.cmp-article-guides__card-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--medium);
  text-align: center;
  margin: 0 0 var(--wp--preset--spacing--sm);
  line-height: 1.3;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: var(--cmp-underline-offset);
  transition: color var(--cmp-duration-base) var(--cmp-ease),
    text-decoration-color var(--cmp-duration-base) var(--cmp-ease);
}

.cmp-article-guides__card:hover .cmp-article-guides__card-title {
  color: var(--wp--preset--color--brand);
  text-decoration: underline;
  text-decoration-thickness: var(--cmp-underline-thickness);
  text-decoration-color: currentColor;
}

.cmp-article-guides__cta {
  display: block;
  text-align: center;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--wp--preset--color--text-muted);
  transition: var(--cmp-transition-color);
}

.cmp-article-guides__card:hover .cmp-article-guides__cta {
  color: var(--wp--preset--color--brand);
}

/* ==========================================================================
   Curated Guide CTA (mid-article callout)
   ========================================================================== */

.cmp-curated-cta {
  border: var(--cmp-border);
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
  text-align: center;
  margin: var(--wp--preset--spacing--xl) 0;
}

.cmp-curated-cta__label {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--body);
}

.cmp-curated-cta__heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-style: italic;
}

.cmp-curated-cta__desc {
  color: var(--wp--preset--color--text-muted);
  max-width: 480px;
  margin: 0 auto var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--line-height--relaxed);
}

/* Override post-content link styles — button must retain text color */
.cmp-curated-cta .cmp-curated-cta__button {
  display: inline-block;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 2px solid var(--wp--preset--color--text);
  border-bottom: 2px solid var(--wp--preset--color--text);
  padding: 12px var(--wp--preset--spacing--xl);
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--body);
  background-image: none;
  background-size: 0;
  transition: var(--cmp-transition-bg), var(--cmp-transition-color);
}

.cmp-curated-cta .cmp-curated-cta__button:hover {
  background: var(--wp--preset--color--text);
  background-image: none;
  color: var(--wp--preset--color--background);
  border-color: var(--wp--preset--color--text);
}

/* ==========================================================================
   Guide Card Hover
   ========================================================================== */

.cmp-guide-card {
  position: relative;
  transition: transform 500ms var(--cmp-ease), box-shadow 500ms var(--cmp-ease);
  overflow: hidden;
  border: 1px solid var(--cmp-border-50);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cmp-guide-card > * {
  /* Overrides WP block-gap margin on child blocks (applied via :where()) */
  margin-top: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   Generic: Inset Badge (overlays parent)
   ========================================================================== */

.cmp-inset-badge {
  position: absolute;
  top: 28px;
  left: 28px;
  background: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: var(--wp--custom--z-index--badge);
  box-shadow: 0 1px 2px var(--cmp-text-05);
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--body);
  /* Overrides WP block-gap margin (applied via :where()) */
  margin: 0;
}

.cmp-guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cmp-shadow-xl);
}

.cmp-guide-card .wp-block-image {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--wp--preset--spacing--lg);
}

.cmp-guide-card img {
  transition: transform 700ms var(--cmp-ease);
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

.cmp-guide-card:hover img {
  transform: scale(1.05);
}

.cmp-guide-card-text {
  padding: var(--wp--preset--spacing--md);
  padding-bottom: var(--wp--preset--spacing--lg);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ==========================================================================
   Archive: Hero First Post
   ========================================================================== */

/* Archive + Search grid gaps */
.cmp-archive-grid,
.cmp-search-grid {
  gap: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xl);
}

/* Search grid: top-align cards (no row stretching for missing images) */
.cmp-search-grid {
  align-items: start;
}

/* First post spans full width as hero */
.cmp-archive-grid > li:first-child {
  grid-column: 1 / -1;
  margin-bottom: var(--wp--preset--spacing--xl);
}

.cmp-archive-grid > li:first-child > .cmp-archive-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--xxl);
  align-items: center;
}

.cmp-archive-grid > li:first-child :where(.wp-block-post-featured-image) {
  margin-bottom: 0;
}

.cmp-archive-grid > li:first-child .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cmp-archive-grid > li:first-child :where(.wp-block-post-terms) {
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--md);
}

.cmp-archive-grid > li:first-child .wp-block-post-terms a {
  color: var(--wp--preset--color--text-muted);
}

.cmp-archive-grid > li:first-child .wp-block-post-title {
  line-height: 1.15;
  margin-bottom: var(--wp--preset--spacing--md);
}

.cmp-archive-grid > li:first-child :where(.wp-block-post-excerpt) {
  font-size: var(--wp--preset--font-size--medium);
}

/* Hide "Read Essay" CTA on grid cards (non-hero) */
.cmp-archive-grid > li:not(:first-child) .wp-block-read-more {
  display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

:where(footer.wp-block-template-part) {
  border-top: var(--cmp-border);
  padding: var(--wp--preset--spacing--xxxxxl) 0 var(--wp--preset--spacing--xxl);
  margin-top: 0;
}

/* Reset WP constrained-layout inner padding and block-gap margins */
:where(footer.wp-block-template-part) > .wp-block-group {
  padding-top: 0;
  padding-bottom: 0;
}

:where(footer.wp-block-template-part) .wp-block-group.has-background-background-color > * {
  margin-top: 0;
}

.cmp-footer-brand {
  margin-bottom: var(--wp--preset--spacing--md);
}

/* --- Row 1: Brand + Join the List --- */

.cmp-footer-top {
  margin-bottom: var(--wp--preset--spacing--xxxxl);
}

.cmp-footer-top > .wp-block-group {
  max-width: 448px;
  width: 100%;
}

.cmp-footer-top > .wp-block-group > * {
  margin-top: 0;
}

.cmp-footer-top > .wp-block-group > p,
.cmp-footer-top > .wp-block-group > .wp-block-social-links {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--lg);
}

.cmp-footer-top > .wp-block-group > .wp-block-social-links {
  margin-bottom: 0;
}

.cmp-footer-top > .wp-block-group > p:not(.cmp-footer-brand) {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
  line-height: 26px;
  color: var(--wp--preset--color--text-muted);
}

/* --- Join the List card --- */

.cmp-card-subtle .cmp-label {
  margin-bottom: var(--wp--preset--spacing--md);
}

.cmp-card-subtle > * {
  margin-top: 0;
}

.cmp-card-subtle > p:not(.cmp-label) {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--lg);
  font-size: var(--wp--preset--font-size--small);
  line-height: 20px;
  color: var(--wp--preset--color--text-muted);
}

.cmp-card-subtle form,
.cmp-card-subtle fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
  margin: 0;
  padding: 0;
  border: none;
  min-inline-size: 0;
}

.cmp-card-subtle input[type="email"],
.cmp-card-subtle input[type="text"] {
  flex: 1;
  min-width: 0;
  background: var(--wp--preset--color--white);
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  padding: 12px var(--wp--preset--spacing--md);
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-size: var(--wp--preset--font-size--small);
  height: 48px;
}

.cmp-card-subtle input::placeholder {
  color: var(--wp--preset--color--text-muted);
  opacity: 0.5;
}

.cmp-card-subtle button[type="submit"],
.cmp-card-subtle input[type="submit"] {
  height: 48px;
  white-space: nowrap;
  padding: 8px 32px;
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--background);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: var(--cmp-transition-bg);
  flex-shrink: 0;
}

.cmp-card-subtle button[type="submit"]:hover,
.cmp-card-subtle input[type="submit"]:hover {
  background: var(--wp--preset--color--text-muted);
}

.cmp-card-subtle fieldset > * {
  margin-bottom: 0;
}

.cmp-card-subtle fieldset > :has(input[type="email"]),
.cmp-card-subtle fieldset > :has(input[type="text"]) {
  flex: 1;
  min-width: 0;
}

.cmp-card-subtle fieldset > :has(button[type="submit"]),
.cmp-card-subtle fieldset > :has(input[type="submit"]) {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .cmp-card-subtle form,
  .cmp-card-subtle fieldset {
    flex-direction: column;
  }

  .cmp-card-subtle input[type="email"],
  .cmp-card-subtle input[type="text"],
  .cmp-card-subtle button[type="submit"],
  .cmp-card-subtle input[type="submit"] {
    width: 100%;
  }
}

/* --- Row 2: Link Lists --- */

.cmp-link-lists {
  border-top: var(--cmp-border);
  padding-top: var(--wp--preset--spacing--xxl);
  padding-bottom: var(--wp--preset--spacing--xxl);
  gap: var(--wp--preset--spacing--xxl);
}

.cmp-link-lists .cmp-label {
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--xl);
}

.cmp-link-lists .wp-block-navigation {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--nav-link);
  line-height: 28px;
  text-transform: none;
  letter-spacing: normal;
}

.cmp-link-lists a {
  font-family: var(--wp--preset--font-family--heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--nav-link);
  line-height: 28px;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  transition: var(--cmp-transition-color);
}

.cmp-link-lists a:hover {
  color: var(--wp--preset--color--text-muted);
}

/* Footer link lists: 2-col on mobile (SOT: grid-cols-2 md:grid-cols-4) */
@media (max-width: 767px) {
  .wp-block-columns.cmp-link-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--xxl);
  }
}

/* --- Quote column --- */

.cmp-footer-quote {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cmp-footer-quote .cmp-pullquote {
  border-left: var(--cmp-border);
  padding-left: var(--wp--preset--spacing--lg);
  padding-top: var(--wp--preset--spacing--sm);
  padding-bottom: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--badge);
  line-height: 16px;
  color: var(--wp--preset--color--text-muted);
}

.cmp-footer-quote .is-style-section-label {
  border-left: var(--cmp-border);
  padding-left: var(--wp--preset--spacing--lg);
  margin-top: var(--wp--preset--spacing--sm);
  font-style: italic;
  letter-spacing: 1px;
  color: var(--wp--preset--color--text-muted);
}

/* --- Row 3: Legal --- */

.cmp-footer-legal {
  border-top: var(--cmp-border);
  padding-top: var(--wp--preset--spacing--xl);
  flex-wrap: nowrap;
  font-size: var(--wp--preset--font-size--caption);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}

/* Footer top: stack on mobile (SOT: flex-col md:flex-row) */
@media (max-width: 767px) {
  .cmp-footer-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* Footer legal bar: wraps on mobile */
@media (max-width: 767px) {
  .cmp-footer-legal {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--lg);
  }

  .cmp-footer-legal .cmp-legal-links {
    justify-content: center;
  }
}

/* ==========================================================================
   Responsive: Article Gift Guides
   ========================================================================== */

@media (max-width: 768px) {
  .cmp-article-guides__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-guides="1"] .cmp-article-guides__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

@media (max-width: 640px) {
  .cmp-article-guides__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--sm);
  }

  .cmp-article-guides__grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  [data-guides="2"] .cmp-article-guides__grid,
  [data-guides="1"] .cmp-article-guides__grid {
    max-width: 320px;
  }

  .cmp-article-guides__title {
    font-size: var(--wp--preset--font-size--x-large);
  }
}

/* ==========================================================================
   Responsive: Guide Grid (homepage)
   ========================================================================== */

@media (max-width: 768px) {
  :where(.wp-block-columns).cmp-guide-grid {
    flex-wrap: wrap;
  }

  :where(.wp-block-columns).cmp-guide-grid > .wp-block-column {
    flex-basis: calc(50% - 16px);
  }
}

@media (max-width: 640px) {
  :where(.wp-block-columns).cmp-guide-grid > .wp-block-column {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Admin Bar: Scroll Away on Mobile
   ========================================================================== */

@media (max-width: 782px) {
  html.wp-toolbar.wp-toolbar {
    padding-top: 0;
  }

  #wpadminbar#wpadminbar {
    position: absolute;
  }

  body.admin-bar header.wp-block-template-part {
    top: 0;
  }
}

/* ==========================================================================
   Mobile Menu: Flush Hierarchy
   ========================================================================== */

/* Slide-in animation for the overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  animation: cmp-menu-slide-in 0.3s var(--cmp-ease);
}

@keyframes cmp-menu-slide-in {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Increase close button tap target */
.wp-block-navigation__responsive-container-close {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

/* --- Overlay: full-viewport flex column --- */
@media (max-width: 767px) {
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
  }

  /* --- Parent items: full-width separators --- */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:not(
      .wp-block-navigation__submenu-container .wp-block-navigation-item
    ) {
    border-top: 1px solid var(--wp--preset--color--border-light);
    padding: var(--wp--preset--spacing--md) 0;
    margin: 0;
    width: 100%;
  }

  /* No top border on first item */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:first-child:not(
      .wp-block-navigation__submenu-container .wp-block-navigation-item
    ) {
    border-top: none;
  }

  /* --- Submenu container: no card, inline flow --- */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--wp--preset--spacing--sm) 0 0 var(--wp--preset--spacing--lg);
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* --- Submenu items: Playfair italic, indented, muted --- */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-size: var(--wp--preset--font-size--nav-link);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding: var(--wp--preset--spacing--xs) 0;
    color: var(--wp--preset--color--text-muted);
    transition: color var(--cmp-duration-fast) var(--cmp-ease);
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--text);
  }

  /* No separator between submenu items */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  /* --- Hide caret icon in mobile overlay --- */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-icon {
    display: none;
  }

  /* --- Brand footer anchored to bottom via ::after --- */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container::after {
    content: 'Curated picks for modern family life';
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--xl);
    border-top: 1px solid var(--wp--preset--color--border-light);
    font-family: var(--wp--preset--font-family--heading);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--text-muted);
    line-height: var(--wp--custom--line-height--relaxed);
    text-transform: none;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   Editor's Spotlight: Mobile Stack
   ========================================================================== */

@media (max-width: 781px) {
  /* Reverse column order so text appears first on mobile */
  .wp-block-query:has(.is-style-section-label) .wp-block-columns {
    flex-direction: column-reverse;
  }

  /* Hide the image column (60% column) on mobile since the post appears again below */
  .wp-block-query:has(.is-style-section-label) .wp-block-column[style*="flex-basis:60%"] {
    display: none;
  }
}

/* ==========================================================================
   Guide Cards: Mobile Aspect Ratio
   ========================================================================== */

@media (max-width: 640px) {
  .cmp-guide-card img {
    aspect-ratio: 3/2;
  }
}

/* ==========================================================================
   Footer: Mobile Polish
   ========================================================================== */

/* Ensure footer links have adequate tap targets (44px minimum) */
@media (max-width: 767px) {
  .cmp-link-lists a {
    display: block;
    padding: var(--wp--preset--spacing--xs) 0;
    min-height: 44px;
    line-height: 36px;
  }

  /* Legal bar: more vertical breathing room, hide dot separators */
  .cmp-footer-legal {
    gap: var(--wp--preset--spacing--sm);
  }

  .cmp-footer-legal .cmp-legal-links {
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--xs);
  }

  /* Hide dot separators in stacked layout */
  .cmp-footer-legal .cmp-legal-links .cmp-link-sep {
    display: none;
  }
}

/* ==========================================================================
   Touch Feedback
   ========================================================================== */

/* Brand-colored tap highlight (mobile WebKit/Blink) */
* {
  -webkit-tap-highlight-color: rgba(139, 74, 74, 0.35); /* link #8B4A4A at 35% */
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-contrast: more) {
  * {
    -webkit-tap-highlight-color: rgba(139, 74, 74, 0.5); /* link #8B4A4A at 50% */
  }
}

/* Card press feedback */
.cmp-archive-card:active,
.cmp-guide-card:active {
  transform: scale(0.98);
  transition: transform 100ms var(--cmp-ease);
}

/* Button press feedback */
.wp-block-button__link:active {
  opacity: 0.85;
  transition: opacity 100ms var(--cmp-ease);
}

/* CTA link press feedback */
.is-style-cta-link a:active {
  opacity: 0.7;
}

/* ==========================================================================
   Empty Section: Hide When No Posts
   ========================================================================== */

/* Hide entire section wrapper when post-grid has no content */
.wp-block-group:has(> .cmp-post-grid--empty) {
  display: none;
}

/* ==========================================================================
   Comments (Modern Block Structure)
   ========================================================================== */

/* --- Comments title --- */

.wp-block-comments-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 400;
  line-height: var(--wp--custom--line-height--snug);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xl);
}

/* --- Comment template (individual comments) --- */

.wp-block-comment-template {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wp-block-comment-template > li {
  border-top: var(--cmp-border-subtle);
  padding: var(--wp--preset--spacing--lg) 0;
}

.wp-block-comment-template > li:first-child {
  border-top: none;
}

/* --- Avatar --- */

.wp-block-comment-template .wp-block-avatar img {
  border-radius: var(--wp--custom--border-radius--full);
  display: block;
}

/* --- Author name --- */

.wp-block-comment-author-name {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--text);
}

.wp-block-comment-author-name a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}

.wp-block-comment-author-name a:hover {
  color: var(--wp--preset--color--link);
}

/* --- Comment date --- */

.wp-block-comment-date {
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--text-muted);
}

.wp-block-comment-date a {
  color: inherit;
  text-decoration: none;
}

.wp-block-comment-date a:hover {
  text-decoration: underline;
  text-underline-offset: var(--cmp-underline-offset);
  text-decoration-thickness: var(--cmp-underline-thickness);
}

/* --- Comment content --- */

.wp-block-comment-content {
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--line-height--relaxed);
  color: var(--wp--preset--color--text);
}

.wp-block-comment-content p:last-child {
  margin-bottom: 0;
}

/* --- Reply + edit links --- */

.wp-block-comment-reply-link,
.wp-block-comment-edit-link {
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wp-block-comment-reply-link a,
.wp-block-comment-edit-link a {
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  transition: color var(--cmp-duration-base) var(--cmp-ease);
}

.wp-block-comment-reply-link a:hover,
.wp-block-comment-edit-link a:hover {
  color: var(--wp--preset--color--link);
}

.wp-block-comment-reply-link a:focus-visible,
.wp-block-comment-edit-link a:focus-visible {
  outline: 2px solid var(--wp--preset--color--link);
  outline-offset: 2px;
}

/* --- Thread indentation --- */

.wp-block-comment-template .children {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: var(--wp--preset--spacing--lg);
}

/* --- Comments pagination --- */

.wp-block-comments-pagination {
  margin-top: var(--wp--preset--spacing--lg);
}

/* --- Comment form --- */

.wp-block-post-comments-form {
  margin-top: var(--wp--preset--spacing--xl);
  border-top: var(--cmp-border);
  padding-top: var(--wp--preset--spacing--xl);
}

.wp-block-post-comments-form .comment-reply-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  line-height: var(--wp--custom--line-height--snug);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--md);
}

.wp-block-post-comments-form .comment-reply-title small {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 400;
  margin-top: var(--wp--preset--spacing--xs);
}

.wp-block-post-comments-form .comment-reply-title small a {
  color: var(--wp--preset--color--link);
  text-decoration: underline;
  text-underline-offset: var(--cmp-underline-offset);
}

.wp-block-post-comments-form .logged-in-as,
.wp-block-post-comments-form .must-log-in {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
}

.wp-block-post-comments-form .form-submit {
  margin-top: var(--wp--preset--spacing--sm);
}

/* ==========================================================================
   Comments: Mobile Responsive
   ========================================================================== */

@media (max-width: 767px) {
  .wp-block-comment-template .children {
    padding-left: var(--wp--preset--spacing--md);
  }

  .wp-block-comment-template .wp-block-avatar img {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}