/* ============================================================
   IT DigiLit - site chrome (header, nav, footer, 404).

   The page BODIES are the existing widgets and bring their own scoped styles.
   Nothing here may leak into them, so every rule below is namespaced to the
   chrome classes and none of them touch .idl-wrap, .idl-hero or any token the
   widgets define for themselves.

   Tokens repeat the widget palette deliberately rather than importing it: the
   widgets each declare their own on their root, so there is no shared
   stylesheet to import from. If the palette moves, it moves in both places.
   ============================================================ */

/*
  Inter is here ONLY for the header nav, because that is what the live
  WordPress theme sets it in (17px / 500 / #707070, measured 2026-08-29). The
  page bodies stay on Source Sans 3. Matching the nav face is most of what
  makes the two platforms indistinguishable at a glance.
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --idl-page:#F9F9F9;
  --idl-surface:#FFFFFF;
  --idl-tint:#E7F0FC;
  --idl-border:#D9E5F4;
  --idl-border-firm:#BBD2ED;
  --idl-ink:#16263F;
  --idl-ink-soft:#43536B;
  --idl-muted:#6B7C93;
  --idl-blue:#2271B1;
  --idl-blue-deep:#1A5C93;

  /*
    Measured off the live WordPress header at 1440px on 2026-08-29:
      logo   198 x 93, 28px above and below  -> 149px band
      nav    17px Inter, weight 500, #707070
      items  Home 78 / IT Solutions 149 / About Us 105 / Contact Us 120 /
             Partners 99 / Login 75, zero gap between them (padding is inside)
      Login  is a PLAIN LINK, not a button
    These numbers are the spec. If the two headers ever disagree again,
    re-measure rather than adjusting by eye.
  */
  --idl-header-h:149px;
  --idl-nav-ink:#707070;
}

* { box-sizing:border-box; }

/* ============================================================
   117% - the whole page, one notch up.

   DT reads these pages better at 110-125% browser zoom, so the site is built
   to look that way with the browser left at 100%.

   `zoom`, not `transform: scale()`. Transform scales the painted result but
   leaves the layout box at its original size, so the page ends up with a
   permanent horizontal scrollbar and a band of dead space at the bottom. `zoom`
   scales the layout itself - which is precisely what the browser's own zoom
   control does, so the result is identical to what DT was already looking at.

   !! MEDIA QUERIES SEE THE UNZOOMED VIEWPORT. At 1.17 a 1440px window lays out
   as though it were 1231px, so every breakpoint below fires ~17% earlier than
   the raw number suggests. That is faithful to real browser zoom and is why the
   breakpoints were not "corrected" to compensate.

   !! NOT APPLIED ON PHONES. A 375px screen would lay out as 320px, which is
   narrower than anything here is designed for and would start breaking
   card grids. Phone text is already at a comfortable size.
   ============================================================ */
@media (min-width: 1024px) {
  body { zoom: 1.17; }
}

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

body {
  margin:0;
  /*
    The page GROUND is deliberately a shade deeper than the widget surface
    (--idl-page, #F9F9F9). Without that difference the container below has
    nothing to sit against and reads as an arbitrary line across the screen
    rather than a contained sheet. This is the only reason the two tones exist.
  */
  background:#EDF1F7;
  color:var(--idl-ink);
  font-family:'Source Sans 3', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the content container ---------- */

/*
  Every page body is a widget that runs edge to edge and sets its own
  background. Left alone on a full-bleed page the title block floats with
  nothing holding it, which is what made the hero read as unfinished. The shell
  gives the content a defined edge without touching a single widget rule.
*/
.idl-shell {
  /*
    !! 1160, NOT 1280, BECAUSE OF THE 117% ZOOM ABOVE.
    At zoom 1.17 a 1440px window lays out as 1231px. A 1280 max-width therefore
    exceeds the available width and the sheet fills edge to edge, losing the
    gutters that make it read as contained at all. 1160 leaves ~35px either side
    at 1440 and grows properly on wider screens.
  */
  max-width:1160px;
  margin:26px auto 0;
  background:var(--idl-page);
  border:1px solid var(--idl-border);
  border-radius:18px;
  overflow:hidden;
}

@media (max-width: 860px) {
  /* Edge to edge on a phone - a 26px gutter either side of an already narrow
     column wastes the width that matters most. */
  .idl-shell { margin:0; border-radius:0; border-left:0; border-right:0; }
}

.idl-skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--idl-blue); color:#fff; padding:12px 18px;
  font-weight:700; border-radius:0 0 8px 0;
}
.idl-skip:focus { left:0; }

/* ---------- header ---------- */

