/* ============================================================
   MAP360 Recap Microsite — style.css   (CSS-ONLY REFRESH)
   ------------------------------------------------------------
   DROP-IN: replace assets/code/style.css with this file.
   No HTML or PHP changes needed. All your pages update at once.

   THREE THINGS TO KNOW (this is why some rules look the way they do):
   1. In Header.php this file loads BEFORE Bootstrap, so Bootstrap
      wins any equal-strength tie. To beat it, a rule either uses a
      DOUBLED selector (e.g. .navbar.bg-black = 2 classes beats 1)
      or !important.
   2. Your media tags carry inline styles (width:50%, etc.). Inline
      styles beat normal CSS, so those overrides need !important.
   3. Your <body> has background:black inline. We paint the gradient
      on a fixed layer BEHIND the content (body::before), which sits
      over the black without needing !important.

   Every !important below is there for reason 1, 2, or 3. If you ever
   flip the two <link> lines in Header.php so this file loads AFTER
   Bootstrap, most of them become optional.
   ============================================================ */

:root{
  --bg:#0e0c0d;
  --surface:#1a1618;
  --raisin:#231F20;   /* brand raisin */
  --delft:#24395B;    /* brand delft blue */
  --pitcon:#00AEED;   /* brand pitcon blue (accent) */
  --white:#FFFFFF;
  --muted:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.10);
  --ease:cubic-bezier(.16,1,.3,1);
  --tile-ratio:16/10;   /* shape of every media tile. Try 4/3, 3/2, or 16/9. */
  --content-max:1200px; /* how wide the content column can get */
}

/* ---------- YOUR ORIGINAL UTILITY CLASSES (kept, now valid CSS) ---------- */
/* (the old file used SCSS @import/@include here that never actually ran) */
.fc_white{color:#fff!important}
.fc_black{color:#000!important}
.fc_primary{color:var(--pitcon)!important}

.fw_900{font-family:'Montserrat'!important;font-weight:900!important}
.fw_700{font-family:'Montserrat'!important;font-weight:700!important}
.fw_600{font-family:'Montserrat'!important;font-weight:600!important}
.fw_500{font-family:'Montserrat'!important;font-weight:500!important}
.fw_400{font-family:'Montserrat'!important;font-weight:400!important}
.fw_300{font-family:'Montserrat'!important;font-weight:300!important}

.Rem_4{font-size:clamp(2.4rem,6vw,4rem)!important;line-height:1.05}

.padding{padding:10px 25px}
.headingPadding{padding:56px 25px 10px}
.footerPadding{padding:25px 50px}
/* ============================================================
   NO BORDERS — every visible border removed; border-radius KEPT.
   [class][class] (two parts) outranks Bootstrap's own !important border
   utilities (.border, .img-thumbnail, etc.) even though Bootstrap loads
   after this file, so borders coming from Bootstrap classes die too.
   The element list catches inline/attribute borders on unclassed tags.
   border-radius is a SEPARATE property and is not touched, so rounded
   corners stay. This is the thing that finally kills the hero outline
   no matter which element or class it was coming from.
   ============================================================ */
[class][class]{border:0!important}
img,video,a,div,span,section,figure,p,ul,li{border:0!important}
.img-thumbnail.img-thumbnail{padding:0!important;background:transparent!important}

/* base */
body{
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* guards against Bootstrap's negative row margins */
}

/* ============================================================
   0. SIDE PADDING — your pages have no .container, so Bootstrap's
      .row negative margins pull content to the screen edge. We
      cancel that, cap the width, and add gutters. The <nav> uses
      .container-fluid (not .row), so it stays correctly full-bleed.
   ============================================================ */
.row{
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:var(--content-max);
  padding-left:clamp(18px,4vw,44px);
  padding-right:clamp(18px,4vw,44px);
}

/* ============================================================
   1. PAGE BACKGROUND — the thumbnail gradient, fixed behind all content.
      (reason 3: sits over the inline black body background)
   ============================================================ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(75% 75% at 28% 18%, rgba(0,174,237,.16), transparent 62%),
    linear-gradient(135deg, var(--delft), var(--raisin));
}

/* ============================================================
   2. NAV — sticky translucent bar with a hairline underline.
      .navbar.bg-black = 2 classes, beats Bootstrap's .bg-black (reason 1)
   ============================================================ */
.navbar.bg-black{
  position:sticky;top:0;z-index:50;
  background:rgba(14,12,13,.82)!important;
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
}
.navbar .nav-link{letter-spacing:.06em;transition:opacity .25s}   /* 2-class beats .nav-link */
.navbar .nav-link:hover{opacity:.8}

/* ============================================================
   3. HERO IMAGE (optional) — full width instead of 50%.
      Only your Header hero is a `.col-md-12 img`, so this is safe.
      !important beats the inline width:50% (reason 2)
   ============================================================ */
.col-md-12 img{
  width:100%!important;height:auto;
  border-radius:16px;
  border:none!important;   /* no outline on the hero logo (beats the .border class too) */
  display:block;margin:0 auto;
}

/* ============================================================
   4. HEADINGS
   ============================================================ */
h1.fw_900,h2.fw_900{letter-spacing:-.02em;line-height:1.05}

/* ============================================================
   5. MEDIA ITEMS — full-width, rounded, framed, with a hover lift.
      Your items are `.col-sm-6` (media only; nav/footer use other cols).
      !important beats inline width:50% and border-radius:4px (reason 2)
   ============================================================ */
.col-sm-6 video,
.col-sm-6 img{
  width:100%!important;
  aspect-ratio:var(--tile-ratio)!important;  /* every tile the SAME shape... */
  height:auto!important;
  object-fit:cover!important;                /* ...cropping to fill, so heights match */
  object-position:center;
  display:block;margin:0 auto;
  border-radius:12px!important;
  background:linear-gradient(135deg,var(--delft),var(--raisin)); /* shows while media loads */
  transition:box-shadow .45s var(--ease);
}
.col-sm-6{transition:transform .45s var(--ease)}
.col-sm-6:hover{transform:translateY(-4px)}
.col-sm-6:hover video,
.col-sm-6:hover img{
  box-shadow:0 20px 44px -22px rgba(0,0,0,.85);
}

/* caption (the <p> under each media item) */
.col-sm-6 p{
  font-size:.9rem!important;
  font-weight:600!important;
  letter-spacing:.01em;
  padding-top:14px!important;
  color:#fff!important;
}

/* ============================================================
   6. DIVIDERS — your inline <hr> lines, cleaned up.
      !important beats the inline border-color / width on each <hr>
   ============================================================ */
hr{
  border:0!important;
  height:1px!important;
  background:var(--line)!important;
  opacity:1!important;
  max-width:80%;
  margin:44px auto!important;
}

/* ============================================================
   7. FOOTER — spacing + circular social buttons.
      Social anchors are the only footer links that wrap an <img>,
      so :has(img) targets them without touching the map360co.com link.
   ============================================================ */
.col-md-4 a:has(img){
  display:inline-grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  margin:0 6px;
  transition:background .3s,transform .3s var(--ease);
}
.col-md-4 a:has(img):hover{
  background:rgba(0,174,237,.10);
  transform:translateY(-2px);
}
.col-md-4 a:has(img) img{height:18px!important}   /* was 40px */

/* copyright line (the lone <p> inside a col-md-12 at the very bottom) */
.col-md-12>p[align="center"]{
  font-size:.7rem!important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.32)!important;
}

/* ============================================================
   8. POLISH
   ============================================================ */
:focus-visible{outline:2px solid var(--pitcon);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}