/* ---------- Theme tokens ----------
   Palette source: src/palette.scss (Coolors: pale-slate, white, taupe-grey, cerulean, charcoal-blue)
   Default = "harbor" (Harbor Blue Wash background), chosen 2026-08-02.
   Sky and Dusk remain available via the theme switcher in js/app.js for further comparison.
------------------------------------ */
:root{
  --max:1440px; --pad:1rem;

  /* harbor — blue wash (default) */
  --bg: #EDF1F5;
  --surface: #ffffff;
  --fg: #274156;
  --muted: #605856;
  --accent: #1c6e8c;
  --accent-ink: #ffffff;
  --stroke: #e7e4e7;
  --stroke-2: #d0ccd0;
  --header-bg: #274156;
  --header-fg: #d0ccd0;
  --header-surface: #32506a;
  --footer-bg: #274156;
  --footer-fg: #d0ccd0;
  --card-grad-start: #ffffff;
  --card-grad-end: #f4f2f4;
  --shadow-tint: 15, 26, 35;
}

:root[data-theme="harbor"] {
  --bg: #EDF1F5;
  --surface: #ffffff;
  --fg: #274156;
  --muted: #605856;
  --accent: #1c6e8c;
  --accent-ink: #ffffff;
  --stroke: #e7e4e7;
  --stroke-2: #d0ccd0;
  --header-bg: #274156;
  --header-fg: #d0ccd0;
  --header-surface: #32506a;
  --footer-bg: #274156;
  --footer-fg: #d0ccd0;
  --card-grad-start: #ffffff;
  --card-grad-end: #f4f2f4;
  --shadow-tint: 15, 26, 35;
}

:root[data-theme="sky"] {
  --bg: #fbfcff;
  --surface: #ffffff;
  --fg: #274156;
  --muted: #605856;
  --accent: #1c6e8c;
  --accent-ink: #ffffff;
  --stroke: #e7e4e7;
  --stroke-2: #d0ccd0;
  --header-bg: #fbfcff;
  --header-fg: #605856;
  --header-surface: #ffffff;
  --footer-bg: #f4f2f4;
  --footer-fg: #605856;
  --card-grad-start: #ffffff;
  --card-grad-end: #f6f4f6;
  --shadow-tint: 39, 65, 86;
}

:root[data-theme="dusk"] {
  --bg: #f3f1f3;
  --surface: #ffffff;
  --fg: #274156;
  --muted: #605856;
  --accent: #1c6e8c;
  --accent-ink: #ffffff;
  --stroke: #ddd9dd;
  --stroke-2: #c9c4c9;
  --header-bg: #ffffff;
  --header-fg: #605856;
  --header-surface: #f3f1f3;
  --footer-bg: #ebe7eb;
  --footer-fg: #605856;
  --card-grad-start: #ffffff;
  --card-grad-end: #f0eef0;
  --shadow-tint: 39, 65, 86;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;font-family:OpenDyslexic,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif}
html,body{height:100%;min-height:100svh}

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  display: flex;
  flex-direction: column
}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:var(--pad)}
.muted{color:var(--muted);font-size:.95rem}

/* ---------- Header / Nav ---------- */
header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--stroke);
  position: sticky;
  top: 0;
  z-index: 1000
}
header .wrap{max-width:100%;padding:0 var(--pad);position:relative}
.row{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:56px}
#primary-nav{display:flex;align-items:center;gap:1rem;white-space:nowrap;flex-wrap:nowrap;width:100%;justify-content:flex-start}
#primary-nav .brand-link{display:inline-flex;align-items:center;gap:.55rem}

#primary-nav .brand-logo {
  height: calc(1lh + 1rem);
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(var(--shadow-tint), .25))
}
#primary-nav .brand-link::after{content:"";display:block;height:3px;margin-top:.25rem;border-radius:999px;background:var(--accent);opacity:.9}

#primary-nav .nav-links {
  display: flex;
  gap: 1rem;
  align-items: stretch
}

#primary-nav .nav-links a {
  color: var(--header-fg);
  padding: .5rem .75rem;
  border-radius: .5rem;
  text-align: center
}

