/*!
 * Hallens — Mobile Redesign Layer (Phase 1.5)
 * --------------------------------------------------------------
 * Loaded after dist/styles/main-*.css. Active only below 992px.
 * Customer feedback (draft3.png) addressed:
 *   1. Layout matches draft more closely
 *   2. Header hero image visible
 *   3. Hero text + CTAs visible (was collapsed to 0x0)
 *   4. Trust strip injected (60+ / ADR / ISO) — see base.php
 *   5. Services limited to 4 on mobile
 *   6. OM OSS section hidden on mobile
 *   7. Footer restyled with location grid + clean addresses
 *
 * Brand tokens:
 *   --brand-primary:   #0091fe   (cyan, primary CTA)
 *   --brand-secondary: #02134a   (navy, headings, dark sections)
 *   --line:            #e4e6eb   (card border)
 *
 * Bump cache version in lib/setup.php enqueue when editing.
 */

@media (max-width: 991.98px) {

  /* =========================================================
     1. HEADER / TOP BAR
     ========================================================= */
  header.header-bar .container .navbar {
    display: none !important;
  }
  header.header-bar .container .navbar-toggler.hidden-md-up,
  header.header-bar .container .navbar-toggler {
    display: flex !important;
  }
  header.header-bar {
    box-shadow: none;
    border-bottom: 1px solid #e4e6eb;
  }
  header.header-bar .container {
    padding: 12px 18px;
    align-items: center;
  }
  header.header-bar .container .logo {
    width: 110px;
    height: 34px;
    margin: 0;
  }
  header.header-bar .container .navbar-toggler {
    width: 38px;
    height: 38px;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    padding: 0;
    background: #ffffff;
    /* CRITICAL: stack the 3 icon-bars vertically. Without flex-direction:column
       they line up horizontally (default flex row) and the hamburger looks broken. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  header.header-bar .container .navbar-toggler .icon-bar {
    background-color: #02134a;
    width: 18px;
    height: 2px;
  }
  .container-wrapper {
    padding-top: 58px;
  }

  /* =========================================================
     2. HERO / INTRO  (.intro)
     Aggressive override: the existing desktop layout uses
     position:absolute on .intro-left and .intro-right with
     a complex overlay pattern that collapses to 0x0 when we
     try to ease it for mobile. So we force-flatten the entire
     subtree to a clean block flow, then style each part.
     ========================================================= */
  .intro,
  .intro .container,
  .intro .intro-content,
  .intro .intro-content-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    position: static !important;
    margin: 0 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
  .intro {
    background: #02134a !important;  /* navy panel under the image */
  }
  .intro .container {
    padding: 0 !important;
  }

  /* Truck image strip on top.
     The ACF image field for the homepage intro currently points to
     intro-structure.jpg (a wood-pattern texture), which doesn't match
     the prototype's truck hero. Override with the truck image bundled
     in the theme. !important is required because the ACF image URL is
     applied as inline style on the element. To replace later, swap this
     URL or set the ACF "flx_intro_text_background" field to a truck
     image and remove the override. */
  .home .intro .intro-left {
    background-image: url("../images/mobile-hero.png") !important;
  }
  .intro .intro-left {
    position: relative !important;
    width: 100% !important;
    height: 260px !important;  /* taller to host the title overlay */
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
  }
  /* Stronger bottom gradient so the title sitting at the lower edge
     reads clearly against any image content. */
  .intro .intro-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 19, 73, 0) 45%, rgba(2, 19, 73, 0.65) 100%);
    pointer-events: none;
  }

  /* Title overlay — moved into .intro-left by the inline JS in base.php
     (homepage + mobile only). Sits at the bottom-left of the hero image. */
  .intro .intro-left .mobile-hero-title {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    margin: 0;
    color: #ffffff;
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-transform: none;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45);
    z-index: 2;
  }

  /* Hide .intro-right entirely on mobile — .intro-left already shows
     a hero image; the slider/video stage on .intro-right just
     duplicates content and breaks layout. */
  .intro .intro-right {
    display: none !important;
  }

  /* Navy text panel below the image — body copy + CTAs.
     Title is moved out of here into .intro-left by the inline JS in base.php.
     IMPORTANT: matches the parent compiled rule's specificity (.intro .intro-content
     .intro-content-col with !important) so we beat it via source order. The original
     rule has margin: 50px 0px 50px 0px !important which creates the 50px gap. */
  .intro .intro-content .intro-content-col,
  .intro .intro-content-col {
    background-color: #02134a !important;
    background-image: none !important;
    padding: 14px 22px 18px !important;  /* tight: text starts just below image */
    margin: 0 !important;                  /* kill the 50px top+bottom margin */
    color: #ffffff !important;
  }
  .intro .intro-content-col h1,
  .intro .intro-content-col h2,
  .intro .intro-content-col .h1,
  .intro .intro-content-col .h2 {
    /* Fallback when JS hasn't moved the title (cached page, JS off, etc.).
       Keeps the title visible inside the panel. */
    color: #ffffff !important;
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    text-transform: none;
    font-weight: 700;
  }
  .intro .intro-content-col p {
    margin: 0 0 22px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    font-weight: bold;
  }
  .intro .intro-content-col p span,
  .intro .intro-content-col h1 span,
  .intro .intro-content-col h2 span {
    /* Wipe inline font-weight: 400 spans the editor adds (overrides bold h1) */
    font-weight: inherit !important;
    color: inherit !important;
  }
  /* Skip the duplicate "second-context" hero block on mobile */
  .intro.second-context {
    display: none !important;
  }

  /* Hero CTAs: cyan primary + navy ghost secondary, stacked, full-width */
  .intro .intro-content-col .btn,
  .intro .intro-content-col a.btn {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    margin: 0 0 10px !important;
    text-transform: none !important;
    min-height: 50px !important;
    text-align: left;
  }
  .intro .intro-content-col .btn:last-child {
    margin-bottom: 0 !important;
  }
  .intro .intro-content-col .btn.btn-primary,
  .intro .intro-content-col .btn.btn-white {
    background-color: #0091fe !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 16px rgba(0, 145, 254, 0.25);
  }
  .intro .intro-content-col .btn.btn-secondary {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: none !important;
  }
  .intro .intro-content-col .btn.btn-white.ghost,
  .intro .intro-content-col .btn.btn-secondary.ghost,
  .intro .intro-content-col .btn.ghost {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    box-shadow: none !important;
  }
  /* Append a chevron-right on hero CTAs to mirror the prototype */
  .intro .intro-content-col .btn::after {
    content: "›";
    display: inline-block;
    margin-left: auto;
    padding-left: 12px;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    opacity: 0.85;
  }

  /* Mobile-hero CTAs — created by the inline JS in base.php.
     Kept on a separate class chain so they don't collide with the
     theme's .btn / Bootstrap button cascade. */
  .intro .intro-content-col .mobile-hero-cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-radius: 10px;
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
    margin: 0 0 10px;
    min-height: 50px;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
  }
  .intro .intro-content-col .mobile-hero-cta:last-child {
    margin-bottom: 0;
  }
  .intro .intro-content-col .mobile-hero-cta::after {
    content: "›";
    display: inline-block;
    margin-left: auto;
    padding-left: 12px;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    opacity: 0.85;
  }
  .intro .intro-content-col .mobile-hero-cta.primary {
    background-color: #0091fe;
    color: #ffffff;
    border: none;
    box-shadow: 0 6px 16px rgba(0, 145, 254, 0.25);
  }
  .intro .intro-content-col .mobile-hero-cta.primary:hover,
  .intro .intro-content-col .mobile-hero-cta.primary:focus {
    background-color: #0078d4;
    color: #ffffff;
    text-decoration: none;
  }
  .intro .intro-content-col .mobile-hero-cta.ghost {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: none;
  }
  .intro .intro-content-col .mobile-hero-cta.ghost:hover,
  .intro .intro-content-col .mobile-hero-cta.ghost:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
  }

  /* Eliminate any margin/whitespace between hero and trust strip
     (item #5 in the customer feedback). */
  .intro,
  .intro.dark {
    margin: 0 !important;
  }
  .trust-strip-mobile {
    margin: 0 !important;
  }

  /* =========================================================
     3. TRUST STRIP  (.trust-strip-mobile)
     Injected by base.php on the homepage. JS in base.php moves
     it to right after the .intro element on load.
     ========================================================= */
  .trust-strip-mobile {
    display: block;
    background: #02134a;
    color: #ffffff;
    /* White divider line separating trust strip from hero panel
       (per customer feedback v1.0.6 #2 — was black in v1.0.5). */
    border-top: 1px solid #ffffff;
    padding: 0;
    margin: 0;
  }
  .trust-strip-mobile__inner {
    display: flex;
    justify-content: space-between;
    padding: 18px 18px 20px;  /* tighter top spacing to remove perceived gap */
    max-width: 100%;
  }
  .trust-strip-mobile__item {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 6px;
  }
  .trust-strip-mobile__item + .trust-strip-mobile__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.10);
  }
  .trust-strip-mobile__item strong {
    display: block;
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin: 0;
  }
  .trust-strip-mobile__item span {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.60);
    margin-top: 6px;
    font-weight: 600;
  }

  /* =========================================================
     4. BLOCKS / SECTIONS  (.block)
     ========================================================= */
  .block {
    padding: 40px 0;
  }
  .block.padding-zero {
    padding: 0;
  }
  .block.block-title {
    padding: 16px 0;
  }
  .block .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* HIDE OM OSS section on mobile (only .block.dark on the homepage).
     Customer requirement #6. */
  .home .block.dark,
  body.home section.block.dark {
    display: none !important;
  }

  /* Eyebrow / section titles */
  .titles {
    margin-bottom: 18px;
    text-align: center;
  }
  .titles h1,
  .titles h2,
  .titles .h1,
  .titles .h2 {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    text-transform: uppercase;
    color: #02134a;
  }
  .titles h6,
  .titles .h6,
  .titles small {
    display: block;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    color: #02134a;
    margin-bottom: 6px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* =========================================================
     5. SERVICES — limited to 4 tiles, 2x2 grid
     ========================================================= */
  .slider.service-carousel.services.hidden-xs-down {
    display: none !important;
  }
  .row.services.hidden-sm-up,
  .row.services {
    display: flex !important;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
    margin-top: 18px;
  }
  .row.services .service,
  .row.services .col-lg-3,
  .row.services .col-md-6,
  .row.services .col-sm-6,
  .row.services .col-xs-12 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 5px;
    margin-bottom: 0;
  }
  /* Customer requirement #5: only 4 services on mobile. */
  .row.services .service:nth-child(n+5),
  .row.services > div:nth-child(n+5) {
    display: none !important;
  }
  .row.services .service .service-item {
    height: 100%;
  }
  .row.services .service-item .service-item-image {
    display: none;
  }
  .row.services .service-item .service-item-info {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 140px;
    padding: 22px 14px 20px;
    background: #ffffff;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    box-shadow: none;
    text-decoration: none;
    height: 100%;
  }
  .row.services .service-item .service-item-info:hover,
  .row.services .service-item .service-item-info:focus {
    border-color: #02134a;
    box-shadow: 0 4px 14px rgba(2, 19, 73, 0.08);
  }
  .row.services .service-item .service-item-info .service-icon {
    height: 40px;
    width: auto;
    margin: 0;
    display: block;
  }
  .row.services .service-item .service-item-info .service-item-info-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #02134a;
    margin: 0;
    text-transform: none;
    text-align: center;
  }

  /* The "Se våra tjänster" CTA below the services row.
     Customer feedback v1.0.5 #3: text + chevron centered, not split. */
  .row.services + .text-center .btn,
  .service-carousel + .text-center .btn,
  .text-center .btn.btn-secondary {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px !important;
    background-color: #0091fe !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    box-shadow: 0 6px 16px rgba(0, 145, 254, 0.25);
    min-height: 50px;
    margin-top: 8px;
  }
  .row.services + .text-center .btn::after,
  .service-carousel + .text-center .btn::after,
  .text-center .btn.btn-secondary::after {
    content: "›";
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    opacity: 0.85;
  }

  /* =========================================================
     6. SERVICE ICONS BLOCK  (.service-icons)
     ========================================================= */
  .row.service-icons {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
  }
  .row.service-icons .service-icon-col {
    flex: 0 0 50% !important;
    max-width: 50%;
    padding: 12px 5px;
    margin-bottom: 0;
  }
  .row.service-icons .service-icon-col .service-icon {
    height: 40px;
    width: auto;
    margin: 0 auto 12px;
    display: block;
  }
  .row.service-icons .service-icon-col .service-icons-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    margin: 0;
    text-align: center;
  }
  .block.secondary .row.service-icons .service-icon-col .service-icons-title,
  .block.primary .row.service-icons .service-icon-col .service-icons-title {
    color: #ffffff;
  }

  /* =========================================================
     7. EDGE BLOCKS  (.edge-blocks)
     ========================================================= */
  .edge-blocks .edge-block-left,
  .edge-blocks .edge-block-right {
    width: 100%;
    float: none;
  }
  .edge-blocks .edge-block-container {
    height: auto;
    padding: 0 22px;
  }
  .edge-blocks .edge-block-container .middle {
    padding: 32px 0 !important;
  }
  .edge-blocks .edge-block-left .edge-block-container .middle,
  .edge-blocks .edge-block-right .edge-block-container .middle {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* =========================================================
     8. IMAGE-TEXT  (.row.image-text)
     ========================================================= */
  .row.image-text {
    margin-left: -10px;
    margin-right: -10px;
  }
  .row.image-text > [class*="col-"] {
    padding: 10px;
  }
  .row.image-text .image-text-image {
    display: block;
    margin-bottom: 8px;
  }

  /* =========================================================
     9. IMAGE GALLERY
     ========================================================= */
  .row.image-gallery {
    margin-left: -5px;
    margin-right: -5px;
  }
  .row.image-gallery .column,
  .row.image-gallery .image {
    padding: 5px;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* =========================================================
     10. MAP
     ========================================================= */
  .acf-map {
    height: 260px;
  }

  /* =========================================================
     11. BUTTONS — generic mobile sizing
     ========================================================= */
  .btn {
    font-size: 0.85rem;
    padding: 0.85rem 1.5rem;
    min-height: 48px;
    border-radius: 8px;
    line-height: 1.2;
  }

  /* =========================================================
     12. FORMS  (.wpcf7-form)
     ========================================================= */
  .wpcf7 .wpcf7-form .wpcf7-form-control-wrap input,
  .wpcf7 .wpcf7-form .wpcf7-form-control-wrap textarea {
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    line-height: 1.4;
    letter-spacing: 0.02em;
  }
  .wpcf7 .wpcf7-form .wpcf7-form-control-wrap input:focus,
  .wpcf7 .wpcf7-form .wpcf7-form-control-wrap textarea:focus {
    border-color: #0091fe;
    box-shadow: inset 0 1px 1px rgba(0, 145, 254, 0.075), 0 0 6px rgba(0, 145, 254, 0.4);
  }
  .wpcf7 .wpcf7-form .wpcf7-form-control-wrap textarea {
    min-height: 100px;
  }
  .wpcf7 .wpcf7-form input[type="submit"] {
    width: 100% !important;
    margin: 12px 0 0 0;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: #0091fe;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 145, 254, 0.25);
    text-transform: none;
    letter-spacing: 0.02em;
    min-height: 50px;
  }
  .block.secondary .wpcf7 .wpcf7-form .wpcf7-form-control-wrap input,
  .block.secondary .wpcf7 .wpcf7-form .wpcf7-form-control-wrap textarea {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
  }
  .block.secondary .wpcf7 .wpcf7-form .wpcf7-form-control-wrap input::placeholder,
  .block.secondary .wpcf7 .wpcf7-form .wpcf7-form-control-wrap textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
  }

  /* =========================================================
     13. FOOTER  (.footer + .bottom)
     Restyled per customer feedback to match draft3.png:
       - White background (already)
       - Logo or eyebrow at top
       - 2-column "Här finns vi" location grid (Göteborg | Stenungsund)
       - Each location: city heading (navy bold), then address, email, phone
       - Subtle navy bottom strip
     ========================================================= */
  .kontakt .footer,
  .contact .footer,
  .footer {
    padding: 32px 0 8px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-top: 1px solid #e4e6eb;
  }
  .footer .container {
    padding-left: 22px;
    padding-right: 22px;
  }
  .footer .module {
    padding: 18px 0 !important;
    border-bottom: 0 !important;
  }
  .footer .module:first-of-type {
    padding-top: 0 !important;
  }
  /* Top-level row: stack the 2 main footer modules (Adress | Kontakt-form) */
  .footer .module.row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 14px;
  }
  .footer .module.row > [class*="col-"]:last-child {
    margin-bottom: 0;
    /* Horizontal divider above KONTAKT (the second column in the footer module row).
       Customer feedback v1.0.5 #5. */
    border-top: 1px solid #e4e6eb;
    padding-top: 20px;
    margin-top: 8px;
  }
  /* "Här finns vi" / "Adress" eyebrow styling */
  .footer .footer-headings {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: #02134a;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 14px;
  }
  /* The address column splits into 2 sub-cols (Göteborg | Stenungsund).
     Force the 2-col layout (it's .row > .col-6 + .col-6 already, but
     Bootstrap's stacking can leak in). */
  .footer .module .row {
    display: flex !important;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
  }
  .footer .module .row > .col-6 {
    flex: 0 0 50% !important;
    max-width: 50%;
    padding: 0 8px;
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .footer .module .row > .col-6 p {
    margin: 0 0 8px;
    line-height: 1.5;
  }
  .footer .module .row > .col-6 p:first-child b,
  .footer .module .row > .col-6 p:first-child strong {
    display: block;
    color: #02134a;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 6px;
    text-transform: none;
    letter-spacing: 0;
  }
  .footer .module .row > .col-6 a {
    color: #414a5a;
    text-decoration: none;
    word-break: break-word;
  }
  .footer .module .row > .col-6 a:hover {
    color: #0091fe;
  }
  /* Phonelist scroll-table */
  .footer .module .scroll-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .footer .module .scroll-table .table {
    font-size: 0.85rem;
    min-width: 480px;
  }

  /* Bottom credit strip */
  .bottom {
    padding: 14px 22px;
    background-color: #02134a !important;
  }
  .bottom .credit {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
  }

  /* =========================================================
     14. MOBILE SLIDE-OUT MENU  (.mobile-menu)
     Width MUST match the Slideout JS padding (260) defined in
     dist/scripts/main-*.js — otherwise the menu is wider than the
     panel slide and the leftmost portion gets clipped behind the
     panel. Customer feedback v1.0.7: "menu cut at half the screen".
     ========================================================= */
  .mobile-menu {
    width: 260px !important;
    padding: 60px 22px 30px;
  }
  .mobile-menu .menu-section {
    padding: 0;
  }
  .mobile-menu .menu-section .menu-section-list li {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mobile-menu .menu-section .menu-section-list li:last-child {
    border-bottom: 0;
  }
  .mobile-menu .menu-section .menu-section-list li a {
    padding: 16px 0;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border-radius: 0;
    text-transform: none;
    font-weight: 600;
    min-height: 52px;
    display: flex;
    align-items: center;
  }
  .mobile-menu .menu-section .menu-section-list li:hover > a,
  .mobile-menu .menu-section .menu-section-list li:focus > a,
  .mobile-menu .menu-section .menu-section-list li.active > a {
    background-color: transparent;
  }
  .mobile-menu .menu-section .menu-section-list .menu-item-has-children .nav-arrow {
    width: 52px;
    height: 52px;
    line-height: 52px;
  }
  .mobile-menu .menu-section .menu-section-list .dropdown-menu {
    padding-left: 12px;
  }
  .mobile-menu .menu-section .menu-section-list .dropdown-menu a.dropdown-item {
    font-size: 0.9rem;
    padding: 12px 8px;
    color: rgba(255, 255, 255, 0.78);
  }

  /* =========================================================
     15. TYPOGRAPHY CLAMP  (last so it overrides nested rules)
     ========================================================= */
  h1, .h1 { font-size: 1.55rem; }
  h2, .h2 { font-size: 1.45rem; }
  h3, .h3 { font-size: 1.30rem; }
  h4, .h4 { font-size: 1.15rem; }

  body, .container-wrapper {
    overflow-x: hidden;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    max-width: 100%;
  }
}

/* Touch-only tap highlight */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, input[type="submit"] {
    -webkit-tap-highlight-color: rgba(0, 145, 254, 0.15);
  }
}