/*
Theme Name: TerraGo
Theme URI: https://terrago.test
Author: TerraGo
Description: Custom block theme for TerraGo — craft retreats in Portugal. Built to the Terra Go Figma design and integrated with WP Travel Engine (retreats = Trips). Palette #1D328D / #FE904D / #CEFBF4; type Pliant + Suisse Int'l.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terrago
Tags: block-theme, full-site-editing, travel, booking
*/

/* Block themes are styled via theme.json + block styles. Keep this file lean —
   only add rules here that theme.json can't express (pseudo-elements, sticky
   positioning, :has(), the logo mark, accordion internals). */

:root {
  --terrago-radius: 20px;
  --terrago-radius-sm: 12px;
}

html { scroll-behavior: smooth; }

/* Anchor targets clear the sticky header. */
:target { scroll-margin-top: 7rem; }

/* ---------------------------------------------------------------- header -- */

.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--contrast);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Overlaid header on pages that open with a photographic hero.
   assets/js/terrago.js adds .is-overlay when the first block in <main> is a
   full-bleed cover, and .is-solid once the page is scrolled past it. Fixed
   rather than sticky so it takes no space in flow and the hero starts at the
   very top, as in the design. */
.wp-site-blocks > header.wp-block-template-part.is-overlay {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--wp--preset--color--contrast);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.is-overlay .terrago-logo,
.is-overlay .terrago-logo a { color: var(--wp--preset--color--contrast); }
.is-overlay .terrago-navpill .wp-block-navigation__container {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}
.is-overlay .terrago-navpill .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
/* The outlined "Book Now" uses currentColor, so it follows automatically —
   but its label needs the same treatment as the pill links. */
.is-overlay .terrago-headercta .is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--contrast);
  border-color: rgba(255, 255, 255, 0.75);
}
/* Scrolled: fall back to the solid header so the nav stays legible. */
.wp-site-blocks > header.wp-block-template-part.is-overlay.is-solid {
  background: var(--wp--preset--color--contrast);
  border-bottom-color: var(--wp--preset--color--border);
  color: var(--wp--preset--color--base);
}
.is-overlay.is-solid .terrago-logo,
.is-overlay.is-solid .terrago-logo a { color: var(--wp--preset--color--base); }
.is-overlay.is-solid .terrago-navpill .wp-block-navigation__container {
  background: var(--wp--preset--color--surface);
  backdrop-filter: none;
}
.is-overlay.is-solid .terrago-navpill .wp-block-navigation-item__content { color: var(--wp--preset--color--base); }
.is-overlay.is-solid .terrago-headercta .is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--base);
  border-color: currentColor;
}

/* The wordmark: TERRA · starburst · GO */
.terrago-logo a,
.terrago-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: inherit;
}
.terrago-logo svg { flex: none; width: 1.5em; height: 1.5em; }

/* Nav links sit inside a soft grey pill; the current page gets a coral chip. */
.terrago-navpill .wp-block-navigation__container {
  background: var(--wp--preset--color--surface);
  border-radius: 999px;
  padding: 0.35rem 0.5rem;
  gap: 0.25rem;
}
.terrago-navpill .wp-block-navigation-item__content {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--base);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.terrago-navpill .wp-block-navigation-item__content:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
  color: var(--wp--preset--color--base);
}
/* Current page = filled coral pill, as in the design.
   WordPress only marks a *custom* nav link current when the URL matches exactly,
   which never fires for "/retreats" on a trip archive or single trip. So the
   theme adds .is-current itself (see terrago_nav_current_class in functions.php)
   and both hooks are styled here. */
.terrago-navpill .current-menu-item > .wp-block-navigation-item__content,
.terrago-navpill .current_page_item > .wp-block-navigation-item__content,
.terrago-navpill .is-current > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}
/* Over a photographic hero the pill background is translucent, so the active
   chip needs to stay solid coral to remain readable. */
.is-overlay .terrago-navpill .is-current > .wp-block-navigation-item__content,
.is-overlay .terrago-navpill .current-menu-item > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}
/* The pill is one continuous surface — individual items must not paint their own
   background, or the pill reads as separate chips (visible over the hero). */
.terrago-navpill .wp-block-navigation-item__content { background: transparent; }

