/* ============================================================
   AP BRIDGE: BASE RESPONSIVE FIXES
   ============================================================ */
/* ============================================================
   AP BRIDGE: BRAND COLOUR SYSTEM (NEON BLUE + DARK MODE)
   ============================================================ */
/* ---------- Brand Variables ---------- */
:root {
    /* Core background colours */
    --apbridge-bg-dark: #0A0A0C;

    /* Deep studio black */
    --apbridge-bg-panel: #121214;

    /* Slightly lighter panels */
    --apbridge-bg-soft: #1A1B1E;

    /* Soft dark grey for sections */
    --apbridge-bg-trueblack: #000000;

    /* Pure black */
    /* Text colours */
    --apbridge-text-white: #F5F7FA;

    /* Clean white */
    --apbridge-text-grey: #C3C6CC;

    /* Soft grey for paragraphs */
    --apbridge-text-muted: #8F9299;

    /* Muted grey for small text */
    /* Neon blue brand colours */
    --apbridge-blue: #4DB8FF;

    /* Light neon blue (logo glow) */
    --apbridge-blue-strong: #0094FF;

    /* Strong electric blue */
    --apbridge-blue-dark: #003B66;

    /* Deep blue for contrast */
    /* Accent (optional) */
    --apbridge-accent: #00C8FF;

    /* Cyan accent for highlights */
    /* ========================================================
       NEW: Two distinct lighter blues for ACTIVE + HOVER
       ======================================================== */
    --apbridge-blue-active: #5FC9FF;

    /* lighter soft neon blue */
    --apbridge-blue-hover: var(--apbridge-blue-strong);

    /* brighter electric blue */

    /* Soft blue-tinted mid-tone, for content sections that need to sit
       between near-white and the medium grey used on Legal Notice/Privacy */
    --apbridge-bg-tint: #C7D6E0;
}

/* ---------- Background Utility Classes ---------- */
.bg-apbridge-dark {
    background-color: var(--apbridge-bg-dark);
}

.bg-apbridge-panel {
    background-color: var(--apbridge-bg-panel);
}

.bg-apbridge-soft {
    background-color: var(--apbridge-bg-soft);
}

.bg-apbridge-trueblack {
    background-color: var(--apbridge-bg-trueblack);
}

.bg-apbridge-blue {
    background-color: var(--apbridge-blue);
}

.bg-apbridge-blue-strong {
    background-color: var(--apbridge-blue-strong);
}

.bg-apbridge-blue-dark {
    background-color: var(--apbridge-blue-dark);
}

.bg-apbridge-accent {
    background-color: var(--apbridge-accent);
}

.bg-apbridge-tint {
    background-color: var(--apbridge-bg-tint);
}

/* ---------- Text Utility Classes ---------- */
.text-apbridge-white {
    color: var(--apbridge-text-white);
}

.text-apbridge-grey {
    color: var(--apbridge-text-grey);
}

.text-apbridge-muted {
    color: var(--apbridge-text-muted);
}

.text-apbridge-blue {
    color: var(--apbridge-blue);
}

.text-apbridge-blue-strong {
    color: var(--apbridge-blue-strong);
}

.text-apbridge-blue-dark {
    color: var(--apbridge-blue-dark);
}

.text-apbridge-accent {
    color: var(--apbridge-accent);
}

/* ============================================================
   AP BRIDGE: GLOBAL FONT
   ============================================================ */
body,
.navbar,
.nav-link,
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif;
}

/* ============================================================
   AP BRIDGE: FIXED NAVBAR
   ============================================================ */
/* Make navbar fixed at the top */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    /* stays above everything */
}

/* Prevent content from sliding under fixed navbar */
body {
    padding-top: 130px;

    /* matches --apbridge-navbar-height below */
    background-color: var(--apbridge-bg-dark);
    margin: 0;
}

/* Anchor-link targets: offset every section by the fixed navbar's height,
   so clicking a nav link doesn't hide the section's heading underneath it */
section[id] {
    scroll-margin-top: 130px;
}

/* Make navbar toggler icon visible on dark backgrounds */
.navbar-toggler-icon {
    filter: invert(1);
}

