/*
Theme Name:   Andrew Burns Travel Co.
Theme URI:    https://andrewburnstravelco.com
Description:  Standalone theme for Andrew Burns Travel Co. (was a Divi child until 2026-10-19). Custom editorial templates, block-editor blog posts and client-editable fields.
Author:       Calibre Agency
Author URI:   https://calibreagency.co
Version:      0.1.0
Text Domain:  abt
*/

/* ---------------------------------------------------------------------------
   The design system lives in assets/css/main.css (enqueued in functions.php).
   This file holds only the WordPress-specific glue: rules needed because
   wp_nav_menu() outputs <ul><li><a> where the static mockups had bare <a>.
   --------------------------------------------------------------------------- */

/* Header menus: keep the mockup's flex row despite WP's ul/li markup */
.nav .nav-left ul,
.nav .nav-right ul{
  display:flex;
  align-items:center;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav .nav-left li,
.nav .nav-right li{margin:0;padding:0}

/* Divi resets we need to neutralise inside our own templates */
#page-container{padding-top:0 !important;margin-top:0 !important}
#main-content{background:transparent}
.abt-page ul{list-style:none}

/* ---------------------------------------------------------------------------
   Divi's customizer emits this INLINE, after every enqueued stylesheet:

     body{color:#191919}
     h1,h2,h3,h4,h5,h6{color:#191919; font-family:'Marcellus',…}
     a{color:#c77a63}
     body,input,textarea,select{font-family:'Nunito Sans',…}

   Same specificity as main.css's `body{}` / `h1,h2,h3{}` / bare links, but later
   in the head, so Divi wins: the design system rendered in the live site's fonts
   and Divi's terracotta accent instead of Cormorant Garamond + Jost + monochrome.
   Load order cannot fix this — the inline block is always last — so the rules
   below win on specificity: `.abt-page` (0,1,x) beats Divi's (0,0,x).

   `.abt-page` is only on pages this theme templates (see abt_templates_this_page),
   so Divi-built pages and the blog are untouched. Divi's own modules carry far
   higher specificity (e.g. `.et_pb_menu_0_tb_header.et_pb_menu ul li a`), so
   they're unaffected too.

   ORDER MATTERS BELOW: the generic rules come first, the dark-section overrides
   second. They're the same specificity, so the later ones must be the exceptions.
   --------------------------------------------------------------------------- */

/* Typography — the design system's base h1, h2 AND h3 are all serif (Cormorant).
   Divi's customizer forces h1..h6 to Marcellus inline, so re-assert serif here.
   The ONLY sans heading in the whole design is `.value h3` (the about-page value
   labels — main.css:54), re-declared at higher specificity right after.
   (Earlier this rule wrongly set all h3 to sans, which turned every card / tile /
   way / region / highlight heading into Jost.) */
body.abt-page,
body.abt-page input,
body.abt-page textarea,
body.abt-page select,
body.abt-page button{font-family:var(--sans)}
.abt-page h1,
.abt-page h2,
.abt-page h3{font-family:var(--serif)}
.abt-page .value h3{font-family:var(--sans)}
/* h4–h6 are NOT serif in the design (only h1–h3 are); they default to the body
   sans — e.g. the footer column labels (footer h4, 12px uppercase). Divi forces
   them to Marcellus, so re-assert sans. */
.abt-page h4,
.abt-page h5,
.abt-page h6{font-family:var(--sans)}

/* Colour — `body{color:#191919}` is the root of it: everything that inherits its
   colour (card links, region links, tabs, FAQ questions) drifted off-black. */
body.abt-page{color:var(--ink)}

/* Headings take their colour by INHERITANCE in this design — a section sets the
   colour (`.hero{color:#fff}`, `.phero{color:#fff}`, body = --ink) and its headings
   follow. Divi's customizer breaks that by colouring `h1..h6` explicitly (#191919),
   which overrides inheritance.
   Restoring `inherit` re-establishes the design's model in one rule: headings on
   light sections resolve to --ink, headings on dark sections resolve to their
   section's white. Same low-specificity trick as the link rule below — (0,0,2)
   beats Divi's (0,0,1) but loses to every design rule, e.g. `.news h2{#fff}`.

   This replaced a blanket `.abt-page h1,h2,h3{color:var(--ink)}` plus a
   hand-maintained list of dark sections. That list could never be complete: it
   silently blacked out the newsletter heading (`.news`) and the Plan Your Trip
   hero (`.phero`) because they weren't on it. Don't reintroduce a blanket here. */
body h1,
body h2,
body h3{color:inherit}

/* Links. The design system's model is `a{color:inherit}` (main.css:13) — every
   link takes its colour from its section, which is what keeps the palette
   monochrome. Divi's customizer overrides that with `a{color:#c77a63}` inline at
   the same specificity, so its terracotta leaked into EVERY link: the header nav,
   the utility bar, breadcrumbs, card links, the footer.

   Specificity is deliberately kept as LOW as possible. `body a` is (0,0,2) — just
   enough to beat Divi's (0,0,1), while losing to every class-based rule the design
   system already has: `.btn` / `.btn--solid` (0,1,0), `.testi .rsrc` (0,2,0),
   `footer.site ul a` (0,1,3), `.nav a.link.active` (0,3,1). A higher selector here
   (e.g. `.abt-page a`) silently swallows all of those — it turned the black
   "Plan Your Trip" button's white label black. Don't raise it.

   Unscoped on purpose: header.php/footer.php render on every page including the
   Divi-templated blog, which carries no `.abt-page` class. */
body a{color:inherit}
.abt-page .crumb a:hover,
.abt-page .regions a:hover{color:var(--ink)}

/* Divi decorates every blockquote with a 5px teal left border and a 20px indent.
   The design's testimonial quote is a centred pull-quote with no rule and no
   indent, so strip both. */
.abt-page blockquote,
blockquote{
  border:0;
  padding-left:0;
  padding-right:0;
}

/* ---------------------------------------------------------------------------
   Flodesk newsletter — restyled to the mockup.

   Unlike the TravelJoy enquiry form (a cross-origin iframe we cannot touch),
   Flodesk's universal embed injects its markup straight into OUR DOM, so it is
   fully stylable. Out of the box it ships Helvetica, white input fills and #ddd
   borders, which looks pasted-on against the dark `.news` band.

   Targets the GENERIC `.fd-*` classes, not the form-id ones
   (`.ff-67e45a29...__control`): the id changes if Andrew rebuilds the form in
   Flodesk, and these generic hooks are stable across their forms.

   Specificity: Flodesk injects its own <link>/<style> at RUNTIME, so its CSS
   lands after ours in document order — scoping to `.news` (0,2,0) beats their
   (0,1,0) class rules regardless of order. `!important` is used only where
   Flodesk sets values from its own visual editor, which it emits inline.
   --------------------------------------------------------------------------- */

/* Dark-band Flodesk skin — applies to BOTH dark opt-in wrappers so the site-wide
   footer strip (.abt-optin-strip, background:#000) matches the homepage/itineraries
   .news band exactly (CAL-269 rev 2026-08-16 round 2 — reviewer: "update on all
   other placements (page footers + subscribe button)"). This block sets CONTEXT
   COLOUR only; the type scale is owned once in inc/flodesk-embed.php so every state
   and placement stays consistent. :is() keeps the specificity at (0,2,0) — the same
   as the old `.news .fd-*` rules — so it still beats Flodesk's runtime (0,1,0) CSS. */

/* Flodesk repeats a title/subtitle inside the form; the section already has its
   own h2 + intro copy, so hide them rather than show the message twice. */
:is(.news,.abt-optin-strip) .fd-form-title,
:is(.news,.abt-optin-strip) [class*="__title"],
:is(.news,.abt-optin-strip) [class*="__subtitle"]{display:none !important}

/* Flodesk paints its form root with an opaque white background
   (`[data-ff-el="root"]{background:#fff}`); the transparent-container rule below
   only clears the inner __container, so on a dark band the form otherwise sits in a
   pasted-on white box that fights the white-text styling here. Clear the root too so
   the form renders directly on the dark band as intended.
   (CAL-269 rev 2026-08-16 — confirmed on Local now that the SDK paints there.) */
:is(.news,.abt-optin-strip) [data-ff-el="root"]{background:transparent !important}

/* The interests block ("Choose Your Next Destination") keeps its own heading —
   Flodesk colours it #333, near-invisible on the dark band. Force white so it
   reads like the section's other headings. (CAL-269 rev 2026-08-16.) */
:is(.news,.abt-optin-strip) [class*="__preference-title"]{color:#fff !important}

/* The interest radios are a black-ring SVG (invisible on the dark band) — swap to
   a white ring, and a white dot when checked. (CAL-269 rev 2026-08-16.) */
:is(.news,.abt-optin-strip) .fd-form-check__checkmark{background-image:url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='white' fill-rule='evenodd' clip-rule='evenodd' d='M1.2 9C1.2 13.3078 4.69218 16.8 9 16.8C13.3078 16.8 16.8 13.3078 16.8 9C16.8 4.69218 13.3078 1.2 9 1.2C4.69218 1.2 1.2 4.69218 1.2 9ZM9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0Z'/%3e%3c/svg%3e") !important}
:is(.news,.abt-optin-strip) .fd-form-check__checkmark::after{background-image:url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='white' d='M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z'/%3e%3c/svg%3e") !important}

:is(.news,.abt-optin-strip) .fd-form-content,
:is(.news,.abt-optin-strip) [class*="__container"]{background:transparent !important;padding:0 !important;box-shadow:none !important}

/* Inputs — match `.news input` in the design system: transparent on the dark
   band, hairline white border, white text. (Size owned by flodesk-embed.php.) */
:is(.news,.abt-optin-strip) .fd-form-control{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:0 !important;
  color:#fff !important;
  padding:14px 16px !important;
  box-shadow:none !important;
}
:is(.news,.abt-optin-strip) .fd-form-control::placeholder{color:#A0A0A0 !important}
:is(.news,.abt-optin-strip) .fd-form-control:focus{border-color:rgba(255,255,255,.6) !important;outline:none !important}

/* Floating labels sit over the inputs — keep them legible on black. */
:is(.news,.abt-optin-strip) .fd-form-label{color:#A0A0A0 !important;font-family:var(--sans) !important}

/* Consent / interest checkboxes and any helper copy. */
:is(.news,.abt-optin-strip) .fd-form-check,
:is(.news,.abt-optin-strip) .fd-form-check__label,
:is(.news,.abt-optin-strip) .fd-form-description{color:#C0C0C0 !important;font-family:var(--sans) !important}

/* Submit — the design system's dark-background button (`.btn--light`):
   transparent with a white hairline, inverting to solid white on hover.
   Flodesk's default is a black fill, which disappears on this black band. */
:is(.news,.abt-optin-strip) .fd-btn{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.6) !important;
  border-radius:0 !important;
  color:#fff !important;
  font-family:var(--sans) !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  padding:16px 30px !important;
  transition:.3s !important;
}
:is(.news,.abt-optin-strip) .fd-btn:hover{background:#fff !important;color:var(--ink) !important;border-color:#fff !important}

/* Success / error messaging after submit. The success block is Flodesk's
   `.fd-form-success` / `__success-message` (NOT the mis-named `.fd-form-successMessage`
   the old rule targeted, which never matched — hence the reported black-on-black
   "Thank you for subscribing!" on the dark band). Force white so the confirmation +
   any error stay legible; size is inherited from flodesk-embed.php. */
:is(.news,.abt-optin-strip) .fd-form-success,
:is(.news,.abt-optin-strip) [class*="__success-message"],
:is(.news,.abt-optin-strip) .fd-form-error,
:is(.news,.abt-optin-strip) [class*="__error"]{color:#fff !important;font-family:var(--sans) !important}

/* Native fallback opt-in (inc/flodesk-embed.php, fallback=true) — shown only when
   Flodesk's script never paints the container (e.g. WP Local's un-whitelisted
   `.local` domain, or blocked JS). It reuses the design-system `.news .f` /
   `.news input` / `.btn--light` styles, so it matches the live Flodesk skin and
   stacks cleanly on mobile via `.news .f`'s flex-wrap. `[hidden]` keeps it out of
   the layout until the JS reveals it, so the live page never shows two forms. */
.fd-fallback[hidden]{display:none}
.news .fd-fallback{margin-top:4px}
.news .fd-fallback .btn{white-space:nowrap}
.news .abt-fd-msg{font-size:14px;margin-top:12px;line-height:1.5}
.news .abt-fd-msg.abt-fd-ok{color:#fff}
.news .abt-fd-msg.abt-fd-err{color:#ff6b6b}
/* Accessible label for the fallback email field (theme has no wp core sr class). */
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Dark sections — these are the exceptions to the rules above, so they must come
   after them. Divi's explicit heading colour beats our inherited `.hero{color:#fff}`,
   which rendered headings near-black on dark backgrounds. */
.hero h1, .hero h2, .hero h3,
.cta h1, .cta h2, .cta h3,
.imgbreak h1, .imgbreak h2, .imgbreak h3,
.news h2,
footer.site h4{
  color:#fff;
}

/* Same problem for body copy Divi colours explicitly. */
.hero p{color:#E8E8E8}
.cta p{color:#C0C0C0}
/* Kicker defaults to var(--accent) (black) — invisible on the dark .cta band. */
.cta .kicker{color:#DEDEDE}
.imgbreak p{color:#fff}
footer.site ul a{color:#BEBEBE}
footer.site ul a:hover{color:#fff}

/* CAL-25: Instagram feed (Smash Balloon "Instagram Feed Pro", #feed section).
   The plugin's default layout lets portrait/landscape posts set their own height,
   which breaks the row rhythm and leaves the grid looking uneven. Force every tile
   to a 1:1 square and cover-crop the media so the grid stays even at any post ratio.
   Scoped to .abt-page so it beats Divi without touching other themes/pages. */
.abt-page #sb_instagram #sbi_images .sbi_item,
.abt-page #sb_instagram .sbi_photo_wrap{aspect-ratio:1/1;overflow:hidden;height:auto}
.abt-page #sb_instagram #sbi_images .sbi_item .sbi_photo,
.abt-page #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap,
.abt-page #sb_instagram #sbi_images .sbi_item img,
.abt-page #sb_instagram #sbi_images .sbi_item .sbi_img{
  width:100% !important;height:100% !important;object-fit:cover !important;
}

/* ---------------------------------------------------------------------------
   Divi parity (Divi removal, 2026-10-15).

   Until Divi goes, its base stylesheet and Customizer CSS load on EVERY page (the
   CAL-461 dequeue strips the addon payload, not these), and the approved look was
   reviewed with them on. These bare-element rules reproduce the ones that actually
   change computed styles, so removing Divi leaves every page as it is today.
   Measured: output/abt-divi-removal-plan_2026-10-15.md §3 (page heights identical
   on 10 of 11 sample pages; the 11th is a Divi-built post that becomes blocks).

   - p / h1-h6 / blockquote spacing = Divi's parent style.css.
   - h1-h3 weight 400: Divi's Customizer asks for 100 (heading_font_weight), but the
     lightest Cormorant Garamond we load is 400, so 400 is what has always rendered.
     It must sit HERE, after main.css's `h1,h2,h3{font-weight:500}`, to win that tie
     the way the Customizer CSS did. Don't "correct" it to 500 without a design call:
     every serif heading on the site gets visibly heavier.
   While Divi is still the parent these duplicate Divi's own rules: no visible change.
   --------------------------------------------------------------------------- */
p{padding-bottom:1em}
p:not(.has-background):last-of-type{padding-bottom:0}
h1,h2,h3,h4,h5,h6{padding-bottom:10px}
h4,h5,h6{line-height:1em}
h1,h2,h3{font-weight:400}
blockquote{margin:20px 0 30px}