/* Header buttons: solid blue "Contact Us", outlined "Book Now". */
.terrago-headercta .wp-block-button__link { white-space: nowrap; }

/* Mobile overlay shouldn't inherit the pill chrome. */
.terrago-navpill .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* The header CTAs are a nowrap flex row, so below the overlay breakpoint they
   shoot past the viewport edge. Swap them for the matching links inside the
   hamburger overlay instead of letting them overflow.
   600px is core's `overlayMenu: mobile` breakpoint — keep these in step with it. */
@media (max-width: 599px) {
  /* Needs the extra class: core prints `body .is-layout-flex{display:flex}`
     (0,1,1), and a media query adds no specificity of its own. */
  .wp-block-buttons.terrago-headercta { display: none; }
}
@media (min-width: 600px) {
  /* On desktop the pill buttons cover these, so don't duplicate them in the nav. */
  .terrago-navpill .terrago-navcta { display: none; }
}

/* ------------------------------------------------------------- typography -- */

/* Headings put their final phrase in coral: <em> is the carrier so the markup
   stays semantic and the editor keeps it inline. */
.wp-block-heading em,
.terrago-accent {
  color: var(--wp--preset--color--accent);
  font-style: normal;
}

/* Eyebrow — a soft coral badge, not the usual letterspaced caps.
   The pill lives on an inner <span>, not the paragraph: constrained layouts
   centre every child with `margin-inline: auto`, and that auto margin is also
   what centres the content column. Shrink-wrapping the <p> itself would drop it
   out of the column and pin it to the viewport edge, so the <p> stays a normal
   full-width block and only the span shrinks. Alignment then just follows
   text-align, which is what the block editor already gives us. */
.terrago-eyebrow {
  margin-bottom: 1.25rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
}
.terrago-eyebrow > span {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
  color: var(--wp--preset--color--accent);
}

/* Wide banner image under a page hero — fills the content column. */
.terrago-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* Over a photographic hero the badge needs its own contrast. */
.terrago-eyebrow.is-on-image > span {
  background: rgba(0, 0, 0, 0.38);
  color: var(--wp--preset--color--contrast);
  backdrop-filter: blur(4px);
}

/* Section label — bullet, label, then a rule running to the edge. */
.terrago-sectionlabel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--base);
  margin-bottom: 1.5rem;
}
.terrago-sectionlabel::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--base);
}
.terrago-sectionlabel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wp--preset--color--border);
}

/* ------------------------------------------------------------------ media -- */

.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover { border-radius: var(--terrago-radius); }

/* Full-bleed bands are edge-to-edge, so no rounding. */
.wp-block-cover.alignfull { border-radius: 0; }

/* -------------------------------------------------------- cards & callouts -- */

.terrago-card {
  background: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--terrago-radius);
  padding: 1.75rem;
}

/* Media inside a card keeps a consistent landscape crop rather than running to
   the source image's own aspect ratio. */
.terrago-card .terrago-banner img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Coral circular icon badge above a feature heading. */
.terrago-iconcircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
  font-size: 1.1rem;
  line-height: 1;
  margin-bottom: 1rem;
}

/* Mint callout with a coral rule down the left edge. */
.terrago-callout {
  background: var(--wp--preset--color--mint);
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: var(--terrago-radius-sm);
  padding: 1.25rem 1.5rem;
  color: var(--wp--preset--color--primary);
}
.terrago-callout p { margin: 0; }
.terrago-callout.is-style-quote p { font-style: italic; }

/* Small peach tag chips (e.g. "BASED IN PORTUGAL"). */
.terrago-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.terrago-chips > * {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------- legal pages: TOC + body -- */

/* Sticky contents rail beside long policy copy. */
.terrago-toc {
  position: sticky;
  top: 7rem;
  align-self: start;
}
.terrago-toc ul { list-style: none; margin: 0; padding: 0; }
.terrago-toc li { margin: 0; }
.terrago-toc a {
  display: block;
  padding: 0.7rem 1rem;
  border-left: 3px solid transparent;
  border-radius: 0 var(--terrago-radius-sm) var(--terrago-radius-sm) 0;
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
}
.terrago-toc a:hover { background: var(--wp--preset--color--surface); }
.terrago-toc a.is-active {
  background: var(--wp--preset--color--mint);
  border-left-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  font-weight: 500;
}

/* Policy body: comfortable measure, custom bullets. */
.terrago-policy h2 { margin-top: 3rem; }
.terrago-policy h2:first-child { margin-top: 0; }
.terrago-policy ul { list-style: none; padding-left: 0; }
.terrago-policy ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
}
.terrago-policy ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
  .terrago-toc { position: static; }
}