/* ============================================================
   AP BRIDGE: NAVBAR STYLING
   ------------------------------------------------------------
   Uses Bootstrap's own "navbar-expand-lg" component (see the HTML —
   the <nav> has that class) rather than any custom breakpoint.
   Earlier versions of this file tried several custom breakpoints to
   fix nav overflow, none of which worked, because the actual cause
   was structural: Bootstrap's .container-xxl (which the navbar sits
   inside) caps at 1320px wide on any screen 1400px+ and never grows
   further, so a flat row of 7 links + the language switcher could
   never fit no matter which breakpoint was chosen. The real fix was
   reducing the nav to 4 top-level items (Home, Services, About,
   Contact) by moving the 4 service pages into a "Services" dropdown
   — see the dropdown styling further down this section. With only 4
   items, Bootstrap's stock 992px breakpoint has plenty of room.
   ============================================================ */
/* Logo size */
.apbridge-logo {
    height: 82px;
    width: auto;
}

/* Groups the collapsible nav links, the language switcher, and the
   hamburger button together on the right side of the navbar. The
   switcher and hamburger are direct children of this wrapper (not
   inside .navbar-collapse), so the switcher stays visible at every
   screen size — including on mobile, where the nav links collapse
   behind the hamburger but the switcher does not. flex-wrap lets the
   nav-links row (which has flex-basis:100% from Bootstrap) drop onto
   its own line underneath switcher+hamburger once expanded on mobile,
   rather than fighting them for space on the same row. */
.apb-navbar-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    justify-content: flex-end;
}

/* Bootstrap's .navbar-collapse has flex-grow:1 built in by default, which
   makes it greedily expand to fill all remaining horizontal space in this
   wrapper — at desktop width, that pushes the language switcher out past
   the fold, wrapping it onto its own line even though there's visibly
   room for it. navbar-expand-lg's own CSS resets flex-basis but not
   flex-grow, so this needs its own explicit override: only take up the
   space its actual content (the nav links) needs, so the switcher can
   sit on the same line right after it. Belt and braces: flex-wrap is
   also forced to nowrap at desktop widths, as a second, independent
   guarantee — between the two, wrapping is not possible at >=992px
   regardless of which flex property was actually the culprit. Only
   applied at >=992px, matching when Bootstrap treats the collapse as an
   inline row rather than a full-width dropdown panel; flex-wrap stays
   "wrap" below that (the mobile default set on .apb-navbar-controls
   above), which is what lets the nav-links panel drop onto its own line
   below the switcher+hamburger row once opened on mobile. */
@media (min-width: 992px) {
    .apb-navbar-controls {
        flex-wrap: nowrap;
    }

    .apb-navbar-controls .navbar-collapse {
        flex-grow: 0;
    }
}

/* Navbar links */
.navbar-nav .nav-link {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--apbridge-text-white) !important;
    margin-left: 20px;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
    /* Multi-word items (e.g. "About" / "À propos") must never break
       onto two lines, at any screen size — including the collapsed
       mobile menu. */
    white-space: nowrap;
}

/* Collapsed menu (tablet/mobile, below 992px): stack links vertically
   with clear spacing and full-width tap targets, rather than the
   cramped inline row Bootstrap defaults to. Text still never wraps —
   see the white-space: nowrap on .navbar-nav .nav-link above, which
   deliberately has no override here. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        margin-left: 0;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar-collapse {
        margin-top: 1rem;
    }
}

/* Hover colour: brighter blue */
.navbar-nav .nav-link:hover {
    color: var(--apbridge-blue-hover) !important;
}

/* Active link: softer blue */
.navbar-nav .nav-link.active {
    color: var(--apbridge-blue-active) !important;
}

/* Navbar brand text (if used instead of image) */
.navbar-brand {
    font-weight: 700;
    color: var(--apbridge-blue) !important;
    letter-spacing: 0.5px;
}

/* ============================================================
   AP BRIDGE: SERVICES DROPDOWN
   ------------------------------------------------------------
   Bootstrap ships default dropdown-menu styling (white background,
   dark text) which would look out of place against this site's dark
   navbar. These rules restyle it to match: near-black panel colour,
   accent-blue border/hover, matching the rest of the brand. The
   dropdown itself is Bootstrap's standard JS-driven component
   (data-bs-toggle="dropdown" in the HTML) — opens on click/tap, which
   behaves identically on desktop, tablet and mobile.
   ============================================================ */
.apb-dropdown-menu {
    background-color: var(--apbridge-bg-panel);
    border: 1px solid rgba(77, 184, 255, 0.35);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 8px 0;
    margin-top: 8px;
}

.apb-dropdown-item {
    color: var(--apbridge-text-white);
    font-weight: 600;
    padding: 10px 20px;
}

