/*
 * Cafe Ariel — one consistent outside vertical rhythm for all non-home content pages.
 * Keep the distance from the site header to the first content card equal to the
 * distance from the last content card to the footer. Internal card-to-card gaps
 * remain controlled by the existing --ca-rhythm-section token.
 */
:root {
  --ca-header-card-gap: 18px;
}

/* Product and standard WordPress article templates have one wrapper around all cards. */
html body main.ca-single-product,
html body main.ca-single-article {
  --ca-header-card-gap: 18px;
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

html body main.ca-single-product > .ca-single-product-container:first-child,
html body main.ca-single-article > .ca-single-article-container:first-child {
  margin-block-start: 0 !important;
  padding-block-start: var(--ca-header-card-gap) !important;
  padding-block-end: var(--ca-header-card-gap) !important;
}

/* Archive, category, tag, author, search and ordinary WordPress pages may use
   multiple sibling containers. Apply the same top gap to the first and the same
   bottom gap to the page root, while removing any extra last-container margin. */
html body main.cr-editorial-page {
  --ca-header-card-gap: 18px;
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: var(--ca-header-card-gap) !important;
}

html body main.cr-editorial-page > .ca2-container:first-child {
  margin-block-start: 0 !important;
  padding-block-start: var(--ca-header-card-gap) !important;
}

html body main.cr-editorial-page > :last-child {
  margin-block-end: 0 !important;
}

/* Login and registration templates use the main itself as their container. */
html body main.ca-auth-page {
  --ca-header-card-gap: 18px;
  margin-block-start: 0 !important;
  padding-block-start: var(--ca-header-card-gap) !important;
  padding-block-end: var(--ca-header-card-gap) !important;
}

/* Payment confirmation / post-payment message page. */
html body section.ca2-container.ca-payment-page {
  margin-block-start: var(--ca-header-card-gap) !important;
  margin-block-end: var(--ca-header-card-gap) !important;
}

/* Receipt template wraps its main in an outer .ca2-container. Keep exactly one gap. */
html body main.receipt_page.ca-receipt-page {
  margin-block-start: var(--ca-header-card-gap) !important;
  margin-block-end: var(--ca-header-card-gap) !important;
  padding-block-start: 0 !important;
}

html body .ca2-container:has(> main.receipt_page.ca-receipt-page) {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

/* Final mobile search icon color authority.
   page-spacing.css is intentionally enqueued after shared/component styles, so this
   overrides legacy focus/active colors that are declared earlier in the cascade. */
@media (max-width: 1024px) {
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger,
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger:hover,
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger:focus,
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger:focus-visible,
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger:active,
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger[aria-expanded="true"],
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit:hover,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit:focus,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit:focus-visible,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger > i,
  html body .ca-modern-header .ca-mobile-actions > .ca-mobile-search-trigger > i::before,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit > i,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit > i::before,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit > svg,
  html body .ca-modern-header .ca-mobile-search-panel .ca-search-submit > svg * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
}


/* Apply the same calibrated outer gap on phones to every covered non-home template. */
@media (max-width: 767.98px) {
  :root {
    --ca-header-card-gap: 14px;
  }

  html body main.ca-single-product,
  html body main.ca-single-article,
  html body main.cr-editorial-page,
  html body main.ca-auth-page {
    --ca-header-card-gap: 14px;
  }
}