/* =========================
   ACCESS POINT II — GLOBAL
   (Classified Terminal Aesthetic)
   ========================= */

/* Base */
html, body { background-color: #000 !important; }
:root{
  --ap2-maxw: 720px;
  --ap2-pad: clamp(16px, 4vw, 28px);
  --ap2-h1: clamp(32px, 4.6vw, 48px);
  --ap2-h2: clamp(22px, 3.6vw, 30px);
  --ap2-body: clamp(16px, 1.8vw, 20px);
  --ap2-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "IBM Plex Mono", "Cascadia Code", monospace;
  --ap2-sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --ap2-ink: #e5f2fb;      /* main text */
  --ap2-muted: #b8c6cf;    /* secondary */
  --ap2-dim: #7e8b93;      /* tertiary */
  --ap2-accent: #6eb1d6;   /* cyan highlight */
  --ap2-divider-a: #87c8e9;/* gradient line start */
  --ap2-divider-b: #4a7ea1;/* gradient line end */
  --ap2-edge: rgba(110,177,214,.22);
}

/* Container & layout (header/menu is fixed; add top padding) */
.ap2-container{
  max-width: var(--ap2-maxw);
  margin: 0 auto;
  padding: calc(72px + var(--ap2-pad)) var(--ap2-pad) var(--ap2-pad);
  color: var(--ap2-ink);
  font-family: var(--ap2-sans);
  line-height: 1.65;
}

/* Header */
.ap2-header{ text-align: center; margin-bottom: clamp(20px, 4vh, 36px); }
.ap2-h1{
  font-family: var(--ap2-mono);
  font-size: var(--ap2-h1);
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0 0 8px 0;
  color: var(--ap2-ink);
  text-shadow: 0 0 14px rgba(110,177,214,.1);
  font-weight: 700;
}
.ap2-subtitle{
  font-family: var(--ap2-mono);
  font-size: clamp(14px, 1.7vw, 16px);
  color: var(--ap2-accent);
  opacity: .9;
  margin: 0 0 14px 0;
}

/* Divider (flicker line) */
.ap2-divider{
  width: 100%; height: 2px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, var(--ap2-divider-a) 35%, var(--ap2-divider-b) 65%, transparent 100%);
  box-shadow: 0 0 18px var(--ap2-edge);
}
.ap2-divider::after{
  content:""; position:absolute; top:0; left:-40%;
  width:40%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: ap2-scan 2.8s linear infinite;
}
@keyframes ap2-scan{ 0%{ left:-40%; opacity:.7 } 100%{ left:100%; opacity:.15 } }

/* Body sections */
.ap2-body{ margin: clamp(18px, 3.6vh, 28px) 0; font-size: var(--ap2-body); color: var(--ap2-ink); }

