/*
 * front.css — the emerald marketing theme for the Control Plane public funnel (_Front.cshtml), light + dark.
 * Hand-written (NOT a Tailwind build artifact). The `em-*` colour utilities resolve to the RGB-triplet CSS
 * vars below; light values live on :root, dark values under .dark (the app's existing theme class on <html>),
 * so the whole landing flips with the theme toggle. Composite effects (gradients, glow, grid) read the vars
 * directly. Loaded only by _Front.cshtml.
 */

:root {
  /* Emerald — light */
  --em-base: 246 250 247;   /* #F6FAF7 page */
  --em-panel: 255 255 255;  /* #FFFFFF cards */
  --em-edge: 220 234 226;   /* #DCEAE2 borders */
  --em-mint: 4 120 87;      /* #047857 accent / links */
  --em-sky: 5 150 105;      /* #059669 */
  --em-gold: 185 138 44;    /* #B98A2C */
  --em-mut: 92 115 103;     /* #5C7367 muted text */
  --em-ink: 11 36 26;       /* #0B241A headings */
  --em-body: 51 65 85;      /* #334155 body text (slate-700) */

  --em-onbtn: #F9FCFA;      /* text on gradient buttons */
  --grad-text: linear-gradient(90deg, #059669, #065F46);
  --grad-btn: linear-gradient(135deg, #059669, #047857);
  --glow: radial-gradient(700px 360px at 50% -10%, rgba(5, 150, 105, .12), transparent),
          radial-gradient(520px 300px at 90% 30%, rgba(4, 120, 87, .08), transparent);
  --grid-line: rgba(4, 120, 87, .05);
}

.dark {
  /* Emerald — dark */
  --em-base: 8 20 17;       /* #081411 */
  --em-panel: 14 30 24;     /* #0E1E18 */
  --em-edge: 29 59 47;      /* #1D3B2F */
  --em-mint: 52 211 153;    /* #34D399 */
  --em-sky: 5 150 105;      /* #059669 */
  --em-gold: 232 181 77;    /* #E8B54D */
  --em-mut: 140 169 155;    /* #8CA99B */
  --em-ink: 255 255 255;    /* #FFFFFF headings */
  --em-body: 226 232 240;   /* #E2E8F0 body text (slate-200) */

  --em-onbtn: #081411;
  --grad-text: linear-gradient(90deg, #6EE7B7, #059669);
  --grad-btn: linear-gradient(135deg, #34D399, #059669);
  --glow: radial-gradient(700px 360px at 50% -10%, rgba(52, 211, 153, .16), transparent),
          radial-gradient(520px 300px at 90% 30%, rgba(5, 150, 105, .10), transparent);
  --grid-line: rgba(140, 169, 155, .07);
}

html { scroll-behavior: smooth; }

/* Fonts (matches the design templates): Readex Pro for headings, IBM Plex Sans Arabic for body. */
.front-theme { font-family: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif; }
.front-theme .font-heading { font-family: "Readex Pro", "Cairo", system-ui, sans-serif; }

/* Ambient radial glow behind the hero / CTA sections. */
.glow { background: var(--glow); }

/* Faint blueprint grid. */
.grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* Emerald gradient clipped to text. */
.gtext {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Emerald gradient fill for primary buttons/badges. */
.gbtn {
  background: var(--grad-btn);
  color: var(--em-onbtn);
}

/* Panel with a gradient (masked) border — the "featured" surface. */
.gborder {
  position: relative;
  background: rgb(var(--em-panel));
  border-radius: 1rem;
}
.gborder::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 1.5px;
  background: var(--grad-btn);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Reveal-on-scroll: elements start hidden, get `.in` from the IntersectionObserver in _Front.cshtml. */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.rv.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* FAQ accordion answer (max-height transition driven by Alpine binding). */
.ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.chev { transition: transform .3s; }

/* Themed form control for the register funnel. 16px + a taller box on phones (Safari zooms into anything
 * smaller and never zooms back; the padding also brings the control to the 44px touch baseline), stepping
 * down to the design's 14px from `sm` up. */
.front-input {
  width: 100%;
  background: rgb(var(--em-base));
  border: 1px solid rgb(var(--em-edge));
  border-radius: .5rem;
  padding: .75rem .875rem;
  font-size: 1rem;
  color: rgb(var(--em-ink));
  outline: none;
  transition: border-color .15s ease;
}
@media (min-width: 640px) {
  .front-input {
    padding: .625rem .875rem;
    font-size: .875rem;
  }
}
.front-input::placeholder { color: rgb(var(--em-mut)); }
.front-input:focus { border-color: rgb(var(--em-mint)); }

/* Two controls cannot show `.input-validation-error` themselves — it sets a border COLOUR, and neither has a
 * border of its own to colour: the subdomain input (its group draws the box around input + status + suffix) and
 * a checkbox (a native control ignores it outright). Their container carries the state instead, so a rejected
 * field reads like any other. */
.front-group:has(.input-validation-error),
.front-chip:has(.input-validation-error) { border-color: rgb(239 68 68 / .6) !important; }

/* Keep browser-autofilled fields on-theme. Chrome forces a light background otherwise; the inset box-shadow
 * (drawn in the theme's base colour) is the only way to mask it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--em-ink));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--em-base)) inset;
  box-shadow: 0 0 0 1000px rgb(var(--em-base)) inset;
  caret-color: rgb(var(--em-ink));
  transition: background-color 9999s ease-in-out 0s;
}