/* ------------------------------------------------------------- accordion -- */

.terrago-accordion details {
  border-top: 1px solid var(--wp--preset--color--border);
  padding: 1.25rem 0;
}
.terrago-accordion details:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.terrago-accordion summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
}
.terrago-accordion summary::-webkit-details-marker { display: none; }
/* The 01. / 02. counters down the left. */
.terrago-accordion { counter-reset: terrago-item; }
.terrago-accordion details { counter-increment: terrago-item; }
.terrago-accordion summary::before {
  content: counter(terrago-item, decimal-leading-zero) ".";
  flex: none;
  width: 2.5rem;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
}
.terrago-accordion summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--wp--preset--color--muted);
  border-bottom: 2px solid var(--wp--preset--color--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.terrago-accordion details[open] summary::after { transform: rotate(-135deg); }
.terrago-accordion details > *:not(summary) {
  margin: 0.75rem 0 0 2.5rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------- footer -- */

footer.wp-block-template-part .terrago-logo { color: var(--wp--preset--color--contrast); }
footer.wp-block-template-part a { color: var(--wp--preset--color--contrast); text-decoration: none; }
footer.wp-block-template-part a:hover { color: var(--wp--preset--color--accent); }
.terrago-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 1.5rem;
  margin-top: 3rem;
}
.terrago-footer-bottom a { text-decoration: underline; }

/* Contact rows in the footer: icon + text. */
.terrago-contactlist { list-style: none; margin: 0; padding: 0; }
.terrago-contactlist li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
/* Real SVG glyphs — these were Unicode dingbats (✉ ☎ ⌖), which rendered at the
   wrong weight and, for the map pin, as a crosshair. */
.terrago-ico { flex: none; width: 18px; height: 18px; margin-top: 0.15em; }

/* The contacts column needs room for the address to sit on one line. */
footer .terrago-contactlist li > span { min-width: 0; }

/* The TOC's active pill is the pale tint, not full-strength mint. */
.terrago-toc a.is-active { background: var(--wp--preset--color--mint-tint); }
.terrago-toc a { color: var(--wp--preset--color--muted); }
.terrago-toc a.is-active { color: var(--wp--preset--color--primary); }

/* Callout rule is navy in the design, not coral. */
.terrago-callout { border-left-color: var(--wp--preset--color--primary); }
.terrago-callout.is-style-quote { border-left-color: var(--wp--preset--color--primary); }

/* --------------------------------------------------------- journal (blog) -- */

/* Category filter row rendered as pill chips. */
.terrago-topics ul,
ul.wp-block-categories-list.terrago-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.terrago-topics li { margin: 0; }
.terrago-topics a {
  display: inline-block;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.terrago-topics a:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}

/* Post cards in the journal grid. */
.terrago-postgrid > li { display: flex; flex-direction: column; }
.terrago-postgrid .wp-block-post-featured-image img {
  border-radius: var(--terrago-radius);
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.terrago-postgrid .terrago-postmeta a {
  color: var(--wp--preset--color--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.terrago-postgrid .wp-block-post-title a { text-decoration: none; color: inherit; }
.terrago-postgrid .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
/* Push the byline to the bottom so cards in a row line up. */
.terrago-postbyline { margin-top: auto !important; padding-top: 1rem; }
.terrago-postbyline .wp-block-post-author-name { font-weight: 500; }

/* --- single post ------------------------------------------------------- */

/* Byline: author · read time · date, separated by dots. */
.terrago-byline { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.terrago-byline > * { margin: 0 !important; }
.terrago-byline > * + *::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--wp--preset--color--muted-soft);
}
.terrago-byline .wp-block-post-author-name { font-weight: 500; color: var(--wp--preset--color--base); }
.terrago-readtime:empty { display: none; }

/* Category line above the title. */
.terrago-postmeta a {
  color: var(--wp--preset--color--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
}

/* Article body: comfortable rhythm for long-form copy. */
.terrago-article > * + * { margin-top: 1.25rem; }
.terrago-article h2 { margin-top: 3rem; }
.terrago-article h2:first-child { margin-top: 0; }
.terrago-article h3 { margin-top: 2rem; }
.terrago-article p { line-height: 1.75; }
.terrago-article ul { padding-left: 1.1rem; }
.terrago-article li { margin-bottom: 0.4rem; line-height: 1.7; }
/* Headings need to clear the sticky header when jumped to from the rail. */
.terrago-article h2 { scroll-margin-top: 7rem; }

.terrago-article-aside { align-self: start; position: sticky; top: 7rem; }
@media (max-width: 781px) {
  .terrago-article-aside { position: static; }
}

/* Pagination */
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--accent); font-weight: 600; }

/* ------------------------------------------------------- contact form card -- */

/* Fluent Forms inside the mint card: white pill-ish inputs, no plugin chrome. */
.terrago-formcard .fluentform .ff-el-group { margin-bottom: 1.25rem; }
.terrago-formcard .fluentform .ff-el-input--label label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  color: var(--wp--preset--color--base);
  margin-bottom: 0.4rem;
}
.terrago-formcard .fluentform input[type="text"],
.terrago-formcard .fluentform input[type="email"],
.terrago-formcard .fluentform input[type="tel"],
.terrago-formcard .fluentform select,
.terrago-formcard .fluentform textarea {
  width: 100%;
  background: var(--wp--preset--color--contrast);
  border: 1px solid transparent;
  border-radius: var(--terrago-radius-sm);
  padding: 0.85rem 1rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--base);
  box-shadow: none;
}
.terrago-formcard .fluentform input::placeholder,
.terrago-formcard .fluentform textarea::placeholder {
  color: var(--wp--preset--color--muted-soft);
}
.terrago-formcard .fluentform input:focus-visible,
.terrago-formcard .fluentform select:focus-visible,
.terrago-formcard .fluentform textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 1px;
}
.terrago-formcard .fluentform textarea { min-height: 8rem; resize: vertical; }
/* Fluent Forms ships its own inline button colours, so these need !important. */
.terrago-formcard .fluentform .ff-btn-submit {
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--contrast) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.9rem 2rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
  cursor: pointer;
}
.terrago-formcard .fluentform .ff-btn-submit:hover {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}

