/* ==========================================================================
   Kitsap Printing – Lighthouse Landing Theme (Arial Everywhere)
   ========================================================================== */

/* -------------------- Design tokens -------------------- */
:root{
  /* Viking brand blues */
  --fjord-900: #0f3460; /* deep navy */
  --fjord-800: #143f74;
  --fjord-700: #1b518f;
  --fjord-600: #2a68a7;
  --fjord-300: #89aeda;
  --fjord-100: #eaf2fb;

  /* Leaf greens (CTAs / success) */
  --leaf-700: #4a9d55;
  --leaf-600: #61b56b;
  --leaf-500: #74c67a;
  --leaf-300: #a4e0ab;

  /* Neutrals + surfaces */
  --ink-900: #1e232a;
  --ink-700: #384350;
  --ink-500: #6e7b8b;

  --page: #f6f7fb;
  --panel: #ffffff;
  --line: rgba(20,33,61,.12);

  /* Radii + shadows */
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --shadow-sm: 0 2px 6px rgba(15,52,96,.12);
  --shadow-md: 0 10px 24px rgba(15,52,96,.18);
  --shadow-lg: 0 24px 50px rgba(15,52,96,.24);

  /* Focus */
  --focus-blue: 0 0 0 3px rgba(42,104,167,.35), 0 10px 24px rgba(27,81,143,.18);

  /* Lighthouse palette (used only by hero/header) */
  --brand-blue-dark: var(--fjord-900);
  --brand-blue: var(--fjord-700);
  --brand-blue-light: var(--fjord-300);

  /* Buttons on hero */
  --btn-bg: #ffffff;
  --btn-fg: var(--fjord-900);
}

/* -------------------- Base -------------------- */
*{ box-sizing:border-box }
html,body{ height:100% }

body.theme-body{
  margin:0;
  background: var(--page);
  color: var(--ink-700);
  font-family: Arial, Helvetica, sans-serif;
  line-height:1.55;
}

/* Links */
a{ color: var(--fjord-700); text-decoration:none }
a:hover{ color: var(--fjord-600); text-decoration:underline }

/* -------------------- Header (default: solid) -------------------- */
.site-header{
  position: relative;
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 28px rgba(13,41,79,.06);
  z-index: 10;
}
.project-link{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-size:.95rem;
}
.project-link a{ color: var(--ink-500) }
.project-link a:hover{ color: var(--fjord-700) }

.site-title{
  font-weight: 900;
  letter-spacing:.6px;
  color: var(--fjord-900);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-family: Arial, Helvetica, sans-serif;
}
.accent{ color: var(--leaf-700) }

/* ---------- Transparent header ONLY when a .hero follows the header */
.site-header:has(+ .hero){
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 16px 5vw;
  background: rgba(15,52,96,.45);
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}
.site-header:has(+ .hero) a{ color:#fff }
.site-header:has(+ .hero) a:hover{ color: var(--brand-blue-light) }

/* -------------------- Hero (only if you actually have .hero on the page) */
.hero{
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  text-align: center; padding: 0 18px;
  background: url('/images/lighthouse-bg.jpg') center/cover no-repeat;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(15,52,96,.6), rgba(15,52,96,.85));
  z-index:0;
}
.hero-content{ position:relative; z-index:1; max-width:820px }
.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900; color:#fff; line-height:1.15; margin-bottom:1rem;
  font-family: Arial, Helvetica, sans-serif;
}
.hero p{ font-size:1rem; margin-bottom:2.5rem; color: rgba(255,255,255,.9);
  font-family: Arial, Helvetica, sans-serif;
}
.btn-group{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }
.btn{
  background: var(--btn-bg); color: var(--btn-fg); text-decoration:none;
  font-weight:700; padding:14px 22px; border-radius:12px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: transform .2s, box-shadow .25s;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25) }

/* -------------------- Layout -------------------- */
.wrap{
  width:min(980px, 96vw);
  margin: 26px auto 40px;
  display:grid; gap: 22px;
}
.logo{ display:flex; align-items:center; gap:12px }
.logo img{ height:56px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)) }