.apb-dropdown-item:hover,
.apb-dropdown-item:focus {
    background-color: rgba(77, 184, 255, 0.15);
    color: var(--apbridge-blue-hover);
}

/* On the collapsed mobile menu, the dropdown expands inline (Bootstrap's
   default behaviour there is already correct) — no extra rules needed,
   this comment just documents that it's intentional, not an oversight */

/* ============================================================
   AP BRIDGE: HEADER & FOOTER POLISH (NEW)
   ============================================================ */
/* Subtle blue glow line under the navbar, echoing the neon logo */
.apb-navbar {
    border-bottom: 1px solid rgba(77, 184, 255, 0.25);
    box-shadow: 0 2px 20px rgba(0, 148, 255, 0.18);
}

/* Matching glow line above the footer, so header and footer bookend the page */
.apb-footer {
    border-top: 1px solid rgba(77, 184, 255, 0.25);
    box-shadow: 0 -2px 20px rgba(0, 148, 255, 0.1);
}

/* Footer links: soft grey by default, brighten to brand blue on hover */
.apb-footer-link {
    color: var(--apbridge-text-grey);
    text-decoration: none;
    transition: color 0.2s ease;
}

.apb-footer-link:hover {
    color: var(--apbridge-blue-hover);
    text-decoration: underline;
}

/* Bottom copyright/legal bar */
.apb-footer-bottom {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   AP BRIDGE: LANGUAGE SWITCHER (EN | FR)
   ------------------------------------------------------------
   A small pill toggle so the site's bilingual nature is obvious
   at a glance, not just discoverable. Text-only by design (no
   flags): flags represent countries, not languages, and French
   is spoken well beyond France just as English is spoken well
   beyond the UK, so a flag risks looking like a country selector
   rather than a language one.
   ============================================================ */
.apb-lang-switch {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(77, 184, 255, 0.35);
    border-radius: 999px;
    padding: 3px;
    margin-left: 24px;
    /* Small gap before the hamburger button on mobile/tablet, where the
       toggler sits immediately to the switcher's right */
    margin-right: 16px;
    flex: 0 0 auto;
}

.apb-lang-switch a {
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: var(--apbridge-text-grey);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.apb-lang-switch a.active {
    background-color: var(--apbridge-blue-strong);
    color: #fff !important;
    box-shadow: 0 0 12px rgba(0, 148, 255, 0.5);
}

.apb-lang-switch a:hover:not(.active) {
    color: var(--apbridge-blue-hover);
}

/* Small bilingual note used near the switcher on both language versions */
.apb-lang-note {
    font-size: 0.78rem;
    color: var(--apbridge-text-muted);
}

/* ============================================================
   AP BRIDGE: BLUE BORDER STYLE (NEW)
   ============================================================ */
.apb-blue-border {
    border: 3px solid rgba(77, 184, 255, 0.45);
    border-radius: 6px;
}

/* Secondary CTA buttons (See examples, Book a session, WhatsApp, Instagram):
   use the brand's brighter neon-blue accent rather than the muted
   --bs-primary colour, so they read as clearly distinct from the solid
   "Request a quote" button even once hovered.
   ------------------------------------------------------------
   Fix (Aug 2026): at rest, these were a fully transparent "ghost"
   button — blue text/border directly on whatever the section
   background was. On the light blue-tinted sections (--apbridge-bg-tint,
   #C7D6E0) that measured a ~2.1:1 contrast ratio against the blue
   text/border — well under WCAG's 3:1 minimum for UI components, and
   noticeably harder to read on mobile. Added a near-white background
   fill (brings it to ~3.1:1, clearing that bar) and bumped font-weight
   to 600 for better real-world perceived legibility on top of the
   colour fix — bold text alone would NOT have fixed the contrast
   (contrast ratio is pure colour maths, unaffected by weight, and
   these buttons are 14px/btn-sm, too small to qualify for WCAG's
   relaxed "large text" bold threshold of 18.66px+ anyway). Stays
   visually lighter than the solid "Request a quote" button (white
   fill vs solid strong-blue fill), so the CTA hierarchy is unchanged. */
.apb-btn-accent-outline {
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--apbridge-blue-strong) !important;
    border-color: var(--apbridge-blue-strong) !important;
    border-width: 2px;
    font-weight: 600;
}

.apb-btn-accent-outline:hover,
.apb-btn-accent-outline:focus {
    background-color: var(--apbridge-blue-strong) !important;
    border-color: var(--apbridge-blue-strong) !important;
    color: #fff !important;
}

/* Solid primary buttons (Request a quote, Explore Services): the default
   Bootstrap hover only darkens --bs-primary slightly, which barely shows
   against this muted colour. Shift to the brand accent blue on hover
   instead, so it's clearly visible, with a small glow to match. */
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--apbridge-blue-strong) !important;
    border-color: var(--apbridge-blue-strong) !important;
    box-shadow: 0 4px 14px rgba(0, 148, 255, 0.35);
}

