/* AbitGo 2027 theme layer.
   Re-skins the older page templates (subject guides, hub, policy, authors)
   without touching their HTML. _build/apply-chrome.mjs links this file as the
   last stylesheet in <head> and marks <body> with:
     .agt        - page opted in
     .agt-dark   - the page's hero is dark (white text)
     .agt-light  - the page's hero is light (dark text)
   Every rule is prefixed with .agt, so it outranks the page's own `.x{}`
   rules without !important. */

/* ---------------------------------------------------------------- palette
   The templates use different variable names for the same roles; all are
   mapped to the 2027 palette here (body-level, so they beat :root). */
.agt {
  --bg: #f8fafc;
  --surface: #fff;
  --surface2: #f8fafc;
  --paper: #fff;
  --card: #fff;
  --ink: #1e293b;
  --text: #475569;
  --muted: #64748b;
  --line: #eef2f7;
  --blue: #4f46e5;
  --blue2: #4338ca;
  --brand: #4f46e5;
  --brand2: #4338ca;
  --brand-dark: #3730a3;
  --indigo: #4f46e5;
  --navy: #1e1b4b;
  --dark: #1e1b4b;
  --soft: #eef2ff;
  --soft2: #f8fafc;
  --sky: #eef2ff;
  --mint: #d1fae5;
  --teal: #047857;
  --teal2: #4f46e5;
  --green: #047857;
  --shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.08);
  --radius: 24px;
  --r: 24px;
  --agt-lift: 0 22px 50px -14px rgba(79, 70, 229, 0.25);
  --agt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.agt main a:not(.btn):not([class*="btn-"]) {
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- hero */
.agt-dark .hero {
  background:
    radial-gradient(45% 65% at 6% 0%, rgba(139, 92, 246, 0.55) 0%, rgba(139, 92, 246, 0) 70%),
    radial-gradient(38% 55% at 94% 6%, rgba(16, 185, 129, 0.26) 0%, rgba(16, 185, 129, 0) 70%),
    radial-gradient(42% 60% at 86% 100%, rgba(251, 113, 133, 0.24) 0%, rgba(251, 113, 133, 0) 70%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%);
  color: #fff;
}
.agt-light .hero {
  background:
    radial-gradient(42% 55% at 8% 12%, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0) 70%),
    radial-gradient(36% 50% at 92% 8%, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0) 70%),
    radial-gradient(40% 55% at 78% 100%, rgba(251, 113, 133, 0.14) 0%, rgba(251, 113, 133, 0) 70%),
    radial-gradient(32% 45% at 28% 100%, rgba(250, 204, 21, 0.14) 0%, rgba(250, 204, 21, 0) 70%),
    #f8fafc;
}
.agt .hero h1 {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.agt-light .hero h1 {
  color: var(--ink);
}
/* Chips on the hero: frosted on dark, white with a live dot on light. */
.agt-dark .hero .kicker,
.agt-dark .hero .eyebrow,
.agt-dark .hero .pill {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}
.agt-light .hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e0e7ff;
  color: var(--blue);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
/* Cards inside the hero (exam facts) */
.agt .hero-card,
.agt .hero-panel,
.agt .side-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35);
}

/* ---------------------------------------------------------------- headings */
.agt main h2 {
  font-weight: 850;
  letter-spacing: -0.02em;
  /* Long Georgian compounds (e.g. "ურთიერთდაკავშირებულ") must not push
     out of a grid column. */
  overflow-wrap: anywhere;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.18;
}
.agt main h3 {
  letter-spacing: -0.01em;
}
/* Card and quick-answer titles are small headings, not section titles. */
.agt main .agc-source h2 {
  font-size: 21px;
  line-height: 1.3;
}
.agt main .card h2,
.agt main aside h2 {
  font-size: 21px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- buttons */
.agt .btn {
  border-radius: 999px;
  font-weight: 800;
  transition: transform 0.25s var(--agt-ease), box-shadow 0.25s var(--agt-ease), background-color 0.2s, color 0.2s;
}
.agt .btn:hover {
  transform: translateY(-2px);
}
.agt .btn-primary,
.agt .btn.primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 55%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(79, 70, 229, 0.6);
}
.agt .hero .btn-primary,
.agt .hero .btn.primary {
  animation: agtGlow 2.8s ease-in-out infinite;
}
.agt .btn-primary:hover,
.agt .btn.primary:hover {
  box-shadow: 0 16px 34px -8px rgba(79, 70, 229, 0.7);
}
.agt .btn-dark {
  background: #1e293b;
  color: #fff;
}
.agt .btn-dark:hover {
  background: #4f46e5;
}
.agt .btn-light {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.2);
}
.agt .btn-light:hover {
  color: var(--blue);
  border-color: #c7d2fe;
}
/* Outline buttons on a light hero would be white-on-white. */
.agt-light .hero .btn-outline {
  color: var(--ink);
  border-color: #c7d2fe;
}
@keyframes agtGlow {
  0%, 100% { box-shadow: 0 10px 26px -8px rgba(79, 70, 229, 0.55), 0 0 0 0 rgba(165, 180, 252, 0.45); }
  50% { box-shadow: 0 12px 32px -8px rgba(79, 70, 229, 0.7), 0 0 0 8px rgba(165, 180, 252, 0); }
}