/* -------------------- Card (container preserved) -------------------- */
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-md);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:
    radial-gradient(1200px 320px at -10% -10%, rgba(138,174,218,.10), transparent 60%),
    radial-gradient(900px 300px at 110% 10%, rgba(97,181,107,.10), transparent 60%);
  z-index:-1;
}
.meta{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.company-name{ font-weight: 900; color: var(--ink-900) }

.page-title{
  margin: 10px 0 10px;
  color: var(--ink-900);
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  font-weight: 900;
  letter-spacing:.3px;
  font-family: Arial, Helvetica, sans-serif;
}

/* -------------------- Messages -------------------- */
.message{ text-align:center; color: var(--leaf-700); font-weight:900; margin-top:4px;
  font-family: Arial, Helvetica, sans-serif;
}
.estimate{ text-align:center; margin-top:14px; color: var(--ink-900);
  font-family: Arial, Helvetica, sans-serif;
}

/* -------------------- Form grid (preserved) -------------------- */
.form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.full{ grid-column:1/-1 }
.triple{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px }
@media (max-width:920px){ .form-grid{ grid-template-columns:1fr } .triple{ grid-template-columns:1fr } }

.form-label{
  display:block; font-weight:900; color: var(--ink-900);
  margin: 4px 0 8px; letter-spacing:.25px;
  font-family: Arial, Helvetica, sans-serif;
}
.required-indicator{ color:#b02e2e; margin-left:6px }
.optional{ font-style:italic; font-size:.86rem; color: var(--ink-500); margin-left:8px }

/* -------------------- Premium Inputs (preserved) -------------------- */
.input, .select, .textarea,
input:not([type=checkbox]):not([type=radio]):not(.unstyled),
select:not(.unstyled),
textarea:not(.unstyled){
  width:100%;
  padding: 14px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(27,81,143,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,252,255,.92));
  color: var(--ink-900); font-size: 1rem; outline:none;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 0 rgba(255,255,255,.5),
    0 10px 18px rgba(27,81,143,.06);
  transition: border-color .15s ease, box-shadow .2s ease, transform .08s ease, background .2s ease;
}
.input:hover, .select:hover, .textarea:hover,
input:not([type=checkbox]):not([type=radio]):hover,
select:not(.unstyled):hover,
textarea:not(.unstyled):hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 28px rgba(27,81,143,.10);
}
.input:focus, .select:focus, .textarea:focus,
input:not([type=checkbox]):not([type=radio]):focus,
select:not(.unstyled):focus,
textarea:not(.unstyled):focus{
  border-color: var(--fjord-600);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), var(--focus-blue);
}
.textarea{ min-height: 132px; resize: vertical }
.input::placeholder, .textarea::placeholder{ color:#8aa0b8 }

/* Tailored select arrow */
select.select,
select:not(.unstyled){
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.8rem 100%;
  background-repeat: no-repeat;
}

/* Validation hooks */
.input.is-valid, .select.is-valid, .textarea.is-valid,
input.is-valid, select.is-valid, textarea.is-valid{
  border-color: var(--leaf-600);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(97,181,107,.25);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid{
  border-color: #c65353;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(198,83,83,.22);
}

/* -------------------- Checkbox chips -------------------- */
.checkbox-group{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.checkbox-group .chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#f2f6fd;
  border:1px solid rgba(27,81,143,.18);
  color:var(--fjord-900);
  font-weight:800;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition: transform .08s, box-shadow .18s, background .18s;
}
.checkbox-group .chip:hover{
  transform: translateY(-2px);
  background:#eaf1fd;
  box-shadow:0 14px 28px rgba(27,81,143,.18);
}
.checkbox-group input{ accent-color: var(--leaf-700) }

/* -------------------- Fieldset -------------------- */
.fieldset{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  padding:16px 16px 12px;
  box-shadow:var(--shadow-sm);
  font-family: Arial, Helvetica, sans-serif;
}
.fieldset > legend{
  padding:0 8px; color:var(--ink-900); font-weight:900;
  font-family: Arial, Helvetica, sans-serif;
}
.dropdown-group{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width:920px){ .dropdown-group{ grid-template-columns:1fr } }

/* -------------------- Primary CTA -------------------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  padding:14px 18px; border:0; border-radius:999px;
  background: linear-gradient(180deg, var(--leaf-500), var(--leaf-700));
  color:#fff; font-weight:900; letter-spacing:.35px; cursor:pointer;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 18px 36px rgba(74,157,85,.28);
  transition: transform .08s, filter .15s, box-shadow .2s;
}
.btn-primary:hover{
  transform: translateY(-2px); filter:brightness(1.02);
  box-shadow: 0 2px 0 rgba(255,255,255,.7) inset, 0 26px 48px rgba(74,157,85,.35);
}
.btn-primary:active{ transform: translateY(0) }

/* -------------------- Spinner -------------------- */
.spinner{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(26,64,112,.18);
  backdrop-filter: blur(2px);
}
.loader{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%;
  border:7px solid #eff5fd; border-top:7px solid var(--fjord-700);
  animation: vspin 1.05s linear infinite;
}
@keyframes vspin{ to{ transform: translate(-50%,-50%) rotate(360deg) } }

/* -------------------- AI Response panel -------------------- */
.response{ margin-top:18px }
.response-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-sm); color:var(--ink-900);
  font-family: Arial, Helvetica, sans-serif;
}
.response h3, .response h4{ margin:.6em 0; color:var(--ink-900);
  font-family: Arial, Helvetica, sans-serif;
}
.response a{ color: var(--fjord-700) }

/* -------------------- Footer -------------------- */
footer .footer-content{
  background: linear-gradient(180deg,#ffffff,#f5f7fb);
  border-top:1px solid var(--line);
  color: var(--ink-500);
  font-family: Arial, Helvetica, sans-serif;
}
footer .footer-content a{ color: var(--fjord-700) }
.footer-note{ font-size:.84rem; color:#8a96a8 }

/* -------------------- Login card -------------------- */
.login-card{
  width:100%; max-width:440px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:28px; margin:24px auto; box-shadow:var(--shadow-lg);
  font-family: Arial, Helvetica, sans-serif;
}
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.brand img{ height:46px }
.brand-title{ font-weight:900; color: var(--ink-900);
  font-family: Arial, Helvetica, sans-serif;
}
.login-title{ margin:10px 0 16px; font-weight:900; color: var(--ink-900);
  font-family: Arial, Helvetica, sans-serif;
}
.error{ color:#c65353; font-weight:800; font-family: Arial, Helvetica, sans-serif }

/* -------------------- Helpers -------------------- */
.hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
.small-grey{ font-size:12px; color:#9aa6b4; font-family: Arial, Helvetica, sans-serif }
.instructions{ font-size:12px; color:#7e8ba0; margin-bottom:18px; font-family: Arial, Helvetica, sans-serif }