/*----------------------------------------------------------------------------------------------------
  STYLESHEET: BECKS Corporate Landing Page
  PURPOSE:    Responsive corporate landing page and policy pages.
  COMPANY:    Peter W Beck Pty Ltd
  BRAND:      BECKS™
  SERVER:     SVR-IIS01
  IIS SITE:   Default Web Site

  SOURCE:
      C:\.Source\Web\BecksCorporate\css\site.css

  DEPLOY:
      C:\inetpub\wwwroot\BecksCorporate\css\site.css

  FONTS:
      Physical: C:\inetpub\BecksSharedContent\fonts
      Virtual:  /shared/fonts/

  NOTES:
      - Uses locally hosted Roobert WOFF2 fonts.
      - No external CSS frameworks or font CDN dependencies.
      - Compatible with existing HTML and js/site.js.
      - Original BECKS logo, tagline and promotional video are unchanged.
      - Desktop header height remains constant at 85px.
      - Desktop logo width is 185px.
      - Responsive content width is limited to 1500px.
      - Native HTML5 contact accordions are retained.
      - Footer is centred on one row where screen width permits.
      - Corrects Lighthouse mobile contrast and touch-target issues.
      - Improves keyboard focus visibility.
      - Supports reduced-motion preferences.
----------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------
  00. BECKS SHARED WEB FONTS
----------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: "Roobert";
    src: url("/shared/fonts/Roobert-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Roobert";
    src: url("/shared/fonts/Roobert-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Roobert";
    src: url("/shared/fonts/Roobert-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Roobert";
    src: url("/shared/fonts/Roobert-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}


/*----------------------------------------------------------------------------------------------------
  01. DESIGN TOKENS
----------------------------------------------------------------------------------------------------*/

:root {
    /* Original BECKS brand colours */

    --pink: #e579a4;
    --pink-hover: #c95685;
    --pink-light: #f8d9e5;

    /* Accessible pink for text and interactive controls */

    --pink-accessible: #a52e66;
    --pink-accessible-hover: #85234f;

    /* Corporate colours */

    --ink: #53627c;
    --navy: #485973;
    --navy-line: rgba(255, 255, 255, 0.19);

    --white: #ffffff;

    /* Accessibility */

    --focus-ring: #a52e66;
    --focus-ring-on-dark: #ffffff;
    --touch-target: 44px;

    /* Typography */

    --font-primary: "Roobert", Arial, Helvetica, sans-serif;

    /* Layout */

    --content-max: 1500px;
    --page-gutter: 20px;

    /* Header */

    --header-height: 85px;
    --brand-width: 185px;
    --nav-font-size: 17px;
}


/*----------------------------------------------------------------------------------------------------
  02. RESET AND GLOBAL ELEMENTS
----------------------------------------------------------------------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    background: var(--white);
    color: var(--ink);

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

img,
video {
    display: block;
    max-width: 100%;
}

button {
    font-family: var(--font-primary);
    font-size: inherit;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
}

/* Shared content width */

.content-width {
    width: min(
        var(--content-max),
        calc(100% - 2 * var(--page-gutter))
    );

    margin-inline: auto;
}

/* Accessibility: skip navigation */

.skip-link {
    position: fixed;
    z-index: 100;

    top: 10px;
    left: -9999px;

    padding: 12px 16px;

    background: var(--white);
    color: #1d2638;

    border: 2px solid var(--pink-accessible);
}

.skip-link:focus {
    left: 12px;
}

/* Accessible but visually hidden content */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/*----------------------------------------------------------------------------------------------------
  03. SHARED HEADER
  PURPOSE:
      Provide the same sticky header across the homepage and policy pages.

  NOTES:
      - The shared component is injected by site.js.
      - The outer component remains sticky.
      - The inner header is positioned relative to avoid nested sticky behaviour.
      - Scrolling adds a shadow but does not change header height or logo size.
----------------------------------------------------------------------------------------------------*/

#shared-header {
    /* Reserve header height before JS injects the shared partial (prevents layout shift). */
    min-height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header {
    position: relative;
    top: auto;

    background: var(--white);
    border-bottom: 1px solid var(--pink-light);

    transition: box-shadow 180ms ease;
}

body.is-scrolled .site-header {
    box-shadow: 0 5px 18px rgba(37, 48, 70, 0.09);
}

