/* ======================================================
   ATS Consulting - Refined Stylesheet (ats.css)
   Enhancements: subtle depth overlay, hero background pan,
   micro-interactions, scroll reveal w/ JS guard, type polish.
   ====================================================== */

/* ---------- Brand tokens (same palette) ---------- */
:root{
  --brand-primary:   #345C8A;   /* nav/hero background */
  --brand-accent:    #2F6EB0;   /* links, buttons, hovers */
  --brand-on-dark:   #FFFFFF;   /* text/icons on dark bg */

  --text:            #1B1B1B;
  --text-muted:      #515151;
  --neutral:         #4A4A4A;
  --dark:            #1F1F1F;

  --surface:         #FFFFFF;
  --surface-alt:     #F6F8FB;

  --radius:          14px;
  --maxw:            1100px;
  --transition:      0.25s ease-in-out;

  --hero-overlay:    rgba(0,0,0,.35);  /* hero-only veil */
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{
  /* Slight type polish: Inter when available, falls back cleanly */
  font:17px/1.6 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--surface);
}

/* Page-wide background image lives on body (from your base build) */
body{
  background-image: url('../img/sectionbackgroundimagelight1.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Gentle background drift: ±5% over 20s, infinite */
  animation: ats-pan 20s ease-in-out infinite;
}

/* Subtle depth overlay (very light) */
body::before{
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.10));
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:0;
}

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(16px, 2vw, 28px); /* your preferred side padding */
}
.container--narrow{ max-width:820px }
.section{ background: transparent } /* let the global bg show through */
.section + .section{ padding-top: 2vh }

/* ---------- Header / Nav ---------- */
/* ---------- Header / Nav ---------- */ 
header{
  background: var(--brand-primary);
  color: var(--brand-on-dark);
  position: sticky;   /* was: relative */
  top: 0;             /* stick to top */
  z-index: 1000;      /* ensure above content */
}

.header-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:8px;
}
.brand{ display:flex; align-items:center; gap:12px }
.brand-name{ font-size:1.75rem; font-weight:600; line-height:1 }
@media (max-width:900px){ .brand-name{ font-size:1.4rem } }
@media (max-width:600px){ .brand-name{ font-size:1.25rem } }

/* Logo sizing */
.logo{ height:100px; width:auto }
.logo--square{
  height:160px; width:160px;
  object-fit:contain; image-rendering:-webkit-optimize-contrast;
}

/* ---------- Header / Nav Links (refined hover contrast) ---------- */
header nav a{
  position: relative;
  color: var(--brand-on-dark);
  text-decoration: none;
  margin-left: 1.2rem;
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition:
    color var(--transition),
    background-size var(--transition);
}
header nav a.active{
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
}
header nav a:hover{
  color: color-mix(in oklab, var(--brand-on-dark), white 30%);
  background-size: 100% 2px;
}

