/* ==================================================
   EB Cyber — Dense spacing, sticky footer, banner logo sizing
   + Centered section content + Tablet centring/widths
   + Fluid typography for 4K
   + Touch-safe hover gating
   ================================================== */

/* ---------- 0) Tokens ---------- */
:root{
  --primary:#78909c; --primary-dark:#4b636e; --accent:#51A8DB;
  --bg:var(--primary-dark); --text:#dedee0; --muted:#c6cacf; --border:#2b3a41; --card:#3d5058;

  /* Dense spacing */
  --s1:.25rem;     /* 4px  */
  --s2:.375rem;    /* 6px  */
  --s3:.625rem;    /* 10px */
  --s4:1rem;       /* 16px */
  --s5:1.25rem;    /* 20px */
  --s6:1.75rem;    /* 28px */

  --radius:12px;

  /* Populated by JS; fallbacks until JS runs */
  --header-h: 72px;
  --footer-h: 44px;
}

@media (not (prefers-color-scheme: dark)){
  :root{ --bg:#f4f5f6; --text:#333; --muted:#5b6166; --border:#d2d6da; --card:#dddee0; }
}

/* ---------- 1) Base ---------- */
*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  overflow:hidden;                 /* Mobile/Tablet: page locked; main scrolls */
}

body{
  font-family:Poppins,"Open Sans",sans-serif,system-ui;

  /* FLUID BODY TYPE (4K-friendly) */
  font-size: clamp(16px, 0.3vw + 0.45rem, 19px);
  line-height:1.5;

  background:var(--bg); color:var(--text);
  min-height:100vh;
  display:grid; grid-template-rows:auto 1fr auto;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* Focus ring only when navigating with keyboard (body.kbd toggled by JS) */
body.kbd .site-header nav a:focus-visible,
body.kbd .site-header nav button:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  border-color:var(--accent);
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- 2) Site Header (sticky on mobile/tablet) ---------- */
.site-header{
  position: sticky; top:0; z-index:10;
  inline-size:100%; max-inline-size:100%;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:stretch; justify-content:space-between;
  gap:var(--s3); padding:var(--s3);
}

/* Banner logo sizing:
   - Mobile: 100%
   - Tablet (>=600px): 50%
   - Desktop (>=992px): 33.333% */
.site-header > svg.logo{
  display:block; inline-size:100%; block-size:auto; aspect-ratio:7.7/1.2; max-inline-size:none;
}
@media (min-width:600px){ .site-header > svg.logo{ inline-size:50%; } }
@media (min-width:992px){ .site-header > svg.logo{ inline-size:33.333%; } }

/* Header nav (mobile/tablet visible; hidden on desktop later) */
.site-header nav{ display:flex; align-items:center; justify-content:center; gap:var(--s3); }
.site-header nav ul{ margin:0; padding:0; list-style:none; display:flex; gap:var(--s2); }

/* Nav chips (dense) */
.site-header nav a, .site-header nav button{
  font-weight:600; background:transparent; color:inherit; border:1px solid var(--border);
  padding:var(--s2) var(--s3); border-radius:999px; cursor:pointer;
  outline:none; -webkit-tap-highlight-color:transparent; position:relative;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* ❗Apply hover styles only on devices that actually support hover */
@media (hover: hover) and (pointer: fine){
  .site-header nav a:hover, .site-header nav button:hover{
    border-color:var(--accent); color:var(--accent);
    background: color-mix(in srgb, var(--card) 18%, transparent);
  }
}

/* Active underline */
.site-header nav a[aria-current="page"],
.site-header nav a.is-active,
.site-header nav button[aria-current="true"],
.site-header nav button.is-active{
  border-color:var(--accent); color:var(--accent);
}
.site-header nav a[aria-current="page"]::after,
.site-header nav a.is-active::after,
.site-header nav button[aria-current="true"]::after,
.site-header nav button.is-active::after{
  content:""; position:absolute; inset-inline:var(--s3); bottom:calc(var(--s2)/2);
  height:2px; background:var(--accent); border-radius:2px;
}

/* ---------- 3) Panels (mobile/tablet) ---------- */
main#panels{
  position:relative; z-index:0;
  min-block-size:0; overflow-x:auto; overflow-y:hidden;
  display:flex; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;

  /* exact free space -> visible viewport - header - footer (prevents double count) */
  block-size: calc(100svh - var(--header-h) - var(--footer-h));
  padding-bottom: 0; /* no extra padding on mobile/tablet */
}