#primary-nav .nav-links a:hover, #primary-nav .nav-links a.active {
  background: var(--accent);
  color: var(--accent-ink)
}

#primary-nav .nav-cta {
  margin-left: auto;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: .5rem .75rem;
  border-radius: .5rem;
  text-align: center;
  font-weight: 600
}

#primary-nav .nav-cta:hover {
  background: var(--accent-ink);
  color: var(--accent);
}

/* Condense logic (unchanged) */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:transparent;border:1px solid var(--accent);width:44px;height:38px;padding:6px;border-radius:.5rem;margin-right:.75rem}

.nav-toggle .bar {
  width: 24px;
  height: 2px;
  background: var(--header-fg);
  border-radius: 2px
}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header.measuring #primary-nav{width:max-content;justify-content:flex-start}
header.measuring #primary-nav .nav-links{gap:2rem}
header.measuring #primary-nav .nav-links a{flex:0 0 auto}
header.measuring .nav-toggle{display:none!important}
header.nav-condense .nav-toggle{display:inline-flex}
header.nav-condense #primary-nav .nav-links{display:none!important}
header.nav-condense.nav-open #primary-nav .nav-links{
  display:flex!important;flex-direction:column;gap:.25rem;position:absolute;left:0;right:0;top:100%;
  background: var(--header-bg);
  padding: .5rem 0 .75rem;
  border-top: 1px solid var(--stroke)
}
header.nav-condense.nav-open #primary-nav .nav-links a{
  display: block;
  padding: .65rem .75rem;
  border-radius: .5rem;
  background: var(--header-surface);
  border: 1px solid var(--stroke-2);
  color: var(--header-fg);
  flex: 1 0 auto
}
@media (min-width:721px){.row{justify-content:center} .nav-toggle{display:none} header.nav-condense .nav-toggle{display:inline-flex}}
@media (max-width:720px){#primary-nav .brand-logo{height:40px;max-width:70vw}}

/* ---------- Main ---------- */
main{flex:1 0 auto;max-width:var(--max);margin:0 auto;padding:2rem 1rem 3rem}

/* ---------- Hero (index) ---------- */
.hero {
  display: grid;
  gap: 1rem;
  text-align: center;
  padding: 2rem 1rem 1rem;
  justify-items: center
}
.hero h1{margin:0;font-size:clamp(2rem,3vw + 1rem,3rem)}
.hero p{color:var(--muted);margin:.25rem auto 0;max-width:60ch}

.hero-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem
}

/* ---------- Section intro / rates table (services, blog) ---------- */
.section-intro {
  max-width: 62ch
}

.rates {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0
}

.rates caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: .5rem
}

.rates th, .rates td {
  text-align: left;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--stroke-2);
  vertical-align: top
}

.rates thead th {
  font-weight: 600;
  border-bottom-width: 2px
}

.rates td:last-child, .rates th:last-child {
  white-space: nowrap
}

.rates-note {
  color: var(--muted);
  font-size: .95em;
  max-width: 70ch
}

.services-cta {
  margin-top: 1.5rem
}

/* ---------- Generic grids (index) ---------- */
.grid,.announcements{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-top:2rem}
@media (max-width:900px){.grid,.announcements{grid-template-columns:1fr}}

/* ---------- Cards (shared) ---------- */
.card{
  position:relative;overflow:hidden;min-height:160px;padding:1rem;border:1px solid var(--stroke-2);border-radius:.9rem;
  background: linear-gradient(180deg, var(--card-grad-start), var(--card-grad-end));
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 20px rgba(var(--shadow-tint), .08), 0 4px 10px rgba(var(--shadow-tint), .06);
  transition:transform .35s ease,box-shadow .35s ease,filter .35s ease;transform-style:preserve-3d
}

.card:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(2deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 16px 30px rgba(var(--shadow-tint), .12), 0 6px 14px rgba(var(--shadow-tint), .08);
  filter: saturate(1.05)
}
.card-title{margin:.25rem 0 .5rem;font-size:1.1rem;text-align:center}
.card-body{margin:0 0 .75rem;color:var(--muted)}
.card-link{font-weight:600}

.grid .card {
  min-height: 200px
}

