/* =====================================================================
   DSIT shared site styles -- used by EVERY page.
   Change the header / footer look here once and it changes on all pages.
   (Header links and footer text live in assets/dsit-site.js)
   ===================================================================== */

  /* ================= FOOTER: one style for every page (same as the Project page) ================= */
  .site-footer{ padding:28px 22px 18px; }
  .footer-grid{ display:flex; flex-direction:column; gap:22px; padding-block:3px; border-top:1px solid var(--line, #E3E2DB); border-bottom:1px solid var(--line, #E3E2DB); margin-bottom:10px; }
  .footer-columns{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:10px 26px; }
  .footer-col{ width:auto; max-width:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; }
  .footer-col-head{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#000; margin-bottom:12px; }
  .footer-link{ display:inline-block; color:#CC5500; text-decoration:none; font-size:12.5px; line-height:1.6; opacity:1; }
  .footer-link:hover{ opacity:1; color:var(--accent, #DDAA45); }
  .footer-copy-row{ overflow-x:auto; margin-bottom:4px; }
  .footer-copy{ font-size:10px; line-height:1.6; letter-spacing:.1em; color:var(--muted-2, #8D9199); text-transform:uppercase; white-space:normal; }
  .footer-copy b{ color:var(--muted-2, #8D9199); font-weight:600; }
  .footer-copyright{ font-size:10px; letter-spacing:.1em; color:var(--muted-2, #8D9199); text-transform:uppercase; }
  .footer-bottom{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
  .footer-lines{ flex:1; min-width:0; }
  .footer-bottom .footer-signature{ display:block; width:auto; flex:none; opacity:.85; }
  @media (max-width:640px){ .footer-bottom{ flex-direction:column; gap:12px; } }

  /* ================= HEADER + FOOTER on phones & tablets ================= */

  .m-burger{ display:none; }
  @media (max-width:900px){
    /* tighter page edges so the header has room */
    .wrap{ padding-left:14px !important; padding-right:14px !important; }
    .page-head{ width:auto !important; z-index:300 !important; }

    .topnav{
      display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center;
      column-gap:10px; row-gap:12px; padding:2px 0 0 !important; position:relative; z-index:300 !important;
    }
    .topnav > .brand-wrap, .topnav > .brand-link{ grid-column:1; grid-row:1; min-width:0; }
    .topnav .brand-wrap{ align-items:center; }
    .topnav .brand-link{ gap:9px; min-width:0; }
    .topnav .brand-logo{ height:clamp(30px, 9.5vw, 42px); flex:none; }
    .topnav .wordmark{
      font-size:clamp(9.5px, 3.05vw, 13px); letter-spacing:.1em; white-space:nowrap; line-height:1.3;
    }
    .topnav .tagline{ font-size:clamp(12px, 4.05vw, 17px); white-space:nowrap; margin-top:2px; line-height:1.2; }

    /* menu (hamburger) button -- same look as the account/quotation icons */
    .m-burger{
      grid-column:2; grid-row:1; display:inline-flex; align-items:center; justify-content:center;
      width:42px; height:42px; padding:0; border-radius:12px; cursor:pointer; flex:none;
      border:1.5px solid rgba(204,85,0,.45); background:#FFF6EF; color:#CC5500;
      -webkit-tap-highlight-color:transparent;
    }
    .m-burger svg{ width:22px; height:22px; }
    .m-burger .ic-close{ display:none; }
    .topnav.m-open .m-burger{ background:#CC5500; color:#fff; border-color:#CC5500; }
    .topnav.m-open .m-burger .ic-open{ display:none; }
    .topnav.m-open .m-burger .ic-close{ display:block; }

    /* row 2: search field + account / quotation icons */
    .topnav > .hdr-right{
      grid-column:1 / -1; grid-row:2; width:100% !important; position:static;
      display:grid !important; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; row-gap:6px; align-items:center;
    }
    .hdr-right > .hdr-row2{ grid-column:1; grid-row:1; min-width:0; }
    .hdr-right > #dsitIconsSlot{ grid-column:2; grid-row:1; justify-self:end; }
    .hdr-right > .hdr-who{ grid-column:1 / -1; grid-row:2; justify-self:end; max-width:none; }
    .hdr-search input{ height:40px; }
    .topnav .dsit-icons{ gap:8px; margin-left:0; align-self:center; }
    .topnav .dsit-ico{ width:40px; height:40px; }

    /* the page links: hidden until the menu icon is tapped, then a drop-down list */
    .hdr-right > .top-nav{
      display:none !important; position:absolute; z-index:200; left:0; right:0; top:calc(100% + 8px);
      flex-direction:column; align-items:stretch; gap:0; padding:6px;
      background:#fff; border:1px solid #E3E2DB; border-radius:14px;
      box-shadow:0 18px 40px -12px rgba(20,20,19,.28), 0 2px 6px rgba(20,20,19,.06);
    }
    .topnav.m-open .hdr-right > .top-nav{ display:flex !important; animation:mNavIn .18s ease-out; }
    @keyframes mNavIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
    .hdr-right > .top-nav .btn-comet{
      display:flex !important; width:100%; box-sizing:border-box; margin:0 !important;
      padding:14px 14px !important; font-size:15px !important; border-radius:10px;
      transform:none !important; box-shadow:none !important; border:none !important; background:transparent;
    }
    .hdr-right > .top-nav .btn-comet + .btn-comet{ border-top:1px solid #EFEEE8 !important; border-radius:0; }
    .hdr-right > .top-nav .btn-comet.current{ background:rgba(13,43,107,.07) !important; border-radius:10px; }
    .hdr-right > .top-nav .btn-comet::after{ display:none; }

    .separator-3d{ margin-top:14px; }

    /* footer text (phones & tablets), on 3 separate rows:
       row 1 bold "DSIT delivers integration, installation and configuration"
       row 2 "of Low Current Systems ... actually operates."
       row 3 copyright */
    .footer-copy{ font-size:3px !important; letter-spacing:.08em; line-height:1.6 !important; }
    .footer-copy b{ display:block; font-size:5px; line-height:1.5; }
    .footer-copy br{ display:none; }
    .footer-copyright{ display:block; font-size:3px !important; letter-spacing:.08em; margin-top:2px; }
    /* Quick Links */
    .footer-col-head{ font-size:3px !important; margin-bottom:6px !important; }
    .footer-link{ font-size:4.25px !important; }
    .footer-col{ gap:4px 11px !important; }
    .footer-columns{ gap:5px 13px !important; }
  }
  @media (max-width:640px){
    /* Emad & Zaid signature: right side, smaller (32px -> 25.6px -> 20.5px) */
    .footer-bottom .footer-signature, .botrow .footer-signature{
      height:20.5px !important; width:auto !important; align-self:flex-end; margin-left:auto;
    }
  }
  @media (prefers-reduced-motion: reduce){ .topnav.m-open .hdr-right > .top-nav{ animation:none; } }

  /* ================= HOME page ================= */

  /* phones & tablets: show the 6 service cards (they were hidden) as a 2-column grid
     under the 3D logo, and remove the empty space around the logo */
  @media (max-width:980px){
    .orbit-row{ display:grid !important; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:40px; margin-top:22px; }
    .orbit-row > .scene-col{ grid-column:1 / -1; order:-1; }
    .orbit-row > .pic-col{ display:contents !important; }
    .orbit-row > .scene-col{ margin-bottom:6px; }
    .orbit-row .side-pic{ height:118px; }
    .orbit-row .side-pic-label{ white-space:normal; font-size:11px; line-height:1.35; }
    .orbit-row .side-pic-front{ padding:30px 10px 10px; }
  }
  @media (max-width:760px){
    .scene-wrap{ min-height:300px !important; }
    .orbit-row .side-pic{ height:104px; }
    .orbit-row .side-pic-icon{ width:50px; height:50px; }
    .orbit-row .side-pic-icon svg{ width:26px; height:26px; }
    .orbit-row .side-pic-label{ font-size:10px; }
  }

  /* ================= PROJECT DETAILS page ================= */

  @media (max-width:640px){
    /* hover/tap title on the top picture: fully inside the picture, wraps instead of being cut */
    .detail-hero-hover-title{
      left:4% !important; right:4%; max-width:none !important;
      transform:translateY(-50%) !important; white-space:normal !important;
      justify-content:center; text-align:center; font-size:15px !important; line-height:1.3;
      padding:10px 14px !important;
    }
  }
  @media (max-width:900px){
    /* photo description under the pictures: 3 sizes smaller */
    .filmstrip-caption-cat, .filmstrip-caption-title, .filmstrip-caption-count{ font-size:7.5px !important; line-height:1.3; }
    /* buttons under the pictures: "Discuss a Similar Project" + "View Products" removed on phones;
       Previous / Next 50% smaller and dark blue */
    .detail-cta{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
    .detail-cta > .detail-cta-group:not(.prev-next-nav){ display:none !important; }
    .detail-cta > .prev-next-nav{ display:contents !important; }
    .detail-cta .prev-next-link{
      width:auto !important; min-width:85px; height:18px; box-sizing:border-box; margin:0;
      padding:0 8px !important; justify-content:center; gap:3px; border-radius:5px;
      font-size:5.75px !important; white-space:nowrap;
      color:#0D2B6B !important; border:1px solid #0D2B6B !important; background:transparent;
    }
    .detail-cta .prev-next-link:hover{ color:#0D2B6B !important; border-color:#0D2B6B !important; background:rgba(13,43,107,.06); }
    .detail-cta .prev-next-link.prev{ grid-column:1; justify-self:start; }
    .detail-cta .prev-next-link.next{ grid-column:2; justify-self:end; }
    .detail-cta .prev-next-link span svg{ width:6px; height:6px; }
  }

  /* ================= PRODUCTS page ================= */

  @media (max-width:900px){
    /* pagination buttons: 34px -> 30.6px -> 27.5px (10% + 10% smaller) */
    .page-btn{ min-width:27.5px !important; height:27.5px !important; padding:0 8px !important; font-size:9.7px !important; border-radius:6px; }
    .pagination-row{ gap:4px; }
  }