/* 5005, LLC custom overrides on top of the Webflow theme.
 *
 * RULES OF THE ROAD (also documented in sites/5005.com/README.md):
 *   1. NEVER use em-dashes anywhere on this site (HTML or CSS).
 *   2. The accent color is var(--accent--primary-1) which the Webflow theme
 *      defines on :root as #0047ff.
 *   3. Industry-card icons target ~36px on desktop and ~32px on phones.
 *   4. Mobile breakpoints: 991px (tablet) and 480px (phone) match Webflow.
 */

/* ============================================================
   Force `.page-wrapper` visible even without Webflow's JS bundle.
   Webflow defaults to opacity:0 on the wrapper and lets JS fade it in.
   Our hand-built pages (privacy/terms/copyright/peering/contact-thanks)
   don't load the full JS chain, so the wrapper would otherwise stay
   invisible. Belt-and-suspenders.
   ============================================================ */
.page-wrapper { opacity: 1 !important; }

/* ============================================================
   Industries: per-card icon
   The Webflow originals are flat-blue, around 64px wide. Our custom
   SVGs (in /_custom/icons/) bake stroke="#0047ff" directly because
   <img> tags cannot inherit CSS color/currentColor.
   ============================================================ */
.industry-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    display: block;
}

/* ============================================================
   /peering page table
   ============================================================ */
.peering-table { width:100%; border-collapse:collapse; margin:24px 0; }
.peering-table th, .peering-table td { text-align:left; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.1); font-family:'DM Sans',sans-serif; font-size:15px; }
.peering-table th { font-weight:600; opacity:0.7; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; }
.peering-table code { font-family:ui-monospace,'SF Mono',Menlo,Monaco,monospace; font-size:13px; background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:3px; }

/* ============================================================
   Footer bottom — copyright + legal links on one right-aligned row.
   Webflow's `grid-footer-paragrah---social-media` was 2-col 1fr/.4fr
   (text + social icons). With socials gone, override to a single flex
   row that puts copyright and legal-links together on the same line.
   ============================================================ */
.grid-footer-paragrah---social-media {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px 24px !important;
    grid-template-columns: none !important;
    grid-row-gap: 0 !important;
}
.grid-footer-paragrah---social-media > p {
    margin: 0 !important;
}
.footer-bottom .inner-container,
.footer-bottom .inner-container._450px---mbl {
    width: 100% !important;
    max-width: 100% !important;
    text-align: right !important;
}
.footer-legal-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 0;
    font-size: 14px;
}
.footer-legal-links a {
    color: inherit;
    opacity: 0.7;
    text-decoration: none;
    white-space: nowrap;
}
.footer-legal-links a:hover { opacity: 1; text-decoration: underline; }
.footer-legal-links a + a::before {
    content: "·";
    margin-right: 16px;
    opacity: 0.5;
}

/* Mobile: keep on the right but allow wrap; copyright on its own line if needed. */
@media (max-width: 767px) {
    .grid-footer-paragrah---social-media {
        justify-content: center !important;
        text-align: center !important;
    }
    .footer-bottom .inner-container,
    .footer-bottom .inner-container._450px---mbl {
        text-align: center !important;
    }
    .footer-legal-links {
        justify-content: center;
    }
}

/* ============================================================
   Section padding tightening (all viewports)
   The Webflow theme uses giant 260px / 228px paddings between
   sections. We trim them everywhere; mobile gets a further cut
   below.
   ============================================================ */
.pd-top---bottom-260px       { padding-top: 120px !important; padding-bottom: 120px !important; }
.pd-top-260---bottom-228px   { padding-top: 120px !important; padding-bottom: 100px !important; }
.pd-top-260px---bottom-260px { padding-top: 120px !important; padding-bottom: 120px !important; }
.pd-top-73px---bottom-260px  { padding-top: 60px  !important; padding-bottom: 120px !important; }
.pd-top-76px---bottom-120px  { padding-top: 60px  !important; padding-bottom: 80px  !important; }
.pd-top-76px---bottom-100px  { padding-top: 60px  !important; padding-bottom: 70px  !important; }
.pd-top-73px---bottom-140px  { padding-top: 60px  !important; padding-bottom: 90px  !important; }