.idl-header {
  position:sticky; top:0; z-index:100;
  background:var(--idl-surface);
  border-bottom:1px solid var(--idl-border);
}
.idl-header-in {
  max-width:1400px; margin:0 auto; padding:0 40px;
  height:var(--idl-header-h);
  display:flex; align-items:center; gap:28px;
}

/*
  !!! THE LOGO FILE HAS A MIRROR REFLECTION BAKED INTO ITS BOTTOM THIRD.

  CX-57713_ITdigilit_Final.png is 641x300, and roughly the last 70px are a
  faded upside-down copy of the wordmark. The live WordPress header shows the
  whole file at a height that cuts through the middle of that reflection, which
  is what makes the logo read as doubled and half-severed.

  The mark itself ends around y=230, so the container is given the aspect ratio
  of the REAL mark (641/230) and the image is anchored to the top. The
  reflection is cropped out cleanly instead of being sliced through.

  !! DO NOT "fix" this by squashing the image to fit - object-fit:cover with
  object-position:top crops, it does not distort. Changing it to `fill` or
  dropping object-position stretches the wordmark and looks worse than the
  original problem.
*/
.idl-brand {
  display:block; flex:0 0 auto; text-decoration:none; line-height:0;
}
/*
  !! SIZED BY WIDTH, NOT HEIGHT, AND THE REASON MATTERS.

  WordPress renders the UNCROPPED file at 198x93 - which is 198 wide by 75 of
  actual mark plus 18 of reflection. This file is cropped, so matching on
  HEIGHT would render the mark at 246 wide: same height, visibly bigger logo.
  Matching on WIDTH puts the mark at exactly the size it appears live.
*/
.idl-brand img {
  display:block; width:198px; height:auto;
}
.idl-brand:focus-visible { outline:3px solid var(--idl-blue); outline-offset:4px; border-radius:4px; }

@media (max-width: 480px) {
  .idl-brand img { width:150px; }
}

/* Right-aligned, per DT: "centered or to the right" - right, because a 198px
   logo leaves an awkward hole when the nav is centred, and Login belongs at the
   far edge where people reach for it. */
.idl-nav { margin-left:auto; }
.idl-nav > ul {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:2px;
}
.idl-nav-item { position:relative; }

.idl-nav-link {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Inter', system-ui, sans-serif;   /* matches the live theme */
  font-size:17px; font-weight:500; line-height:1;
  color:var(--idl-nav-ink); text-decoration:none;
  padding:13px 16px; border-radius:8px;
  background:none; border:0; cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.idl-nav-link:hover { color:var(--idl-ink); background:var(--idl-tint); }
.idl-nav-link:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }
.idl-nav-link[aria-current="page"] { color:var(--idl-blue); }

.idl-caret {
  width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.idl-nav-toggle[aria-expanded="true"] .idl-caret { transform:rotate(-135deg) translateY(-1px); }

/*
  Login is a BLUE BUTTON on both platforms, by DT's decision 2026-08-29. The
  live WordPress header currently renders it as a plain grey link like every
  other item, so THIS is the one place Azure deliberately leads and WordPress
  has to follow - the ElementsKit menu item needs the same treatment.
*/
.idl-nav-cta { margin-left:10px; }
.idl-nav-cta .idl-nav-link {
  color:#fff; background:var(--idl-blue);
  padding:13px 26px; border-radius:9px; font-weight:600;
}
.idl-nav-cta .idl-nav-link:hover { background:var(--idl-blue-deep); color:#fff; }

/* ---------- mega menu ---------- */

/*
  Three columns under one "IT Solutions" trigger, matching the live ElementsKit
  menu. Anchored to the HEADER rather than the trigger so the panel can be wider
  than the button without hanging off the right edge of the viewport.
*/
.idl-mega {
  display:none;
  position:absolute; top:calc(100% + 1px); left:0; right:0;
  background:var(--idl-surface);
  border-top:1px solid var(--idl-border);
  border-bottom:1px solid var(--idl-border);
  box-shadow:0 16px 36px rgba(22,38,63,.09);
  padding:30px 26px 32px;
}
.idl-has-sub.is-open .idl-mega {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:34px;
  max-width:1240px; margin:0 auto;
}
/* The panel is full-bleed, so it is positioned against the header, not the li */
.idl-header { position:sticky; }
.idl-has-sub { position:static; }

.idl-mega-col ul { list-style:none; margin:0; padding:0; }
.idl-mega-h {
  font-family:'Archivo', sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--idl-blue);
  margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--idl-border);
}
.idl-mega-col a {
  display:block; padding:9px 10px; border-radius:7px;
  font-size:15.5px; font-weight:600; color:var(--idl-ink-soft); text-decoration:none;
}
.idl-mega-col a:hover { background:var(--idl-tint); color:var(--idl-ink); }
.idl-mega-col a:focus-visible { outline:3px solid var(--idl-blue); outline-offset:-2px; }
.idl-mega-col a[aria-current="page"] { color:var(--idl-blue); background:var(--idl-tint); }