/* ---------- Hero (simplified, single style) ---------- */
.hero {
  position: relative;
  background: rgba(240, 240, 240, 0.8);   /* translucent light gray */
  color: #222;
  text-align: center;
  padding: 1rem 1rem;                     /* adjust to taste */
  backdrop-filter: blur(4px);             /* subtle glass effect */
}
/* No overlay: remove the veil entirely */
.hero::after { content: none; }
/* Content stacking (in case you re-add ::after later) */
.hero__content { position: relative; z-index: 1; }
/* Typographic scale */
.hero__title { font-size: clamp(28px, 4vw, 44px); margin-bottom: .25rem; }
.hero__subtitle { color: #444; }

/* Buttons: lighter blue base, darken on hover/click */
.hero .button {
  display: inline-block;
  background: color-mix(in oklab, var(--brand-accent), white 28%);
  color: var(--brand-on-dark);
  border: none;
  border-radius: 6px;
  padding: .6rem 1.2rem;
  text-decoration: none;
  font-weight: 600;
  margin: 0 .5rem;
  transition:
    background var(--transition),
    transform .06s ease,
    box-shadow .12s ease;
}

.hero .button:hover {
  background: var(--brand-accent);               /* darken slightly on hover */
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.hero .button:active {
  background: color-mix(in oklab, var(--brand-accent), black 10%);
  transform: translateY(0);
}

/* Secondary variant: same base, just reduced emphasis */
.hero .button.secondary {
  opacity: 0.9;
}


/* ---------- Sections / Cards ---------- */
.card{
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 24px);
  margin-bottom: 20px; /* tiny lift */
  position:relative;
  z-index:1;           /* stack above body::before overlay */
}

/* ---------- List styling inside cards ---------- */
.card ol { list-style: none; padding-left: 0; margin-left: 0; }
.card ol li { margin-bottom: 0.4rem; }
/* Optional override: re-enable markers when needed */
.card ol.show-numbers { list-style: decimal; padding-left: 1.5rem; }

/* Keep list bullets aligned with paragraph text */
.card ul,
.section ul {
  list-style-position: inside;  /* markers line up with text */
  padding-left: 0;
  margin-left: 0;
}
.card ul li,
.section ul li {
  margin: 0.35em 0;
}

/* ---------- Links & Buttons ---------- */
a{
  color: var(--brand-accent);
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover{ color: color-mix(in oklab, var(--brand-accent), white 25%); }

.button{
  display:inline-block;
  background:var(--brand-accent);
  color:var(--brand-on-dark);
  padding:.6rem 1.2rem;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}
.button:hover{
  background:color-mix(in oklab, var(--brand-accent), white 15%);
  color:#f7f7f7; /* light grey for softer contrast */
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
/* Keep a single pulse definition */
@keyframes pulse{
  0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.05) }
  50%{ box-shadow:0 6px 14px rgba(0,0,0,.12) }
}
.button:hover{ animation: pulse 1.8s ease-in-out infinite }

/* ---------- Footer (JS-guarded fade-in) ---------- */
footer{
  background: var(--surface-alt);
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0;
  font-size: .9rem;
  position: relative;
  z-index: 1;
}
/* Only animate when JS is present */
.js footer{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.js footer.is-visible{ opacity: 1; transform: translateY(0); }

.last-updated {
  margin-top: 2rem;
  text-align: center;
  color: var(--text-muted, #666);
  font-size: 0.9rem;
}

/* ---------- Motion: scroll-reveal (JS-guarded) ---------- */
.reveal{
  opacity: 1;
  transform: none;
  transition: opacity 1.8s ease, transform 1.8s ease;
  will-change: transform, opacity;
}
.js .reveal{ opacity:0; transform: translateY(12px) }
.reveal.is-visible{ opacity:1; transform: translateY(0) }
/* Optional stagger */
.card.reveal:nth-child(1){ transition-delay:.05s }
.card.reveal:nth-child(2){ transition-delay:.15s }
.card.reveal:nth-child(3){ transition-delay:.25s }
.card.reveal:nth-child(4){ transition-delay:.35s }

/* ---------- Keyframes: background pan ---------- */
@keyframes ats-pan {
  0%   { background-position: 50% 50%; }
  50%  { background-position: 45% 55%; } /* ±5% */
  100% { background-position: 50% 50%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  body{ animation:none !important }
}

/* ---------- Focused on Microsoft 365 links ---------- */
.focused-list a {
  color: var(--brand-accent);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color var(--transition);
}
.focused-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background-color: currentColor;
  transition: width var(--transition);
}
.focused-list a:hover::after,
.focused-list a:focus::after { width: 100%; }
.focused-list a:hover,
.focused-list a:focus { color: color-mix(in oklab, var(--brand-accent), black 10%); }

.spaced-top { margin-top: 0.8rem !important; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 900px){
  .logo--square{ height:120px; width:120px }
}
@media (max-width: 600px){
  header nav a{ margin-left:.6rem; font-size:.95rem }
  .hero{ min-height:160px }
  .logo--square{ height:84px; width:84px }
  body{ background-attachment: scroll; } /* smoother mobile perf */
}

/* =======================================================================
   NEW: Cookie Banner (bottom slide-up)
   ======================================================================= */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999; transform: translateY(100%); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.cookie-banner.is-visible{ transform: translateY(0); opacity: 1; }
.cookie-banner__inner{
  background: #103A6B; /* darker brand blue */
  color: #fff; padding: 14px 16px;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  box-shadow: 0 -6px 18px rgba(0,0,0,.2);
}
.cookie-banner__text{ margin: 0; line-height: 1.4; }
.cookie-banner__link{ color:#fff; text-decoration: underline; }
.cookie-banner__actions{ display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner .button{ background:#fff; color:#103A6B; border:0; }
.cookie-banner .button.secondary{ background:#eceff4; color:#103A6B; border:0; }
@media (max-width: 640px){
  .cookie-banner__inner{ flex-direction: column; align-items: stretch; }
  .cookie-banner__actions{ justify-content: flex-end; }
}
/* --- Cookie banner: minimized pill state -------------------------------- */
.cookie-banner.is-minimized .cookie-banner__inner{
  display: inline-flex; gap: 8px; align-items: center;
  position: fixed; right: 16px; bottom: 16px;
  border-radius: 999px; padding: 10px 14px;
}
.cookie-banner.is-minimized .cookie-banner__text,
.cookie-banner.is-minimized .cookie-banner__actions{
  display: none;
}
.cookie-banner.is-minimized::after{
  content: "Privacy choices";
  display: inline-block; color: #fff; font-weight: 600;
}

/* =======================================================================
   NEW: Quick-help Popup (first visit, side slide-in)
   ======================================================================= */
/* --- Quick-help Popup: mid-screen, right side --------------------------- */
.help-pop{
  position: fixed; right: 16px; top: 50%;
  transform: translate(120%, -50%);  /* start off-screen, centered vertically */
  max-width: 360px; z-index: 9998; opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.help-pop.is-visible{
  transform: translate(0, -50%); opacity: 1;
}
.help-pop__body{
  background: #103A6B; color:#fff; border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.help-pop__title{ margin: 0 0 6px 0; font-size: 1.1rem; }
.help-pop__text{ margin: 0 0 10px 0; line-height: 1.4; }
.help-pop__actions{ display:flex; gap:8px; }
.help-pop .button{ background:#fff; color:#103A6B; border:0; }
.help-pop .button.secondary{ background:#eceff4; color:#103A6B; }
.help-pop__close{
  position:absolute; top:6px; right:10px; background:transparent; color:#fff;
  border:0; font-size:20px; line-height:1; cursor:pointer;
}
@media (max-width: 640px){
  .help-pop{ left: 12px; right: 12px; top: auto; bottom: 16px; transform: translateY(120%); }
  .help-pop.is-visible{ transform: translateY(0); }
}

/* ===== Contact form component (moved from HTML inline) ===== */
.form-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr 1fr;
}
.form-grid .full{ grid-column: 1 / -1; }

.form-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  font: inherit;                  /* match site type */
  font-size: 1rem;                /* comfortable text size */
  line-height: 1.2;               /* no cramped text */
  padding: .75rem .9rem;          /* ⬅ bigger, touch-friendly controls */
  border:1px solid #E6EAF0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.form-field textarea{
  min-height: 160px;              /* a bit taller than before */
  resize: vertical;
}

.help,
.note{
  font-size:.9rem;
  color: var(--text-muted);
}

.error{
  color:#a61b1b;
  font-size:.9rem;
  margin-top:.25rem;
  display:none;
}

.cta-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Mobile: single column */
@media (max-width: 800px){
  .form-grid{ grid-template-columns: 1fr; }
}