/* ==========================================================================
   Viking Education Academy – Fancy Theme
   Filename: viking.css
   Works with your existing PHP classes (no markup changes required).
   Accent color (--accent) is still injected by PHP; we use it as a leaf-green.
   ========================================================================== */

/* -------------------- Design tokens -------------------- */
:root{
  /* 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 / chat bubble) */
  --leaf-700: #4a9d55;
  --leaf-600: #61b56b;
  --leaf-500: #74c67a;
  --leaf-300: #a4e0ab;

  /* Neutral ink */
  --ink-900: #1e232a;
  --ink-700: #384350;
  --ink-500: #6e7b8b;

  /* Surfaces */
  --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);

  /* Fallback for PHP-injected --accent (use leaf-600) */
  --accent: #61b56b;
}

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

body.theme-body{
  margin:0; background: var(--page); color: var(--ink-700);
  font-family: ui-serif, "Merriweather", Georgia, "Times New Roman", serif; /* elegant headings */
  line-height:1.55;
}

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

/* -------------------- Header -------------------- */
.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);
}
.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);
}
.accent{ color: var(--leaf-700) } /* the green “Education” feel */

/* -------------------- Hero-ish band (optional wrapper) -------------------- */
.theme-body .hero-band{
  background: linear-gradient(180deg, var(--fjord-800), var(--fjord-700));
  color:#fff; text-align:center; padding: 34px 18px 28px;
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.15);
}

/* -------------------- Layout -------------------- */
.wrap{
  width:min(1120px, 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 -------------------- */
.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;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(1200px 320px at -10% -10%, rgba(138, 174, 218, .18), transparent 60%),
              radial-gradient(900px 300px at 110% 10%, rgba(97, 181, 107, .16), transparent 60%);
  z-index: -1; border-radius: inherit;
}
.card.glow{ box-shadow: var(--shadow-lg) }
.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;
}

/* -------------------- Fancy CTA tiles (optional) -------------------- */
.tile-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px }
@media (max-width:1100px){ .tile-grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:640px){ .tile-grid{ grid-template-columns: 1fr } }

.tile{
  background: linear-gradient(180deg, var(--fjord-700), var(--fjord-800));
  color:#fff; border-radius: 20px;
  padding: 28px 22px;
  text-align:center; box-shadow: var(--shadow-md);
  border:1px solid rgba(255,255,255,.08);
  transform: translateY(0); transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(20,63,116,.35);
  filter: brightness(1.02);
}
.tile .icon{ font-size: 36px; margin-bottom: 12px; opacity:.95 }
.tile h4{ margin: 6px 0 0; font-weight: 900; line-height:1.25 }

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

/* -------------------- Form grid -------------------- */
.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;
}
.required-indicator{ color:#b02e2e; margin-left:6px }
.optional{ font-style:italic; font-size:.86rem; color: var(--ink-500); margin-left:8px }

/* -------------------- Premium Inputs -------------------- */
/* Soft-glass controls with inner gloss, blue focus glow, and sheen hover */
.input, .select, .textarea{
  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;
  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{
  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{
  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{
  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;
}

/* Inline validation hooks (optional, add classes with JS) */
.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{
  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;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}
.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 / dropdown group -------------------- */
.fieldset{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #ffffff;
  padding: 16px 16px 12px;
  box-shadow: var(--shadow-sm);
}
.fieldset > legend{
  padding: 0 8px;
  color: var(--ink-900);
  font-weight: 900;
}
.dropdown-group{ display:grid; grid-template-columns: repeat(3,1fr); gap: 14px }
@media (max-width:920px){ .dropdown-group{ grid-template-columns: 1fr } }

/* -------------------- Primary CTA (leaf green pill) -------------------- */
.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;
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 18px 36px rgba(74,157,85,.28);
  transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
}
.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: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  color: var(--ink-900);
}
.response h3, .response h4{ margin:.6em 0; color: var(--ink-900) }
.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);
}
footer .footer-content a{ color: var(--fjord-700) }
.footer-note{ font-size:.84rem; color:#8a96a8 }

/* -------------------- Internal mode note -------------------- */
.internal-mode-warning{ color: #c65353; font-weight:900 }

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

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