/* --------------------------------------------------- WP Travel Engine tie-in -- */

/* Retreat (trip) cards from WP Travel Engine — soften to match the theme. */
.wp-travel-engine-trips .wpte-trip,
.wte_trips .wte-trip {
  border-radius: var(--terrago-radius);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
}

/* The booking sidebar on a single trip. WPTE's blocks ship their own inline
   styling (a #147dfe button, a heavy amber box-shadow), so these pull it back to
   the TerraGo palette. Inline styles on the button mean !important is unavoidable. */
.wpte-booking-inner-wrapper {
  background: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--terrago-radius);
  box-shadow: none !important;
  padding: 1.75rem 1.5rem;
}
.wpte-booking .wpte-bf-btn,
.wpte-booking .wte-book-now {
  width: 100%;
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--contrast) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.95rem 1.75rem !important;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
  cursor: pointer;
}
.wpte-booking .wpte-bf-btn:hover,
.wpte-booking .wte-book-now:hover {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
}
/* Price row: brand blue, display face. */
.wpte-booking .wpte-bf-price-wrap {
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--primary);
  margin-bottom: 1rem;
}
.wpte-booking del { color: var(--wp--preset--color--muted); font-weight: 400; }

/* The "Show Prices" toggle is a mobile-only affordance in WPTE's layout-1. */
.wpte_price-toggle-btn-mb {
  display: none;
  background: none;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-family: var(--wp--preset--font-family--body);
  cursor: pointer;
}
@media (max-width: 781px) {
  .wpte_price-toggle-btn-mb { display: inline-block; margin-bottom: 1rem; }
}

/* Trip facts / itinerary / inclusions in the left column. */
.wpte-trip-facts,
.wp-block-wptravelenginetripblocks-trip-facts { margin-bottom: 2rem; }