.header-inner {
    width: min(
        var(--content-max),
        calc(100% - 2 * var(--page-gutter))
    );

    min-height: var(--header-height);
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}


/*----------------------------------------------------------------------------------------------------
  03.01 BECKS CORPORATE LOGO
----------------------------------------------------------------------------------------------------*/

.brand {
    display: block;

    width: var(--brand-width);
    flex: 0 0 var(--brand-width);

    text-decoration: none;
}

.brand img {
    display: block;

    width: 100%;
    height: auto;
}


/*----------------------------------------------------------------------------------------------------
  03.02 DESKTOP NAVIGATION
  NOTES:
      The original BECKS pink remains unchanged for the logo.
      Accessible darker pink is used for interactive navigation text.
----------------------------------------------------------------------------------------------------*/

.main-nav {
    display: flex;
    align-items: center;

    gap: clamp(18px, 2.25vw, 32px);
}

.main-nav > a,
.nav-toggle {
    color: var(--pink-accessible);

    font-family: var(--font-primary);
    font-size: var(--nav-font-size);
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;
    white-space: nowrap;

    transition: color 150ms ease;
}

.main-nav > a:hover,
.nav-toggle:hover,
.main-nav > a:focus-visible,
.nav-toggle:focus-visible {
    color: var(--pink-accessible-hover);

    text-decoration: underline;
    text-underline-offset: 5px;
}

.main-nav > a[aria-current="page"] {
    font-weight: 500;
}


/*----------------------------------------------------------------------------------------------------
  03.03 POLICIES DROPDOWN
----------------------------------------------------------------------------------------------------*/

.nav-dropdown {
    position: relative;
}

.nav-toggle {
    min-height: var(--touch-target);

    padding: 12px 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.nav-menu {
    display: none;
    position: absolute;
    z-index: 20;

    top: 100%;
    right: 0;

    min-width: 260px;
    padding: 8px 0;

    background: var(--white);

    border: 1px solid var(--pink-light);
    box-shadow: 0 14px 35px rgba(28, 34, 54, 0.14);
}

.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu,
.nav-dropdown.open .nav-menu {
    display: block;
}

.nav-menu a {
    display: flex;
    align-items: center;

    min-height: var(--touch-target);
    padding: 12px 18px;

    color: var(--ink);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    color: var(--pink-accessible-hover);
    background: #fff6f9;
}

.nav-menu a[aria-current="page"] {
    color: var(--pink-accessible);
    font-weight: 500;
    background: #fff6f9;
}

/* Shown only at mobile breakpoints */

.mobile-menu {
    display: none;
}


/*----------------------------------------------------------------------------------------------------
  04. HERO - CORPORATE INTRODUCTION AND VIDEO
----------------------------------------------------------------------------------------------------*/

.hero {
    width: min(
        var(--content-max),
        calc(100% - 2 * var(--page-gutter))
    );

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(245px, 21%) minmax(0, 1fr);

    align-items: stretch;
    gap: 0;

    padding-block: 60px 62px;
}


/*----------------------------------------------------------------------------------------------------
  04.01 CORPORATE INTRODUCTION
----------------------------------------------------------------------------------------------------*/

.hero-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: flex-start;

    gap: 28px;
    padding: 4px 38px 0 0;
}

.hero-text {
    width: 100%;
    max-width: 260px;

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    letter-spacing: 0.005em;
}

.hero-text p {
    margin: 0 0 17px;
}

.hero-text p:last-child {
    margin-bottom: 0;
}


/*----------------------------------------------------------------------------------------------------
  04.02 BECKS ANNIVERSARY TAGLINE
----------------------------------------------------------------------------------------------------*/

.tagline {
    display: block;

    width: min(245px, 100%);
    height: auto;

    object-fit: contain;
    object-position: left center;

    margin: 12px 0 20px;
}


/*----------------------------------------------------------------------------------------------------
  04.03 PROMOTIONAL VIDEO
----------------------------------------------------------------------------------------------------*/

.hero-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    aspect-ratio: 16 / 9;
    overflow: hidden;

    background: #e7e0d9;
}

.hero-visual video {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background: #e7e0d9;
}


/*----------------------------------------------------------------------------------------------------
  04.04 ACCESSIBLE VIDEO CONTROL
----------------------------------------------------------------------------------------------------*/

