/*
Theme Name: Gulf Light
Theme URI: https://palmerhomesswfl.com
Author: Stabach & Goetz Productions
Description: Regional-magazine editorial theme for David Palmer, Florida Real Estate Sales Associate. Original ink illustrations in place of photography. Ported from the static "Gulf Light Illustrated" design selected 2026-07-31.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary - client work product
Text Domain: gulflight
*/

/* ============================================================
   DAVID PALMER — SELECTED DESIGN ("Gulf Light Illustrated")
   Chosen 2026-07-31. Regional-magazine editorial chassis carrying
   original ink illustrations and a schematic map in place of
   every photographic slot.

   Why: Direction 2 was the only direction that depended on
   licensed photography, and no licensable SWFL imagery exists
   (searches return Gold Coast AU, Sarasota, Miami, Ian damage).
   The illustrations remove that dependency without asking the
   site to misrepresent a location.

   Design prototype for David Palmer, FL Real Estate Sales Associate.
   ============================================================ */

:root {
  --shell:    #F6F8F9;   /* cool sea-glass white — page ground */
  --sand:     #EDEBE5;   /* warm band, used only as a section field */
  --paper:    #FFFFFF;
  --deep:     #12212B;   /* charcoal-navy */
  --deep-soft:#41565F;
  --deep-fnt: #788B93;
  --navy:     #1F4E6B;
  --teal:     #0E8C8C;   /* the one bold spend */
  --rule:     #C9D3D6;
  --rule-fnt: #E1E7E9;
  --focus:    #0E8C8C;

  --display: "Sitka Banner", "Sitka Display", Sitka, Constantia, "Iowan Old Style", Charter, "Palatino Linotype", Palatino, Georgia, serif;
  --body:    Candara, "Gill Sans MT", "Gill Sans", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --mono:    Consolas, "SF Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shell:#0E181E; --sand:#17222A; --paper:#131F26; --deep:#E7EEF0;
    --deep-soft:#A6B7BE; --deep-fnt:#72858D; --navy:#6FA8C8; --teal:#2FB5B0;
    --rule:#26363E; --rule-fnt:#1A272E; --focus:#2FB5B0;
  }
}
:root[data-theme="dark"] {
  --shell:#0E181E; --sand:#17222A; --paper:#131F26; --deep:#E7EEF0;
  --deep-soft:#A6B7BE; --deep-fnt:#72858D; --navy:#6FA8C8; --teal:#2FB5B0;
  --rule:#26363E; --rule-fnt:#1A272E; --focus:#2FB5B0;
}
:root[data-theme="light"] {
  --shell:#F6F8F9; --sand:#EDEBE5; --paper:#FFFFFF; --deep:#12212B;
  --deep-soft:#41565F; --deep-fnt:#788B93; --navy:#1F4E6B; --teal:#0E8C8C;
  --rule:#C9D3D6; --rule-fnt:#E1E7E9; --focus:#0E8C8C;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--deep);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
:where(a) { color: inherit; }
:where(img, svg) { max-width: 100%; display: block; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); margin: 0;
}
.caption {
  font-family: var(--body); font-size: 0.8125rem; line-height: 1.5;
  color: var(--deep-fnt); font-style: italic;
}

/* ============================ MASTHEAD ============================ */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem var(--gutter) 1rem;
}
.masthead__top {
  display: flex; align-items: flex-end; gap: 2rem;
  max-width: 84rem; margin: 0 auto;
}
.logo { text-decoration: none; margin-right: auto; display: grid; gap: 0.15rem; }
.logo b {
  font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 600; letter-spacing: -0.005em; line-height: 1;
}
.logo span {
  font-size: 0.6875rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--deep-fnt); font-weight: 600;
}
.masthead__meta { text-align: right; display: grid; gap: 0.15rem; }
.masthead__meta span { font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep-fnt); }
@media (max-width: 46rem) { .masthead__meta { display: none; } }

.nav {
  max-width: 84rem; margin: 1.1rem auto 0;
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  padding-top: 0.9rem; border-top: 1px solid var(--rule-fnt);
}
.nav a {
  text-decoration: none; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--deep-soft);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--deep); border-bottom-color: var(--teal); }