/* ---------- burger ---------- */

.idl-burger {
  display:none; margin-left:auto;
  width:44px; height:44px; padding:11px;
  background:none; border:1px solid var(--idl-border); border-radius:9px; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.idl-burger span { display:block; height:2px; background:var(--idl-ink); border-radius:2px; }
.idl-burger:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; }

@media (max-width: 900px) {
  .idl-header-in { gap:14px; }
  .idl-burger { display:flex; }
  .idl-nav {
    display:none; position:absolute; top:var(--idl-header-h); left:0; right:0;
    background:var(--idl-surface); border-bottom:1px solid var(--idl-border);
    padding:12px 20px 20px; max-height:calc(100vh - var(--idl-header-h)); overflow-y:auto;
  }
  .idl-nav.is-open { display:block; }
  .idl-nav > ul { flex-direction:column; align-items:stretch; gap:2px; }
  .idl-nav-link { width:100%; justify-content:space-between; padding:13px 12px; font-size:16.5px; }
  .idl-mega {
    position:static; display:none; min-width:0; box-shadow:none;
    border:0; border-left:2px solid var(--idl-border); border-radius:0;
    margin:2px 0 6px 12px; padding:2px 0 2px 8px;
  }
  .idl-has-sub.is-open .idl-mega { display:block; grid-template-columns:1fr; }
  .idl-nav-cta { margin-top:8px; }
  .idl-nav-cta .idl-nav-link { justify-content:center; }
}

/* ---------- footer ---------- */

.idl-footer {
  background:var(--idl-surface);
  border-top:1px solid var(--idl-border);
  margin-top:60px;
}
.idl-footer-in {
  max-width:1240px; margin:0 auto; padding:44px 26px 34px;
  display:grid; grid-template-columns:minmax(240px,1fr) 2fr; gap:36px;
}
.idl-foot-brand {
  font-family:'Archivo', sans-serif; font-weight:800; font-size:20px;
  letter-spacing:-.02em; color:var(--idl-ink); margin:0 0 8px;
}
.idl-foot-note { margin:0; font-size:15px; color:var(--idl-muted); max-width:38ch; }

.idl-foot-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px; }
.idl-foot-h {
  font-family:'Archivo', sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--idl-ink);
  margin:0 0 11px;
}
.idl-foot-cols a {
  display:block; font-size:15px; color:var(--idl-ink-soft);
  text-decoration:none; padding:4px 0;
}
.idl-foot-cols a:hover { color:var(--idl-blue); text-decoration:underline; }
.idl-foot-cols a:focus-visible { outline:3px solid var(--idl-blue); outline-offset:2px; border-radius:4px; }

.idl-footer-legal { border-top:1px solid var(--idl-border); }
.idl-footer-legal-in {
  max-width:1240px; margin:0 auto; padding:18px 26px;
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px 22px;
}
.idl-footer-legal p {
  margin:0; font-size:13.5px; color:var(--idl-muted);
}
.idl-foot-legal-links { display:flex; flex-wrap:wrap; gap:18px; }
.idl-foot-legal-links a {
  font-size:13.5px; color:var(--idl-muted); text-decoration:none;
}
.idl-foot-legal-links a:hover { color:var(--idl-blue); text-decoration:underline; }
.idl-foot-legal-links a:focus-visible {
  outline:3px solid var(--idl-blue); outline-offset:2px; border-radius:4px;
}

@media (max-width: 760px) {
  .idl-footer-in { grid-template-columns:1fr; gap:28px; }
}

/* ---------- 404 ---------- */

.idl-404 { background:var(--idl-page); padding:90px 26px 110px; }
.idl-404-in { max-width:1140px; margin:0 auto; }
.idl-404-code {
  font-family:'Archivo', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:.14em; color:var(--idl-blue); margin:0 0 10px;
}
.idl-404 h1 {
  font-family:'Archivo', sans-serif; font-weight:800;
  font-size:clamp(28px,4.2vw,44px); letter-spacing:-.022em; line-height:1.1;
  margin:0 0 12px; color:var(--idl-ink);
}
.idl-404 p { margin:0 0 22px; font-size:17.5px; color:var(--idl-ink-soft); max-width:56ch; }
.idl-404-btn {
  display:inline-block; background:var(--idl-blue); color:#fff;
  font-family:'Archivo', sans-serif; font-weight:700; font-size:15.5px;
  padding:13px 26px; border-radius:9px; text-decoration:none;
}
.idl-404-btn:hover { background:var(--idl-blue-deep); }