/* ---------------------------------------------------------------- chips
   Section labels rotate through indigo, mint, coral and sun. */
.agt main .label {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 800;
}
.agt main section:nth-of-type(4n + 2) .label { background: #d1fae5; color: #047857; }
.agt main section:nth-of-type(4n + 3) .label { background: #ffe4e6; color: #be123c; }
.agt main section:nth-of-type(4n + 4) .label { background: #fef3c7; color: #92400e; }
.agt main .chip,
.agt main .tag,
.agt main .badge {
  border-radius: 999px;
  font-weight: 750;
}

/* ---------------------------------------------------------------- cards
   Soft UI: white, hairline border, large soft shadow. Only clickable cards
   lift on hover, so a card never pretends to be a link. */
.agt main .card,
.agt main .week,
.agt main .tool,
.agt main .topic,
.agt main .method-step,
.agt main .step,
.agt main .phase,
.agt main .era,
.agt main .skill,
.agt main .mistake,
.agt main .time-block,
.agt main .article-card,
.agt main .exam-card,
.agt main .toc,
.agt main .topic-nav {
  border-radius: 24px;
  border-color: #eef2f7;
  box-shadow: var(--shadow);
}
.agt main .card,
.agt main .article-card,
.agt main .topic {
  transition: transform 0.3s var(--agt-ease), box-shadow 0.3s var(--agt-ease), border-color 0.3s;
}
.agt main a.card:hover,
.agt main .card:has(> a.btn):hover,
.agt main .card:has(> a:only-child):hover,
.agt main a.article-card:hover,
.agt main a.topic:hover {
  transform: translateY(-4px);
  box-shadow: var(--agt-lift);
  border-color: #e0e7ff;
}
.agt main .note,
.agt main .notice,
.agt main .official,
.agt main .warning {
  border-radius: 18px;
  align-self: start;
}

/* ---------------------------------------------------------------- tables */
.agt main .table-wrap,
.agt main .tablewrap {
  border-radius: 24px;
  border: 1px solid #eef2f7;
  box-shadow: var(--shadow);
  background: #fff;
}
.agt main th {
  background: #f8fafc;
  color: #64748b;
}
.agt main tbody tr:hover {
  background: #fafaff;
}

/* ---------------------------------------------------------------- forms */
.agt main input,
.agt main select,
.agt main textarea {
  border-radius: 14px;
}
.agt main input:focus-visible,
.agt main select:focus-visible,
.agt main textarea:focus-visible {
  outline: 3px solid #a5b4fc;
  outline-offset: 1px;
}

/* ---------------------------------------------------------------- FAQ */
.agt main .faq details,
.agt main details {
  border-radius: 20px;
  border-color: #eef2f7;
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.25s;
}
.agt main .faq details[open],
.agt main details[open] {
  border-color: #e0e7ff;
  box-shadow: 0 16px 40px -14px rgba(79, 70, 229, 0.2);
}
.agt main details summary {
  color: var(--ink);
}

/* Generated templates (literatura, khelovneba, policy, authors) */
.agt main .facts li {
  border-radius: 20px;
  border-color: #fff;
  box-shadow: var(--shadow);
}
.agt main .facts li:nth-child(1) b { color: #4f46e5; }
.agt main .facts li:nth-child(2) b { color: #047857; }
.agt main .facts li:nth-child(3) b { color: #be123c; }
.agt main .facts li:nth-child(4) b { color: #92400e; }
.agt main .steps li {
  border-radius: 20px;
  border-color: #eef2f7;
  box-shadow: var(--shadow);
}
.agt main .steps li::before {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 10px;
}
.agt main .chips li {
  background: #fff;
  border-color: #e0e7ff;
  color: #4338ca;
  font-weight: 650;
}

:focus-visible {
  outline-color: #6366f1;
}

@media (prefers-reduced-motion: reduce) {
  .agt *,
  .agt *::before,
  .agt *::after {
    animation: none !important;
    transition: none !important;
  }
  .agt .btn:hover,
  .agt main .card:hover,
  .agt main a.card:hover {
    transform: none;
  }
}