/* ---------- Blocks ---------- */
.tile, .post, .project, .role {
  background: var(--surface);
  border: 1px solid var(--stroke-2);
  border-radius: .8rem;
  padding: 1rem
}
.post,.project,.role{margin:.75rem 0}

/* ---------- Forms (global defaults kept for index) ---------- */
form{display:grid;gap:.75rem;max-width:700px}

input, textarea {
  width: 100%;
  padding: .75rem;
  border-radius: .5rem;
  border: 1px solid var(--stroke-2);
  background: var(--surface);
  color: var(--fg)
}

button {
  padding: .75rem 1rem;
  border: 0;
  border-radius: .5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--stroke);
  background: var(--footer-bg);
  margin-top: auto;
  text-align: center
}
footer .wrap{max-width:var(--max);padding:1rem}
footer .links{display:flex;flex-wrap:wrap;gap:.75rem 1rem;justify-content:center}

footer a {
  color: var(--footer-fg)
}

footer a:hover {
  color: var(--accent)
}

.fine {
  color: var(--muted)
}

/* ---------- A11y / Motion ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background: var(--fg);
  color: var(--bg);
  padding: .5rem .75rem;
  border-radius: .5rem;
  z-index: 1000
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 404 / misc ---------- */
.nf-hero {
  min-height: 60vh;
  justify-content: center
}

.nf-code {
  margin: 0;
  font-size: clamp(3.5rem, 6vw + 1rem, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent)
}

.btn {
  display: inline-block;
  padding: .65rem 1rem;
  border: 1px solid var(--stroke-2);
  border-radius: .75rem;
  text-decoration: none;
  color: var(--fg)
}

.btn:hover {
  border-color: var(--muted)
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent)
}

.btn-primary:hover {
  background: var(--fg);
  border-color: var(--fg)
}

/* ---------- CONTACT PAGE ONLY (scoped) ---------- */
/* Container that wraps the form card + four info cards */
.contact-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.contact-form-card{grid-column:1 / -1;padding:1.25rem 1.5rem;display:flex;flex-direction:column}
.contact-form-card form{flex:1;width:100%;max-width:none!important;margin:0;display:flex;flex-direction:column;gap:1rem}
.contact-form-card label{display:flex;flex-direction:column;font-weight:600}
.contact-form-card input[type="text"],.contact-form-card input[type="email"],.contact-form-card textarea{
  width: 100%;
  margin-top: .35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--stroke-2);
  background: var(--surface);
  color: var(--fg);
  border-radius: .6rem;
  font-size: 1rem
}
.contact-form-card textarea{min-height:14rem;resize:vertical}
.contact-form-card input:focus,.contact-form-card textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}

.contact-form-card button {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  border: 0;
  border-radius: .6rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem
}

.form-status {
  min-height: 1.2em;
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--muted)
}

.form-status.is-error {
  color: #b3261e
}
.info-card{display:flex;flex-direction:column;justify-content:flex-start;padding:1rem}
.info-card .card-title{font-size:1rem;margin:.25rem 0 .4rem;text-align:left}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;align-items:center;gap:.5rem;margin:.35rem 0;font-size:.92rem}
.contact-list svg{width:16px;height:16px;stroke:var(--accent);stroke-width:2;fill:none;flex-shrink:0}
.info-card a{text-decoration:underline}

/* Responsive wrap for contact cards only */
@media (max-width:1100px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.contact-grid{grid-template-columns:1fr}}
@view-transition {
  navigation: auto;
}

/* ---------- Theme switcher (temporary review tool) ---------- */
.theme-switcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  max-width: min(92vw, 460px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem .6rem;
  border-radius: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--stroke-2);
  box-shadow: 0 8px 20px rgba(var(--shadow-tint), .18);
}

.theme-switcher span {
  font-size: .72rem;
  color: var(--muted);
  padding: 0 .15rem 0 .35rem;
  white-space: nowrap
}

.theme-switcher button {
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--stroke-2);
  background: transparent;
  color: var(--fg);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer
}

.theme-switcher button.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent)
}

.theme-switcher button.swatch {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 50%
}

.theme-switcher button.swatch.active {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--surface)
}