.video-toggle {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;

    min-width: var(--touch-target);
    min-height: var(--touch-target);

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 3px;

    background: rgba(29, 37, 51, 0.86);
    color: var(--white);

    cursor: pointer;

    font-family: var(--font-primary);
    font-size: 13px;
    line-height: 1.25;

    opacity: 0;

    transition:
        opacity 150ms ease,
        background 150ms ease;
}

.hero-visual:hover .video-toggle,
.hero-visual:focus-within .video-toggle,
.video-toggle[data-paused="true"] {
    opacity: 1;
}

.video-toggle:hover {
    background: rgba(29, 37, 51, 0.96);
}

.video-toggle:focus-visible {
    outline: 3px solid var(--focus-ring-on-dark);
    outline-offset: 3px;
}


/*----------------------------------------------------------------------------------------------------
  05. CONTACT SECTION
----------------------------------------------------------------------------------------------------*/

.contact-section {
    background: var(--navy);
    color: #f4f6fa;

    padding: 78px 0 88px;
}

.contact-layout {
    display: grid;

    grid-template-columns: minmax(210px, 29%) minmax(0, 1fr);

    align-items: start;
    gap: 6%;
}

.contact-layout h2 {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.35;
}


/*----------------------------------------------------------------------------------------------------
  05.01 CONTACT ACCORDION
  PURPOSE:
      Retain native details/summary accessibility.
      Ensure each summary has a suitable touch target.
----------------------------------------------------------------------------------------------------*/

.contact-accordion {
    border-top: 1px solid var(--navy-line);
}

.contact-item {
    border-bottom: 1px solid var(--navy-line);
}

.contact-item summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;
    min-height: 57px;

    padding: 16px 2px;

    cursor: pointer;
    list-style: none;

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    transition: color 150ms ease;
}

.contact-item summary::-webkit-details-marker {
    display: none;
}

.contact-item summary::after {
    content: "+";

    flex: 0 0 auto;

    color: #f4b2ce;

    font-size: 23px;
    font-weight: 300;
    line-height: 1;
}

.contact-item[open] summary::after {
    content: "−";
}

.contact-item summary:hover,
.contact-item[open] summary {
    color: var(--white);
}

.contact-item summary:focus-visible {
    outline: 2px solid var(--focus-ring-on-dark);
    outline-offset: -3px;
}


/*----------------------------------------------------------------------------------------------------
  05.02 CONTACT LINKS
  PURPOSE:
      Correct Lighthouse touch-target audit failures.

  CHANGES:
      - Each link receives a minimum 44px height.
      - Links are separated vertically.
      - The clickable region includes the full line height and padding.
      - Email and telephone links remain easy to select on mobile.
----------------------------------------------------------------------------------------------------*/

.contact-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;
    padding: 0 2px 22px;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.contact-lines a {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    min-height: var(--touch-target);
    padding: 9px 0;

    color: var(--white);

    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-lines a:hover,
.contact-lines a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-lines a:focus-visible {
    outline: 2px solid var(--focus-ring-on-dark);
    outline-offset: 2px;
}

/* Keep sticky header clear of Contact anchor navigation */

#contact {
    scroll-margin-top: 90px;
}


/*----------------------------------------------------------------------------------------------------
  06. SHARED CORPORATE FOOTER
  PURPOSE:
      Keep company identity and policy links on one centred row on wide screens.

  NOTES:
      - Uses the existing shared footer HTML.
      - Maintains readable typography.
      - Wraps naturally when screen width is insufficient.
      - No unnecessary divider between separate rows.
----------------------------------------------------------------------------------------------------*/

.site-footer {
    background: #f5f5f7;
    color: #202936;

    border-top: 1px solid #e5e5e8;

    padding: 25px 0;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.site-footer .footer-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    column-gap: 24px;
    row-gap: 12px;

    text-align: center;
}

.footer-identity {
    display: inline-flex;

    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px 16px;

    font-size: 14px;
    font-weight: 400;

    white-space: nowrap;
}

.footer-brand {
    white-space: nowrap;

    font-size: 15px;
    font-weight: 500;
}

.footer-brand sup {
    font-size: 9px;
    vertical-align: super;
    margin-left: 1px;
}

.footer-company {
    font-weight: 500;
}

.footer-abn {
    color: #59616e;
    font-size: 13px;
    font-weight: 400;
}