/* ============================================================
   Tablet + mobile (<=991px)
   ============================================================ */
@media (max-width: 991px) {
    /* Halve already-trimmed paddings on smaller screens. */
    .pd-top---bottom-260px       { padding-top: 64px !important; padding-bottom: 64px !important; }
    .pd-top-260---bottom-228px   { padding-top: 64px !important; padding-bottom: 56px !important; }
    .pd-top-260px---bottom-260px { padding-top: 64px !important; padding-bottom: 64px !important; }
    .pd-top-73px---bottom-260px  { padding-top: 40px !important; padding-bottom: 64px !important; }
    .pd-top-76px---bottom-120px  { padding-top: 40px !important; padding-bottom: 48px !important; }
    .pd-top-76px---bottom-100px  { padding-top: 40px !important; padding-bottom: 40px !important; }
    .pd-top-73px---bottom-140px  { padding-top: 40px !important; padding-bottom: 56px !important; }

    /* Collapse 2-col grids that should stack on mobile (NOT the contact form
       which has its own grid configuration). */
    .grid-2-columns.grid-size-width---1fr---auto,
    .grid-2-columns._1-col-tablet,
    .w-layout-grid.grid-size-width---1fr---auto {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Headings: tighten so they fit on narrow viewports. */
    .display-1 { font-size: 44px !important; line-height: 1.1  !important; }
    .display-2 { font-size: 36px !important; line-height: 1.15 !important; }
    .display-3 { font-size: 26px !important; line-height: 1.2  !important; }

    /* ----------------------------------------------------------
       Home hero composition (earth photo + 5005 logo overlay)
       Desktop layout has the logo overlay floating-positioned over
       the earth image. On mobile the original Webflow layout places
       it to the right of the earth which looks broken.
       We force the floating logo overlay to sit CENTERED HORIZONTALLY
       over the earth image, and let the "About 5005" section stack
       fully BELOW the entire image composition.
       ---------------------------------------------------------- */

    /* Earth image wrapper: keep it block-level, full-width, and
       reset any translate3d the Webflow JS applies inline. */
    .floating-image.hero-image-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    .floating-image.hero-image-wrapper > img.hero-image {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Floating logo wrapper: re-center it OVER the earth image
       (absolutely positioned, horizontally centered). */
    .floating-image.hero-image-wrapper > .floating-item.home-image-shadow-down {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 8% !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 60% !important;
        text-align: center !important;
    }
    .floating-image.hero-image-wrapper > .floating-item.home-image-shadow-down .section-2 {
        display: block !important;
        text-align: center !important;
        padding: 0 !important;
    }
    .section-2 img[alt="5005 LLC"] {
        max-width: 180px !important;
        width: 80% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* The About-5005 grid is the sibling that follows the floating
       image wrapper inside the hero grid. Force it to a new row and
       a sensible top margin so nothing overlaps. */
    .mg-top-about-section {
        margin-top: 56px !important;
    }
    .w-layout-grid.grid-1-row.grid-row-60px-tablet {
        grid-row-gap: 56px !important;
    }

    /* Industry icons: a touch smaller on phones. */
    .industry-icon { width: 36px !important; height: 36px !important; }
}

/* ============================================================
   Phone (<=480px)
   ============================================================ */
@media (max-width: 480px) {
    .display-1 { font-size: 34px !important; }
    .display-2 { font-size: 28px !important; }
    .display-3 { font-size: 22px !important; }
    .section-2 img[alt="5005 LLC"] { max-width: 140px !important; }
    .floating-image.hero-image-wrapper { max-width: 100% !important; }
    .industry-icon { width: 32px !important; height: 32px !important; }

    /* Even tighter on phones. */
    .pd-top---bottom-260px       { padding-top: 48px !important; padding-bottom: 48px !important; }
    .pd-top-260---bottom-228px   { padding-top: 48px !important; padding-bottom: 40px !important; }
    .pd-top-260px---bottom-260px { padding-top: 48px !important; padding-bottom: 48px !important; }
    .pd-top-73px---bottom-260px  { padding-top: 32px !important; padding-bottom: 48px !important; }
    .pd-top-76px---bottom-120px  { padding-top: 32px !important; padding-bottom: 40px !important; }
}