/* =====================================================================
   Steph's Treks: Additional CSS for Twenty Twenty-Five (v2, Oct 2026)
   Paste into Appearance > Editor > Styles > (â‹®) Additional CSS.
   Works with the block markup in home/about/services/book-now/contact/
   legal-terms/privacy/footer-pattern/header-pattern.html.
   Fonts: install Cormorant Garamond, Montserrat and Dancing Script in
   Styles > Typography > Fonts (Font Library) so these names resolve.
   ===================================================================== */
/* ---------- 1. Palette & tokens ---------- */
:root {
  --st-aubergine: #2b0a30;
  --st-plum:      #4b1452;
  --st-amethyst:  #7b2d86;
  --st-peacock:   #0b4f56;
  --st-lagoon:    #0e6b6e;
  --st-seaglass:  #dcedea;
  --st-pearl:     #f3ece1;
  --st-ivory:     #fbf8f2;
  --st-champagne: #c5a467;
  --st-ink:       #24102a;
  --st-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --st-sans:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --st-script: "Dancing Script", "Brush Script MT", cursive;
  --st-shadow: 0 1px 2px rgba(36, 16, 42, .05), 0 14px 40px -18px rgba(36, 16, 42, .28);
  --st-shadow-hover: 0 2px 4px rgba(36, 16, 42, .06), 0 22px 50px -18px rgba(36, 16, 42, .36);
  --st-ease: cubic-bezier(.22, .61, .36, 1);
}
/* ---------- 2. Base typography ---------- */
body {
  font-family: var(--st-sans);
  color: var(--st-ink);
  background: var(--st-ivory);
  font-size: 1.0625rem;
  line-height: 1.8;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-site-title,
.wp-block-post-title {
  font-family: var(--st-serif);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-weight: 300; }
h3 { line-height: 1.25; }
p { text-wrap: pretty; }
.has-cormorant-garamond-font-family { font-family: var(--st-serif) !important; }
.has-montserrat-font-family        { font-family: var(--st-sans) !important; }
.has-dancing-script-font-family    { font-family: var(--st-script) !important; font-weight: 500; letter-spacing: 0; text-transform: none; }
::selection { background: var(--st-champagne); color: var(--st-aubergine); }
/* Links */
a { color: var(--st-lagoon); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color .25s var(--st-ease); }
a:hover, a:focus { color: var(--st-amethyst); }
a:focus-visible, .wp-element-button:focus-visible { outline: 2px solid var(--st-champagne); outline-offset: 3px; }
/* Small-caps "eyebrow" paragraphs (uppercase, letter-spaced) */
p[style*="text-transform:uppercase"] { font-family: var(--st-sans); }
/* ---------- 3. Buttons ---------- */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--st-sans);
  border-radius: 0 !important;
  transition: background-color .3s var(--st-ease), color .3s var(--st-ease), border-color .3s var(--st-ease), transform .3s var(--st-ease), box-shadow .3s var(--st-ease);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--st-aubergine) !important;
  color: var(--st-ivory) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(43, 10, 48, .55);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border: 1px solid currentColor;
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--st-champagne) !important;
  border-color: var(--st-champagne);
  color: var(--st-aubergine) !important;
}
/* Light buttons on dark bands */
.st-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.st-cta  .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--st-champagne) !important;
  color: var(--st-aubergine) !important;
}
/* ---------- 4. Thin gold dividers ---------- */
hr.wp-block-separator.st-rule,
.wp-block-separator.st-rule {
  border: 0 !important;
  height: 1px !important;
  width: 72px !important;
  max-width: 72px;
  margin: 1.6rem 0 1.8rem !important;
  background: var(--st-champagne) !important;
  opacity: 1;
}
.has-text-align-center ~ .wp-block-separator.st-rule,
.st-page-header .wp-block-separator.st-rule,
.is-layout-constrained > .wp-block-separator.st-rule { margin-left: auto !important; margin-right: auto !important; }
.wp-block-column > .wp-block-separator.st-rule:first-child { margin-left: 0 !important; margin-top: 0 !important; }
/* tiny diamond ornament on centred rules */
.st-page-header .wp-block-separator.st-rule,
.st-section-title + .wp-block-separator.st-rule { position: relative; overflow: visible; }
.st-page-header .wp-block-separator.st-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  background: var(--st-champagne); transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 5px var(--st-ivory);
}
/* ---------- 5. Full-bleed photo hero with dark overlay ---------- */
.wp-block-cover.st-hero {
  min-height: 92vh;
  isolation: isolate;
}
.wp-block-cover.st-hero .wp-block-cover__image-background {
  object-position: center 60%;
  transform: scale(1.02);
}
/* Layered overlay: aubergine wash (block setting) + extra gradient for legibility */
.wp-block-cover.st-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(43,10,48,.25) 0%, rgba(43,10,48,0) 30%, rgba(43,10,48,0) 55%, rgba(43,10,48,.45) 100%),
    radial-gradient(ellipse at center, rgba(43,10,48,0) 45%, rgba(43,10,48,.25) 100%);
}
.wp-block-cover.st-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wp-block-cover.st-hero h1 { text-shadow: 0 2px 30px rgba(20, 4, 24, .35); }
.wp-block-cover.st-hero p  { text-shadow: 0 1px 16px rgba(20, 4, 24, .35); }
/* hairline gold frame inside the hero */
.wp-block-cover.st-hero::before {
  content: ""; position: absolute; inset: clamp(12px, 2vw, 24px); z-index: 2; pointer-events: none;
  border: 1px solid rgba(197, 164, 103, .45);
}
/* ---------- 6. Page headers (inner pages) ---------- */
.st-page-header { position: relative; }
.st-page-header h1 { font-weight: 300; }
/* ---------- 7. Cards with subtle shadow ---------- */
.st-card {
  height: 100%;
  background: #fff;
  box-shadow: var(--st-shadow);
  transition: transform .45s var(--st-ease), box-shadow .45s var(--st-ease);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.st-card:hover { transform: translateY(-4px); box-shadow: var(--st-shadow-hover); }
.st-card > .wp-block-image { margin: 0 !important; overflow: hidden; }
.st-card > .wp-block-image img { transition: transform 1.1s var(--st-ease); display: block; width: 100%; }
.st-card:hover > .wp-block-image img { transform: scale(1.045); }
.st-card-body { flex: 1; border-top: 2px solid var(--st-champagne); }
.st-card-body > * + * { margin-top: .85rem; }
.st-card-body .wp-block-buttons { margin-top: 1.4rem; }
.wp-block-columns:has(> .wp-block-column > .st-card) { align-items: stretch !important; }
/* ---------- 8. Alternating image / text sections ---------- */
.st-alt .wp-block-columns { align-items: center; }
.st-framed { position: relative; margin: 0; }
.st-framed img { display: block; width: 100%; box-shadow: var(--st-shadow); }
.st-framed::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--st-champagne);
}
.st-alt:nth-of-type(even) .st-framed::after { inset: 18px 18px -18px -18px; }
.st-alt { position: relative; z-index: 0; scroll-margin-top: 6rem; }
.st-alt .wp-block-list { padding-left: 0; list-style: none; }
.st-alt .wp-block-list li { position: relative; padding-left: 1.6rem; margin: .45rem 0; }
.st-alt .wp-block-list li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--st-champagne);
}
@media (max-width: 781px) {
  .st-framed::after { inset: 12px -10px -12px 10px !important; }
  /* keep image above text on mobile for every alternating row */
  .st-alt .wp-block-columns { display: flex; flex-direction: column; }
  .st-alt .wp-block-column:has(.wp-block-image) { order: -1; }
}
/* ---------- 9. Quote band, CTA band ---------- */
.st-quote-band { position: relative; overflow: hidden; }
.st-quote-band::before {
  content: "\201C"; position: absolute; left: 50%; top: -.15em; transform: translateX(-50%);
  font-family: var(--st-serif); font-size: clamp(10rem, 22vw, 18rem); line-height: 1;
  color: rgba(197, 164, 103, .12); pointer-events: none;
}
.st-quote-band > * { position: relative; }
.st-cta { position: relative; }
.st-cta::before, .st-cta::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: clamp(2rem, 5vw, 3.5rem);
  background: var(--st-champagne); transform: translateX(-50%); opacity: .7;
}
.st-cta::before { top: 0; }
.st-cta::after { bottom: 0; }
/* ---------- 10. Details / FAQ ---------- */
.wp-block-details {
  border-bottom: 1px solid rgba(197, 164, 103, .55);
  padding: 1.15rem 0;
}
.wp-block-details summary {
  font-family: var(--st-serif); font-size: 1.35rem; color: var(--st-plum);
  cursor: pointer; list-style: none; position: relative; padding-right: 2rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+"; position: absolute; right: 0; top: 0; font-family: var(--st-sans); font-weight: 300;
  color: var(--st-champagne); font-size: 1.5rem; transition: transform .3s var(--st-ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > *:not(summary) { margin-top: .8rem; }
/* ---------- 11. Disclosure boxes (Book Now, Terms) ---------- */
.st-disclosure { box-shadow: var(--st-shadow); }
.st-disclosure a { font-weight: 600; }
/* ---------- 12. Header ---------- */
header.wp-block-group { position: relative; }
header .wp-block-navigation a { text-decoration: none; color: var(--st-ink); }
header .wp-block-navigation a:hover { color: var(--st-lagoon); }
header .wp-block-navigation .wp-block-navigation-item__content { position: relative; }
header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--st-champagne);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--st-ease);
}
header .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after { transform: scaleX(1); }
header .wp-block-navigation__submenu-container {
  border: 0 !important; box-shadow: var(--st-shadow); background: var(--st-ivory) !important; padding: .6rem 0 !important;
  border-top: 2px solid var(--st-champagne) !important;
}
header .wp-block-navigation__submenu-container a { padding: .55rem 1.3rem !important; letter-spacing: .12em; }
/* ---------- 13. Footer ---------- */
footer.st-footer a, .st-footer a { color: var(--st-ivory); text-decoration: none; border-bottom: 1px solid rgba(197, 164, 103, .45); }
.st-footer a:hover { color: var(--st-champagne); border-bottom-color: var(--st-champagne); }
.st-footer .wp-block-social-links a { border: 0; }
.st-footer .wp-block-social-links .wp-social-link { transition: transform .3s var(--st-ease), opacity .3s; opacity: .85; }
.st-footer .wp-block-social-links .wp-social-link:hover { transform: translateY(-2px); opacity: 1; }
.st-footer-legal { margin-top: 1.25rem !important; opacity: .78; }
.st-footer-legal p { margin: 0; }
/* Archer logo: small, muted, footer only, beside the required disclosure */
.archer-logo { margin: 0 !important; }
.archer-logo img {
  width: 80px !important; max-width: 80px !important; height: auto !important;
  filter: grayscale(1) brightness(1.6); opacity: .55;
}
.st-archer-col { flex: 0 0 96px !important; max-width: 96px; }
@media (max-width: 781px) { .st-archer-col { flex-basis: auto !important; } }
/* ---------- 14. Empty image slots (before photos are uploaded) ---------- */
.wp-block-image:has(img[src=""]) { background: var(--st-seaglass); position: relative; }
.wp-block-image img[src=""] { visibility: hidden; }
.wp-block-image:has(img[src=""]):not(.archer-logo) { aspect-ratio: 3 / 2; }
.archer-logo:has(img[src=""]),
.st-archer-col:has(img[src=""]) { display: none !important; }
/* ---------- 15. Spacing rhythm & misc ---------- */
.wp-block-columns { margin-bottom: 0; }
.wp-block-image img { height: auto; }
.wp-block-quote { border-left: 1px solid var(--st-champagne); padding-left: 1.5rem; font-family: var(--st-serif); font-size: 1.35rem; }
@media (max-width: 781px) {
  body { font-size: 1rem; }
  .wp-block-cover.st-hero { min-height: 82vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .st-card:hover, .st-card:hover > .wp-block-image img { transform: none; }
}