main#panels > section{
  min-inline-size:100%; block-size:100%; min-block-size:0; scroll-snap-align:start;
  padding:var(--s4) var(--s3);
  display:flex; flex-direction:column; gap:var(--s3);

  /* Consistent centred look for all section content */
  text-align:center;
}

/* Section titles are redundant with sticky nav on small screens: hide them */
@media (max-width: 991.98px){
  main#panels > section > header{ display:none; }
}

/* ---------- 3a) Headings & text (FLUID, 4K-friendly) ---------- */
main#panels > section > header h2{
  margin:0;
  font-size: clamp(1.15rem, 1.1vw + 0.6rem, 1.55rem);
  line-height:1.25;
}
section > article > header h3{
  margin:0;
  font-size: clamp(1.0rem, 0.6vw + 0.45rem, 1.2rem);
}
main#panels p{ margin:0; }

/* Super small devices */
@media (max-width:360px){
  main#panels > section{ padding:var(--s3) var(--s2); gap:var(--s2); overflow-y:auto; }
  main#panels p, main#panels li{ font-size:0.94rem; line-height:1.45; }
}

/* ---------- 4) Tablet centring (>=600px & <992px) ----------
   - Banner logo centered at 50%
   - Nav centered at 50%
   - Main centered with max width 66vw (panels still fill that container) */
@media (min-width: 600px) and (max-width: 991.98px){
  .site-header{ align-items:center; }              /* centre header contents */

  .site-header > svg.logo{
    inline-size:50%;
    margin-inline:auto;                            /* centre logo block */
  }
  .site-header nav{
    inline-size:50%;
    margin-inline:auto;                            /* centre nav block */
    justify-content:center;
  }
  main#panels{
    max-inline-size:66vw;                          /* centre the swipe container */
    margin-inline:auto;
  }
  main#panels > section{
    min-inline-size:100%;                          /* each panel fills container width */
  }
}

/* ---------- 5) Laptop / Desktop grid ---------- */
@media (min-width: 992px){
  /* Re-enable vertical page scroll; sticky footer is still visible */
  html, body{ overflow-y:auto; overflow-x:hidden; }

  .site-header nav{ display:none; } /* per your design */

  main#panels{
    overflow:visible;
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:var(--s3); padding:var(--s3);
    scroll-snap-type:none;
    align-items:start;

    padding-bottom: 0;            /* no extra padding (prevents double count) */
    block-size: auto;             /* page can scroll */
  }

  /* Cap card height so inner content scrolls (prevents overflow) */
  main#panels > section{
    max-height: calc(100dvh - var(--header-h) - var(--footer-h) - var(--s4));
    border:1px solid var(--border); border-radius:var(--radius); background:var(--card);
    padding:var(--s3);
    overflow:auto;
  }

  /* Maintain comfortable text measure on large displays */
  main#panels > section > p{ max-width:60ch; margin-inline:auto; }

  section > article{
    border:1px solid var(--border); border-radius:var(--radius);
    background: color-mix(in srgb, var(--card) 85%, transparent);
    padding:var(--s3);
  }
}

/* ≥ 1280px: let cards fit content nicely */
@media (min-width:1280px){
  main#panels > section{ max-height:none; height:auto; overflow:visible; }
}

/* ---------- 6) Sticky footer (all viewports; compact & wraps) ---------- */
footer{
  position: sticky; bottom:0; z-index:11;
  background: var(--bg);

  /* tight + safe area */
  padding: calc(var(--s2) + env(safe-area-inset-bottom)) var(--s3) var(--s2);

  font-size: 0.82rem; line-height:1.35;
  border-top:1px solid var(--border);
  color: color-mix(in srgb, var(--text) 70%, var(--muted));

  /* Allow wrapping on mobile; prevent spill-off */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
footer p, footer address{ margin: 0; }
footer address{ font-style: normal; }

/* Avoid :target flash */
main#panels > section:target{ outline:none; }