.nav .spacer { margin-left: auto; }
.nav .social { display: flex; gap: 0.85rem; }
.nav .social a { border: none; padding: 0; }
.nav .social svg { width: 1rem; height: 1rem; fill: currentColor; }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center;
  font-family: var(--body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 1.6rem; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--deep); background: none; color: var(--deep);
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--deep); color: var(--shell); }
.btn--teal { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.btn--teal:hover { background: var(--deep); border-color: var(--deep); color: var(--shell); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ============================ ILLUSTRATION PLATES ============================
   The plates that used to stand in for photography. The ink in these SVGs is
   traced and baked (#101676) — it cannot inherit currentColor without collapsing
   to a silhouette — so the card keeps a fixed white ground in BOTH themes and is
   framed rather than tinted. Reads as a tipped-in printed plate, which is exactly
   what a regional magazine would do with a commissioned drawing.
   Nothing here claims to depict a specific property, street, or listing. */
.sketch {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  padding: 0.9rem;
  display: grid; gap: 0; align-content: start;
}
.sketch img { width: 100%; height: auto; }
.sketch figcaption {
  font-size: 0.75rem; font-style: italic; line-height: 1.45;
  color: #78878F;
  margin-top: 0.85rem; padding-top: 0.75rem;
  border-top: 1px solid #E4E8EA;
}
/* never let the grid stretch the card — the caption must sit under the drawing,
   not float at the bottom of a tall empty box */
.sketch--hero { align-self: center; }

/* ============================ HERO ============================ */
.hero {
  max-width: 84rem; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 7vw, 6rem);
  /* type gets more of the row than in Direction 2 — it no longer borrows width by
     crossing the plate, so it has to be given the room outright or the h1 wraps to
     four lines */
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 60rem) { .hero { grid-template-columns: 1fr; } }

/* Direction 2 ran the display type across the edge of the photographic plate.
   That move is dropped here: the illustration card is a fixed white ground, so
   in dark mode the light headline would cross it and disappear. Type and plate
   sit side by side instead. */
@media (min-width: 60rem) {
  .hero { grid-template-areas: "type plate"; }
  .hero__type { grid-area: type; }
  .hero__plate { grid-area: plate; }
}
.hero h1 {
  font-size: clamp(2.5rem, 1rem + 6.2vw, 5.75rem);
  line-height: 1.0; letter-spacing: -0.02em;
  margin: 0.9rem 0 1.5rem; max-width: 20ch;
}
.hero h1 em {
  font-style: italic; color: var(--teal);
}
.hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.6; color: var(--deep-soft);
  max-width: 40ch; margin: 0 0 2rem;
}

/* ============================ SECTIONS ============================ */
.band { padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); }
.band--sand { background: var(--sand); }
.band--paper { background: var(--paper); }
.wrap { max-width: 84rem; margin: 0 auto; }
.wrap--narrow { max-width: 60rem; margin: 0 auto; }

h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.015em; max-width: 26ch; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.2rem; color: var(--deep-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose p.lead { font-size: 1.1875rem; color: var(--deep); }

/* an opening statement, set as a magazine standfirst */
.standfirst { max-width: 46rem; }
.standfirst p {
  font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + 0.85vw, 1.85rem);
  line-height: 1.4; color: var(--deep); margin: 1rem 0 0;
}

/* facing spreads for buy / sell */
.spread {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.spread__col { display: grid; gap: 1.4rem; align-content: start; }
.spread h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; }
.runlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.runlist li {
  padding: 0.7rem 0 0.7rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--rule-fnt); color: var(--deep-soft); font-size: 0.9375rem;
}
.runlist li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 0.5rem; height: 1px; background: var(--teal);
}

/* pull quote */
.pull {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding-top: 1.75rem; border-top: 3px solid var(--deep);
  max-width: 44rem;
}
.pull p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  line-height: 1.32; margin: 0; letter-spacing: -0.01em;
}
.pull cite { display: block; margin-top: 1rem; font-family: var(--body); font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--deep-fnt); }

/* four principles */
.principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem); margin-top: 3rem;
}
.principles > div { display: grid; gap: 0.6rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--deep); }
.principles h3 { font-size: 1.3125rem; line-height: 1.2; }
.principles p { margin: 0; font-size: 0.9375rem; color: var(--deep-soft); }

/* ---- Schematic map (from Direction 3, retoned to Gulf Light) ----
   Replaces seven per-community photo slots. Those slots could only ever have
   been filled with imagery captioned as a place it wasn't — the exact
   misrepresentation this project rules out. A drawn map states its own
   abstraction and carries more information per square inch anyway. */
.mapwrap {
  border: 1px solid var(--rule); background: var(--paper);
  padding: clamp(1rem, 2.5vw, 1.75rem); margin-top: 2.5rem;
  /* capped: the band runs to 84rem, and letting a 620-unit viewBox fill that
     blows the 9px map labels up past body-copy size */
  max-width: 46rem;
}
.mapwrap svg { width: 100%; height: auto; }
.map-coast { fill: none; stroke: var(--navy); stroke-width: 2; }
.map-land { fill: color-mix(in srgb, var(--teal) 7%, transparent); stroke: var(--rule); stroke-width: 1; }
.map-pin { fill: var(--teal); }
.map-lead { stroke: var(--teal); stroke-width: 1; stroke-dasharray: 3 2; }
.map-txt {
  font-family: var(--body); font-size: 9px; font-weight: 600;
  letter-spacing: 0.09em; fill: var(--deep); text-transform: uppercase;
}
.map-sub { font-family: var(--body); font-size: 7.5px; fill: var(--deep-fnt); }