.footer-links {
    display: inline-flex;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 8px 0;

    width: auto;
    padding: 0;
    border: 0;
}

.footer-links::before {
    content: "";

    align-self: center;

    width: 1px;
    height: 19px;

    margin-right: 16px;

    background: #aab1bf;
}

.footer-links a {
    display: inline-flex;
    align-items: center;

    min-height: var(--touch-target);

    margin-right: 13px;
    padding: 8px 13px 8px 0;

    border-right: 1px solid #aab1bf;

    white-space: nowrap;

    color: #202936;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: none;
}

.footer-links a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--pink-accessible);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-links a[aria-current="page"] {
    font-weight: 500;
}


/*----------------------------------------------------------------------------------------------------
  07. POLICY PAGE TYPOGRAPHY
----------------------------------------------------------------------------------------------------*/

.policy-hero {
    background: var(--navy);
    color: var(--white);

    padding: 55px 0;
}

.policy-hero h1 {
    margin: 0;

    font-family: var(--font-primary);
    font-size: clamp(27px, 3vw, 35px);
    font-weight: 400;
    line-height: 1.25;
}

.policy-content {
    max-width: 950px;

    padding: 46px 0 85px;

    color: #323c50;

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;

    overflow-wrap: anywhere;
}

.policy-content p {
    margin: 0 0 16px;
}

.policy-content h2,
.policy-content h3 {
    margin: 28px 0 13px;

    line-height: 1.35;
    font-weight: 500;
}

.policy-content h2 {
    font-size: 23px;
}

.policy-content h3 {
    font-size: 19px;
}

.policy-content ul,
.policy-content ol {
    padding-left: 26px;
}

.policy-content li {
    margin-bottom: 7px;
}

.policy-content a {
    color: var(--pink-accessible);
}

.policy-content a:hover,
.policy-content a:focus-visible {
    color: var(--pink-accessible-hover);
}

.policy-content table {
    display: block;

    max-width: 100%;
    overflow-x: auto;

    border-collapse: collapse;
}

.policy-content th,
.policy-content td {
    padding: 9px 12px;

    border: 1px solid #dddddd;

    text-align: left;
    vertical-align: top;
}

.policy-content th {
    font-weight: 500;
}


/*----------------------------------------------------------------------------------------------------
  08. COMPONENT FALLBACK
  PURPOSE:
      Display readable errors if shared components cannot be loaded.
----------------------------------------------------------------------------------------------------*/

.component-error {
    padding: 20px var(--page-gutter);
    font-size: 15px;
}

.component-error a {
    color: var(--pink-accessible);
}


/*----------------------------------------------------------------------------------------------------
  09. SMALL LAPTOPS AND TABLETS
  BREAKPOINT: 1150px
----------------------------------------------------------------------------------------------------*/

@media (max-width: 1150px) {

    .header-inner {
        gap: 18px;
    }

    .main-nav {
        gap: 18px;
    }

    .main-nav > a,
    .nav-toggle {
        font-size: 15px;
    }

    .hero {
        grid-template-columns: minmax(210px, 30%) minmax(0, 1fr);

        padding-block: 35px 42px;
    }

    .hero-copy {
        padding-right: 24px;
    }

    .hero-text {
        font-size: 14px;
    }

    .tagline {
        width: 205px;
        margin-bottom: 8px;
    }

    .contact-layout {
        grid-template-columns: 29% minmax(0, 1fr);
        gap: 5%;
    }

    .site-footer .footer-inner {
        column-gap: 12px;
    }

    .footer-links::before {
        display: none;
    }
}


/*----------------------------------------------------------------------------------------------------
  10. MOBILE NAVIGATION AND LAYOUT
  BREAKPOINT: 900px

  ACCESSIBILITY IMPROVEMENTS:
      - Darker pink for mobile Menu text.
      - Minimum 44px touch targets.
      - Larger clickable contact links.
      - Visible keyboard focus.
----------------------------------------------------------------------------------------------------*/

