/* GET2 — shared styles (complements Tailwind Play CDN) */

:root {
  --olive-900: #2C3320;
  --olive-800: #374029;
  --olive-700: #434E30;
  --olive-600: #54613B;
  --olive-500: #6B7A4C;
  --clay-500: #B85C38;
  --clay-600: #9E4B2C;
  --sand-50: #FBF8F1;
  --sand-100: #F5EFE2;
  --sand-200: #EBE1CC;
  --gold-500: #B08D44;
  --ink: #27261F;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01"; }

/* Source Serif 4 optical sizing for large display type */
.display { font-optical-sizing: auto; font-variation-settings: "opsz" 60; letter-spacing: -0.01em; }

/* ---- Accessible focus ---- */
:focus-visible {
  outline: 3px solid var(--clay-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--olive-700); color: #fff; padding: .65rem 1rem;
  border-radius: .4rem; z-index: 100; transition: top .15s ease;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---- Labelled placeholder imagery ---- */
.ph-img {
  position: relative;
  background-color: var(--sand-200);
  background-image: repeating-linear-gradient(135deg,
    rgba(67,78,48,.10) 0 12px, rgba(67,78,48,0) 12px 26px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph-img__label {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: #6c5b3f;
  background: rgba(251,248,241,.82);
  padding: .4rem .65rem; border: 1px solid rgba(126,107,78,.28);
  border-radius: .25rem; backdrop-filter: blur(1px);
}
.ph-img--dark { background-color: var(--olive-800);
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.06) 0 12px, rgba(255,255,255,0) 12px 26px); }
.ph-img--dark .ph-img__label { color: #e9e2cf; background: rgba(44,51,32,.6); border-color: rgba(233,226,207,.25); }

/* ---- Language toggle ---- */
.lang-btn {
  font-weight: 600; font-size: .82rem; letter-spacing: .04em;
  padding: .25rem .55rem; border-radius: .35rem; color: var(--olive-600);
  transition: background .15s, color .15s;
}
.lang-btn:hover { background: var(--sand-100); }
.lang-btn.lang-active { background: var(--olive-700); color: #fff; }

/* ---- Mobile nav ---- */
#mobile-nav { transition: max-height .3s ease, opacity .25s ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-nav.open { max-height: 30rem; opacity: 1; }

/* ---- Forms ---- */
.field-input {
  width: 100%; background: #fff; border: 1.5px solid #d8cdb4;
  border-radius: .55rem; padding: .7rem .85rem; font-size: 1rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field-input:hover { border-color: #c2b491; }
.field-input:focus { outline: none; border-color: var(--olive-600); box-shadow: 0 0 0 3px rgba(84,97,59,.18); }
.field-input::placeholder { color: #a99c80; }
.field-input[aria-invalid="true"] { border-color: var(--clay-600); box-shadow: 0 0 0 3px rgba(158,75,44,.15); }
select.field-input { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2354613B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.4rem; }
.field-error { display: none; align-items: center; gap: .35rem; color: var(--clay-600); font-size: .85rem; font-weight: 600; margin-top: .35rem; }
.field-error.show { display: flex; }
.field-error svg { flex: none; }

/* Honeypot — visually hidden anti-spam field (only bots fill it) */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Reveal: content is always visible (no hide-then-show, so it can never be stuck blank).
   A gentle, non-hiding settle keeps a touch of life without ever dropping opacity. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: revealSettle .6s ease both; }
}
@keyframes revealSettle {
  from { transform: translateY(10px); }
  to   { transform: none; }
}

/* Subtle card hover */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); }

/* Footer link underline */
.foot-link { transition: color .15s; }
.foot-link:hover { color: #fff; }

/* Decorative rule */
.rule-gold { height: 3px; width: 56px; background: var(--gold-500); border-radius: 2px; }

/* Gold hairline divider */
.hair { height: 1px; background: linear-gradient(90deg, transparent, rgba(176,141,68,.55), transparent); }

/* Prose-ish spacing for narrative blocks */
.narrative p { margin-bottom: 1.15rem; line-height: 1.75; }
.narrative p:last-child { margin-bottom: 0; }

/* ---- Arabic (RTL) ---- */
html[lang="ar"] { font-family: "Cairo", "Source Sans 3", system-ui, sans-serif; }
html[lang="ar"] .font-serif { font-family: "Cairo", "Source Serif 4", Georgia, serif; }
html[lang="ar"] .font-mono  { font-family: "Cairo", monospace; }
html[lang="ar"] * { letter-spacing: 0 !important; } /* Arabic is connected script; tracking breaks letters */
[dir="rtl"] .field-input { text-align: right; }
[dir="rtl"] .field-error { flex-direction: row; }