/* communities — typographic cards under the map */
.commlist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.commlist article { display: grid; gap: 0.5rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--deep); }
.commlist h3 { font-size: 1.25rem; line-height: 1.2; }
.commlist p { margin: 0; font-size: 0.9375rem; color: var(--deep-soft); line-height: 1.55; }
.commlist .tag {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal);
}

/* about */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
@media (max-width: 54rem) { .about { grid-template-columns: 1fr; } }

/* reserved slots */
.reserved {
  border: 1px solid var(--rule); border-left: 3px solid var(--teal);
  padding: 1.1rem 1.25rem; display: grid; gap: 0.3rem; background: var(--shell);
}
.reserved b { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--teal); }
.reserved small { font-size: 0.8125rem; color: var(--deep-soft); line-height: 1.5; }

/* ============================ FORM ============================ */
.form { display: grid; gap: 1.15rem; max-width: 42rem; }
.field { display: grid; gap: 0.4rem; }
.field > label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--deep-soft); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--deep);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.75rem 0.85rem; width: 100%;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 40rem) { .pair { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 0.65rem; align-items: flex-start; }
.consent input { width: 1.05rem; height: 1.05rem; margin-top: 0.35rem; flex: none; accent-color: var(--teal); }
.consent label { font-size: 0.8125rem; color: var(--deep-soft); line-height: 1.5; }

/* ============================ COLOPHON ============================ */
.colophon { background: var(--deep); color: var(--shell); padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 2rem; }
:root[data-theme="dark"] .colophon { background: #060E12; }
@media (prefers-color-scheme: dark) { .colophon { background: #060E12; } }
:root[data-theme="light"] .colophon { background: #12212B; color: #F6F8F9; }
.colophon__grid { max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; }
.colophon h3 { font-family: var(--body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; opacity: .6; margin-bottom: 0.8rem; }
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.colophon a { font-size: 0.9375rem; text-decoration: none; opacity: .9; }
.colophon a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.colophon__legal { max-width: 84rem; margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(246,248,249,.18); }
.colophon__legal p { font-size: 0.8125rem; line-height: 1.6; opacity: .72; margin: 0 0 0.7rem; max-width: 74ch; }
.colophon__name { font-family: var(--display); font-size: 1.125rem; margin-bottom: 0.5rem; opacity: 1; }

/* mobile sticky */
.callbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: none; grid-template-columns: 1fr 1fr; }
.callbar a { padding: 0.95rem; text-align: center; text-decoration: none; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; background: var(--deep); color: var(--shell); }
.callbar a + a { background: var(--teal); color: #fff; }
@media (max-width: 48rem) { .callbar { display: grid; } body { padding-bottom: 3.4rem; } }

.protobar {
  background: var(--teal); color: #fff; padding: 0.5rem var(--gutter);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
}

/* Scroll reveal — the only motion device.
   Gated behind .js-anim so content is never hidden without JS to restore it. */
.js-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; }
}

/* ===========================================================================
   ADDITIONS FOR THE WORDPRESS PORT (2026-09-20)
   Everything above this line is the original static stylesheet, unchanged.
   Only genuinely new components live below: the form status banner and the
   honeypot. Both follow the existing tokens so light and dark keep working.
   =========================================================================== */

:root {
  --warn:     #9A3B2F;
  --warn-bg:  #F7EBE8;
}
@media (prefers-color-scheme: dark) {
  :root { --warn: #E79A8C; --warn-bg: #2A1815; }
}
:root[data-theme="dark"] { --warn: #E79A8C; --warn-bg: #2A1815; }
:root[data-theme="light"] { --warn: #9A3B2F; --warn-bg: #F7EBE8; }

/* Status banner shown after a form submission redirects back. */
.formnote {
  margin: 0 0 1.75rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--teal);
  background: var(--sand);
  font-size: 0.9375rem;
  line-height: 1.6;
  border-radius: 2px;
}
.formnote--bad {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

/* Honeypot. Must be reachable by a bot parsing the DOM but invisible and
   unfocusable for anyone real - so it is moved offscreen rather than
   display:none, which some bots check for. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The lead form posts back to the same page, so give the anchor target room to
   breathe under the sticky masthead when it scrolls to the status banner. */
.band[id],
section[id] { scroll-margin-top: 1.5rem; }