/* Plain inline text links (in body copy, not nav/footer/buttons/tiles,
   which already have their own deliberate hover treatment): same accent
   blue on hover, for consistency site-wide. */
a:not(.btn):not(.nav-link):not(.apb-footer-link):not(.apb-service-tile):hover {
    color: var(--apbridge-blue-strong) !important;
}

/* ============================================================
   AP BRIDGE: MUSIC EXAMPLES — SELF-HOSTED AUDIO CARDS (NEW)
   ============================================================ */
/* Card wrapping each native <audio> player (original songs only —
   see the comment block above the carousel markup in index.html
   for the full rights-based rule on audio vs YouTube). */
.apb-audio-card {
    min-height: 100%;
    padding-left: 56px !important;
    padding-right: 56px !important;
}

/* Style the native browser audio player to match the brand accent
   rather than the plain default grey control bar */
.apb-original-audio {
    accent-color: var(--apbridge-blue-strong);
}

/* ============================================================
   AP BRIDGE: VIDEO/MUSIC EXAMPLES CAROUSEL (NEW)
   ============================================================ */
/* Bootstrap's default carousel-control-prev/next cover 15% of the
   ENTIRE slide width each, invisibly, on top of everything else in
   the slide. That's fine over a centred video play button, but it
   overlaps the native audio player's own controls (which stretch to
   the actual edges), making its play button unclickable. Shrink the
   click zone down to a slim strip at the very edge instead. */
.carousel-control-prev,
.carousel-control-next {
    width: 48px;
}

/* Bootstrap's arrow icons are plain white SVGs with no backdrop, so
   they disappear against light content (e.g. the white audio player
   cards). Give them a permanent dark circular badge so they stay
   clearly visible regardless of what's behind them, video or audio. */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-size: 55%;
}
/* Click-to-load YouTube facade: shows a thumbnail + play button
   until clicked, so the real player only loads on demand */
.apb-video-facade {
    position: relative;
    cursor: pointer;
    background-color: var(--apbridge-bg-panel);
}

.apb-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.apb-play-btn:hover,
.apb-play-btn:focus-visible {
    background-color: var(--apbridge-blue-strong);
}

.apb-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}

/* Full overlay for videos where embedding is disabled by the rights
   holder — deliberately much more noticeable than the play button,
   so it's obvious this opens YouTube in a new tab rather than playing
   inline. */
.apb-external-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    transition: background-color 0.2s ease;
}

.apb-external-facade:hover .apb-external-overlay,
.apb-external-facade:focus-visible .apb-external-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.apb-external-label {
    font-weight: 700;
    font-size: 1rem;
    background-color: var(--apbridge-blue-strong);
    padding: 8px 20px;
    border-radius: 999px;
}

/* Service tiles on the Services grid are now clickable links through
   to their detail sections. Sit slightly faded at rest, and become
   fully visible with a lift, glow and border change on hover, focus,
   or tap (covers PC, tablet, and phone). */
.apb-service-tile {
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.apb-service-tile:hover,
.apb-service-tile:focus-visible,
.apb-service-tile:active {
    opacity: 1;
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 148, 255, 0.4);
    border-color: var(--apbridge-blue-strong);
}

/* ============================================================
   AP BRIDGE: SERVICE TILE TEXT OVERLAY
   ------------------------------------------------------------
   The big title text on each service tile's photo ("Production &
   Video" etc.) is real HTML text laid over the image with CSS, not
   baked into the image file itself. This means ONE set of tile photos
   works for both languages — only the text changes per page, exactly
   like every other piece of bilingual copy on this site. If you ever
   swap these photos, the new images should be plain/text-free, same
   800x691px dimensions, same filenames — no code changes needed here.
   apb-tile-media wraps just the <img> (not the whole card) so the
   overlay's "top: 28%" positions relative to the photo's own height,
   not the card's full height including the text block below it.
   ============================================================ */
.apb-tile-media {
    position: relative;
}

.apb-tile-overlay {
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    padding: 0 20px;
    pointer-events: none;
}

.apb-tile-overlay-text {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.9);
}