/* Section headings — force cyan + mono */
.ap2-container .ap2-body h2,
.ap2-container .ap2-body h2 a{
  font-family: var(--ap2-mono);
  font-size: var(--ap2-h2);
  font-weight: 600;
  color: var(--ap2-accent) !important;
  margin: 22px 0 12px 0;
  letter-spacing: .03em;
  text-decoration: none;
}
.ap2-body p{ margin: 0 0 12px; }
.ap2-body em{ color: var(--ap2-accent); font-style: normal; }
.ap2-body strong{ color: #fff; }

/* Lists */
.ap2-body ul{ margin: 10px 0 12px 0; padding-left: 1.15em; }
.ap2-body li{ margin: 6px 0; color: var(--ap2-muted); }

/* Inline callouts */
.ap2-callout{
  border: 1px solid var(--ap2-edge);
  background: linear-gradient(180deg, rgba(110,177,214,.06), rgba(110,177,214,.02));
  padding: 12px 14px; border-radius: 6px; color: var(--ap2-ink);
}

/* Inline emphasis */
.ap2-highlight{
  color:#cfe8f6;
  background: linear-gradient(180deg, rgba(110,177,214,.20), rgba(110,177,214,.06));
  padding: 0 .2em; border-radius: 4px;
}
.ap2-codeword{
  font-family: var(--ap2-mono);
  color:#fff; background: rgba(110,177,214,.10);
  border:1px solid rgba(110,177,214,.25);
  padding:.08em .35em; border-radius:6px; white-space:nowrap;
}

/* Footer */
.ap2-footer{
  margin-top: clamp(22px, 5vh, 40px);
  text-align: center;
  color: var(--ap2-dim);
  font-family: var(--ap2-mono);
  font-size: clamp(12px, 1.5vw, 14px);
}
.ap2-footer .ap2-divider{ margin-bottom: 10px; }

/* Links (global) */
.ap2-container a{
  color: var(--ap2-accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(110,177,214,.4);
  transition: border-color .15s ease, color .15s ease;
}
.ap2-container a:hover{
  color: #a7d7ef; border-bottom-color: rgba(110,177,214,.7);
}

/* Media tweaks */
@media (min-width: 900px){
  .ap2-container{ padding-top: calc(88px + var(--ap2-pad)); }
}

/* =============================
   Cards, grid, buttons
   ============================= */

/* Grid */
.ap2-grid{
  display:grid;
  gap: clamp(14px, 2.8vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}

/* Card (base) */
.ap2-card{
  border: 1px solid var(--ap2-edge);
  background: linear-gradient(180deg, rgba(110,177,214,.05), rgba(110,177,214,.02));
  border-radius: 12px;
  padding: 0; /* padding handled by full-link wrapper */
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow: 0 0 18px rgba(110,177,214,.08);
}

/* FULL-CARD LINK — removes underline/line + hover state */
.ap2-card { position: relative; }
.ap2-card a.ap2-card-full{
  display:block;
  color: inherit;
  text-decoration: none;       /* kill underline */
  border-bottom: none !important; /* kill global dotted rule */
  border-radius: 12px;
  padding: 18px 18px 16px;
  background: rgba(18,33,44,.28);
  border: 1px solid rgba(110,177,214,.35);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.ap2-card a.ap2-card-full:hover,
.ap2-card a.ap2-card-full:focus-visible{
  text-decoration: none;           /* ensure no underline on focus */
  border-bottom: none !important;  /* ensure no dotted line appears */
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(110,177,214,.18);
  border-color: rgba(110,177,214,.6);
  background: rgba(18,33,44,.36);
  outline: none;
}

/* prevent global link rule from drawing dotted lines on children */
.ap2-card a.ap2-card-full *,
.ap2-card a.ap2-card-full:hover *,
.ap2-card a.ap2-card-full:focus-visible *{
  border-bottom: none !important;
  text-decoration: none !important;
}

/* Card typography */
.ap2-card-header h3{
  font-family: var(--ap2-mono);
  font-size: clamp(18px, 2.4vw, 22px);
  margin: 0 0 4px 0; color:#fff;
}
.ap2-card-sub{
  font-family: var(--ap2-mono);
  font-size: clamp(12px, 1.5vw, 13px);
  color: var(--ap2-accent); opacity:.9; margin:0 0 12px 0;
}
.ap2-card-body p{ margin: 0; color: var(--ap2-muted); }

/* Decorative button look (click handled by full card link) */
.ap2-btn{
  display:inline-block; margin-top:12px;
  font-family: var(--ap2-mono); font-size:14px;
  padding: 10px 14px; border-radius:10px;
  background: radial-gradient(120% 140% at 10% 10%, rgba(110,177,214,.25), rgba(110,177,214,.1) 40%, rgba(110,177,214,.06) 100%);
  color:#cfe8f6; border:1px solid rgba(110,177,214,.45);
  pointer-events:none; /* the whole card is the link */
}

/* Access Point header font variant (optional utility) */
.ap2-accesspoint{
  font-family: var(--ap2-mono);
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(32px, 5vw, 48px);
  text-shadow: 0 0 14px rgba(110,177,214,.2);
}

/* =============================
   Reveal — Scanline Flash (Variant B)
   ============================= */

.reveal { position:relative; }
html.js .reveal:not(.is-revealed){
  opacity:.01; filter: blur(3px) saturate(.9);
  transition: opacity .20s ease-out, filter .28s ease-out;
}
.reveal::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, rgba(110,177,214,.35) 48%, transparent 100%);
  transform: translateY(8px);
}
html.js .reveal.is-revealed{ opacity:1; filter:none; }
html.js .reveal.is-revealed::before{ animation: ap2-scanline .38s ease-out; }

@keyframes ap2-scanline{
  0%{ opacity:0; transform: translateY(12px); }
  20%{ opacity:.9; }
  60%{ opacity:.25; }
  100%{ opacity:0; transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce){
  html.js .reveal, .reveal::before { transition:none !important; animation:none !important; }
  html.js .reveal:not(.is-revealed){ opacity:1; filter:none; }
}

/* =============================
   Menu/Footer Overrides
   ============================= */

body.ap2-theme .menu-link { color: var(--ap2-accent) !important; text-shadow: 0 0 4px rgba(110,177,214,.4); }
body.ap2-theme .menu-link:hover,
body.ap2-theme .menu-link.active { color: #a7d7ef !important; text-shadow: 0 0 6px rgba(110,177,214,.6); }
body.ap2-theme .hamburger { color: var(--ap2-accent); }

body.ap2-theme .scroll-footer,
body.ap2-theme .ap2-footer { color: var(--ap2-accent); }

/* Footer links */
body.ap2-theme .scroll-footer a,
body.ap2-theme .site-footer a{
  color: var(--ap2-accent) !important;
  border-bottom: 1px dotted rgba(110,177,214,.4);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
body.ap2-theme .scroll-footer a:hover,
body.ap2-theme .site-footer a:hover{
  color: #a7d7ef !important; border-bottom-color: rgba(110,177,214,.7);
}

/* Footer dividers */
body.ap2-theme .scroll-footer hr,
body.ap2-theme .scroll-footer .divider,
body.ap2-theme .scroll-footer .ap2-divider,
body.ap2-theme .site-footer hr{
  border: none !important; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--ap2-divider-a), var(--ap2-divider-b)) !important;
  box-shadow: 0 0 10px var(--ap2-edge); margin: 12px 0;
}

/* Footer buttons */
body.ap2-theme .scroll-footer .btn,
body.ap2-theme .site-footer .btn{
  border-color: rgba(110,177,214,.45) !important; color: #cfe8f6 !important;
  background: radial-gradient(120% 140% at 10% 10%, rgba(110,177,214,.22), rgba(110,177,214,.08) 40%, rgba(110,177,214,.04) 100%) !important;
}

/* Footer SVGs → cyan */
body.ap2-theme .scroll-footer svg *,
body.ap2-theme .site-footer svg *{ fill: var(--ap2-accent) !important; stroke: var(--ap2-accent) !important; opacity:.95; }

/* Inherit cyan when icons use currentColor */
body.ap2-theme .scroll-footer .icon,
body.ap2-theme .site-footer .icon,
body.ap2-theme .scroll-footer .social a,
body.ap2-theme .site-footer .social a{ color: var(--ap2-accent) !important; }

/* Kill any footer theme vars that fight us */
body.ap2-theme .scroll-footer,
body.ap2-theme .site-footer{ --text: var(--ap2-accent); --link: var(--ap2-accent); }

/* =============================
   AP II Badges
   ============================= */

/* Base pill */
.ap2-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 4px 8px;
  border-radius: 999px;
  font: 600 12px/1 var(--ap2-mono);
  color: #cfe8f6;
  background: rgba(110,177,214,.10);
  border: 1px solid rgba(110,177,214,.35);
  box-shadow: 0 4px 12px rgba(110,177,214,.12);
}

.ap2-badge svg {
  width: 14px;
  height: 14px;
  opacity: .9;
}

/* Placement wrapper — top-right of card */
.ap2-badge-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

/* Ensure card host can position badge */
.ap2-card a.ap2-card-full {
  position: relative;
}

/* Variants */
.ap2-badge--new {
  border-color: rgba(110,177,214,.55);
  color: #d9f0fb;
}

.ap2-badge--beta {
  color:#e7f0ff;
  border-color: rgba(110,177,214,.35);
}

.ap2-badge--hot {
  color:#ffd9e0;
  border-color: rgba(255, 99, 132, .45);
  background: radial-gradient(
    120% 140% at 10% 10%,
    rgba(255,99,132,.25),
    rgba(255,99,132,.10) 40%,
    rgba(255,99,132,.06) 100%
  );
}


/* --- AP II card height normalization --- */
.ap2-card{
  padding: 0;           /* outer wrapper holds no padding; link draws the chrome */
  height: 100%;
}

.ap2-card a.ap2-card-full{
  display: flex;        /* so header/body can space out */
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;    /* <- tune this to taste: 320–400px works well */
  box-sizing: border-box;
}

/* Optional: tighter variant on very small screens */
@media (max-width: 420px){
  .ap2-card a.ap2-card-full{ min-height: 320px; }
}