@media (max-width: 900px) {

    /* Header */

    .header-inner {
        min-height: 84px;

        position: relative;
        gap: 18px;
    }

    .brand {
        width: 160px;
        flex: 0 0 160px;
    }

    /* Mobile menu button */

    .mobile-menu {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 10px;

        min-width: var(--touch-target);
        min-height: var(--touch-target);

        margin-left: auto;
        padding: 10px 14px;

        border: 1px solid #c9a0b5;
        border-radius: 3px;

        background: var(--white);
        color: var(--pink-accessible);

        font-family: var(--font-primary);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;

        cursor: pointer;
    }

    .mobile-menu:hover,
    .mobile-menu:focus-visible {
        color: var(--pink-accessible-hover);
        border-color: var(--pink-accessible-hover);
    }

    /* Collapsible navigation */

    .main-nav {
        display: none;
        position: absolute;
        z-index: 25;

        top: 100%;
        left: 0;
        right: 0;

        padding: 13px 18px;

        background: var(--white);
        border: 1px solid #eeeeee;

        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);

        flex-direction: column;
        align-items: stretch;

        gap: 6px;
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav > a,
    .nav-toggle {
        display: flex;
        align-items: center;

        min-height: var(--touch-target);

        padding: 10px 0;

        font-size: 15px;
    }

    /* Policy submenu */

    .nav-menu {
        position: static;

        min-width: 0;
        padding-left: 10px;

        border: 0;
        box-shadow: none;
    }

    .nav-menu a {
        min-height: var(--touch-target);
        padding-block: 12px;
    }

    /* Hero: video above introduction */

    .hero {
        width: 100%;

        display: flex;
        flex-direction: column;

        padding: 0 0 36px;
    }

    .hero-visual {
        order: 0;

        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .hero-copy {
        order: 1;

        gap: 20px;

        padding: 29px var(--page-gutter) 0;
    }

    .hero-text {
        max-width: 590px;

        font-size: 15px;
        line-height: 1.55;
    }

    .tagline {
        width: 205px;
        margin: 5px 0 0;
    }

    /* Video control remains visible on touch devices */

    .video-toggle {
        opacity: 1;

        right: 10px;
        bottom: 10px;

        min-height: var(--touch-target);

        font-size: 12px;
    }

    /* Contact section */

    .contact-section {
        padding: 48px 0 62px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .contact-layout h2 {
        font-size: 25px;
    }

    .contact-item summary {
        min-height: 57px;
        font-size: 15px;
    }

    .contact-lines {
        font-size: 14px;
    }

    .contact-lines a {
        min-height: 48px;
    }

    #contact {
        scroll-margin-top: 84px;
    }

    /* Policy pages */

    .policy-hero {
        padding: 36px 0;
    }

    .policy-content {
        padding-top: 28px;
    }
}


/*----------------------------------------------------------------------------------------------------
  11. NARROW MOBILE DEVICES
  BREAKPOINT: 650px
----------------------------------------------------------------------------------------------------*/

@media (max-width: 650px) {

    .site-footer {
        padding: 25px 0 30px;
    }

    .site-footer .footer-inner {
        gap: 14px;
    }

    .footer-identity {
        white-space: normal;
    }

    .footer-links {
        row-gap: 10px;
    }

    .footer-links a {
        white-space: normal;
    }
}


/*----------------------------------------------------------------------------------------------------
  12. VERY SMALL DEVICES
  BREAKPOINT: 380px
----------------------------------------------------------------------------------------------------*/

@media (max-width: 380px) {

    #shared-header { min-height: 72px; }

    .header-inner {
        min-height: 72px;
    }

    .brand {
        width: 130px;
        flex-basis: 130px;
    }

    .mobile-menu {
        padding-inline: 11px;
    }

    #contact {
        scroll-margin-top: 72px;
    }
}


/*----------------------------------------------------------------------------------------------------
  13. TOUCH AND HOVER BEHAVIOUR
  PURPOSE:
      Prevent hover-only behaviour from interfering with touch navigation.
----------------------------------------------------------------------------------------------------*/

@media (hover: none) {

    .nav-dropdown:hover:not(.open):not(:focus-within) .nav-menu {
        display: none;
    }

    .video-toggle {
        opacity: 1;
    }
}


/*----------------------------------------------------------------------------------------------------
  14. REDUCED MOTION
  PURPOSE:
      Respect visitor preferences for reduced animation.

  NOTES:
      CSS cannot stop an HTML video from playing.
      The existing site.js must continue handling the video playback preference.
----------------------------------------------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .site-header,
    .main-nav > a,
    .nav-toggle,
    .contact-item summary,
    .video-toggle {
        transition: none;
    }

    .video-toggle {
        opacity: 1;
    }
}