/*
Theme Name: TMD Enterprise
Theme URI: https://tmd.ca
Author: TMD
Version: 1.0
*/

/* ==========================================================================
   1. Reset & Typography Foundation
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: #19323C;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: "Test Söhne";
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    /* font-family: ; */
    color: #000;
}

ul[role='list'],
ol[role='list'],
ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s ease;
}

a:hover {
    text-decoration: underline;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    display: block;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    border: none;
    background: none;
    outline: none;
}

@font-face {
    font-family: 'Test Söhne';
    src: url('assets/fonts/TestSohne-Regular.woff2') format('woff2'),
         url('assets/fonts/TestSohne-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. Variables
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #0a0a0a;
    --color-secondary: #0055ff;
    --color-text: #333333;
    --color-background: #ffffff;
    --font-primary: 'Test Söhne', system-ui, -apple-system, sans-serif;
    --font-secondary: 'Test Söhne', system-ui, -apple-system, sans-serif;
}

::selection {
    background-color: #8C5E58;
    color: #000;
}

::-moz-selection {
    background-color: #8C5E58;
    color: #000;
}

/* ==========================================================================
   3. Base Styles & Utility Classes
   ========================================================================== */
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: #19323C;
    max-width: 1920px;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-primary);
}

p {
    line-height: 1;
}

p:not(:last-child) {
    margin-bottom: 1rem;
}

p.tmd-sm {
    font-size: 12px;
}

p.tmd-md {
    font-size: 24px;
}

p.tmd-lg {
    font-size: 36px;
}

p.tmd-xlg {
    font-size: 46px;
}

p.tmd-xxlg {
    font-size: 60px;
}

/* NOTE: this previously had a stray "max" token with no property/colon
   ("max\n position: sticky;"), which made the whole declaration invalid —
   .sticky was only ever getting min-height, never position: sticky, on
   every scroll-stacking section sitewide. That's actually been the live
   behavior everything was built/tested against, so reinstating a working
   position: sticky is left commented out below rather than switched on,
   until there's time to check it against every .sticky section on the
   site. Uncomment the two lines below to turn it back on. */
.sticky {
    min-height: 100vh;
    /* position: sticky; */
    /* top: 0; */
}

.footer.sticky {
    min-height: auto;
}

.footer__contact-info a {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.15em;
}

.footer__contact-info a:hover,
.footer__contact-info a:focus-visible {
    color: #F2545B; /* Lobster Pink */
}

@media(max-width:48em) {
    .sticky {
        position: relative;
    }

    p.tmd-md {
        font-size: 20px;
    }

    p.tmd-lg {
        font-size: 28px;
    }

    p.tmd-xlg {
        font-size: 32px;
    }

    p.tmd-xxlg {
        font-size: 40px;
    }
}

@media(min-width:121em) {
    .sticky {
        min-height: 67.5rem;
    }
}

.tmd-container {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 999;
    transition: opacity 0.3s ease;
	max-width: 1920px;
}

header.header--hidden {
    opacity: 0;
    pointer-events: none;
}

header a {
    transition: 0.2s ease;
}

header a:hover {
    color: var(--color-Brand-Color-Primary-Lighting, #F9F741);
}

.header__container {
    padding: 2.875rem 2.875rem 0 2.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.header__nav {
    align-self: flex-start;
}

.header__logo {
    transition: all 0.2s ease;
    filter: drop-shadow(4px 4px 8px #0002) hue-rotate(0deg) saturate(1);
}

.header__logo.scrolled {
    filter:
        brightness(0) saturate(100%)
        invert(36%) sepia(68%) saturate(1066%) hue-rotate(320.4deg) brightness(108%) contrast(90%)
        drop-shadow(4px 4px 8px #0005);
}

.header__logo.logo-fading,
.header__logo.scrolled.logo-fading {
    opacity: 0;
}

.header__logo:hover {
    opacity: 1;
    filter: drop-shadow(4px 4px 8px #0002);
}

.header__menu {
    display: none;
}

.header__toggle {
    display: block;
    cursor: pointer;
    z-index: 1001;
    position: relative;
}

.header__mobile-menu {
    position: fixed;
    top: 0;
    /* On screens ≤1920px wide, (100vw - 1920px) is negative/zero, so this
       resolves to plain right: 0 — identical to before. Past 1920px, body's
       own max-width: 1920px; margin: 0 auto; leaves an equal gutter on each
       side; this computes that same gutter width and shifts the panel in by
       it, so the panel's right edge lines up with body's actual right edge
       (and the footer hamburger beneath it) instead of the raw viewport edge. */
/*     right: max(0px, calc((100vw - 1920px) / 2)); */

	/* 	Swapped to percentage based for screens larger than 1920px to not show thin strip */
	right: max(0px, calc((100% - 1920px) / 2));
    width: 100%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #111;
    padding: 2rem 2.875rem 0;
    /* translateX(100%) alone only clears the panel's own width from its
       resting position — since that resting position is already inset by
       the gutter (right: max(...) above), 100% isn't enough to clear the
       true viewport edge; it leaves exactly a gutter-width sliver visible.
       Adding the same gutter calc on top ensures it fully clears the real
       edge regardless of gutter size. */
    transform: translateX(calc(100% + max(0px, calc((100vw - 1920px) / 2))));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* Decorative vertical pinstripe along the panel's right edge, fading to
   nothing over the rightmost 15% of the panel's width. Painted as a
   pseudo-element (rather than on the panel's own background-image) so it
   sits behind the real content (close button, nav, logo) automatically,
   since ::before paints before its later DOM siblings by default. */
/* Note: an earlier version of this decorative pinstripe lived on
   .header__mobile-menu's right edge — moved to sit above the logo instead,
   see .header__mobile-menu-logo::before below. */

.header__mobile-menu-close {
    align-self: flex-end;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0.5rem;
    margin: 0 -0.5rem 0 0;
}

.header__mobile-menu-close svg {
    stroke: #A93F55; /* purple-red */
    transition: 0.2s ease;
}

.header__mobile-menu-close:hover svg {
    stroke: #F2545B; /* Strike Orange (now a red in the current palette) */
}

/* Only this inner wrapper scrolls now — the close button above stays put
   regardless of how far the nav/logo content scrolls. */
.header__mobile-menu-scroll {
    flex: 1;
    min-height: 0; /* required for a flex child to actually be allowed to scroll rather than stretch to fit its content */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    /* Cancel the panel's own horizontal padding (which .header__mobile-menu-close
       above still relies on for its own inset) so this wrapper's box reaches
       the panel's true left/right edges — that's where overflow-y: auto
       renders the scrollbar. Then re-apply the same horizontal inset here
       via padding, so the actual nav/logo content keeps its original
       spacing, just positioned inside the scrollbar now instead of outside
       it. */
    margin-left: -2.875rem;
    margin-right: -2.875rem;
    padding: 4rem 2.875rem 2rem;
}

/* Sits after .header__mobile-nav in markup. margin-top: auto pushes it to
   the bottom of the scroll wrapper when nav items leave extra space; if
   nav items plus this logo exceed the wrapper's height, flex just stacks
   them in document order and the wrapper's own overflow-y: auto (above)
   makes the logo scrollable into view instead of clipped. */
.header__mobile-menu-logo {
    margin-top: auto;
    padding-top: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
}

/* Decorative divider line above the logo — same pinstripe treatment as
   before, now horizontal instead of running down an edge. Fades from fully
   visible at the bottom (nearest the logo) to nothing at the top. */
.header__mobile-menu-logo::after {
    content: "";
    flex: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        #8C5E58 0px,
        #8C5E58 1px,
        transparent 1px,
        transparent 9px
    );
    -webkit-mask-image: linear-gradient(to left, black, transparent);
    mask-image: linear-gradient(to left, black, transparent);
}

.header__mobile-menu-logo img {
    max-width: 8rem;
    height: auto;
    /* Estimated to land near Smoky Rose (#8C5E58) — adjusted from the
       header's #F2545B-tuned chain by scaling saturation/brightness down
       to match this target's more muted, darker HSL values. Not visually
       verified — check against the real hex and nudge saturate()/
       brightness() if it's off. */
    filter:
        brightness(0) saturate(100%)
        invert(36%) sepia(68%) saturate(285%) hue-rotate(330deg) brightness(68%) contrast(90%);
}

.header__mobile-menu.active {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.4, 1);
}

.header__mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header__mobile-nav a {
    color: #FFF;
    font-family: "Test Söhne", sans-serif;
    font-size: 1.5rem;
    text-decoration: none;
}

.header__mobile-nav a:hover,
.header__mobile-nav a:focus-visible {
    color: #4D9ECE; /* Voltage Blue (denim blue) */
}

.header__toggle .line {
    transition: transform 0.3s ease, opacity 0.2s ease, fill 0.2s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.header__toggle:hover .line {
    fill: #4D9ECE; /* Voltage Blue (denim blue) */
}

.header__toggle.active .line-top {
    transform: translateY(15px) rotate(45deg);
}

.header__toggle.active .line-mid {
    opacity: 0;
}

.header__toggle.active .line-bot {
    transform: translateY(-15px) rotate(-45deg);
}

@media (max-width: 48em) {
    .header__container {
        padding: 1rem 1rem 0 1rem;
    }

    .header__mobile-menu {
        padding: 1rem 1rem 0 1.5rem;
    }

    .header__mobile-menu-scroll {
        margin-left: -1.5rem;
        margin-right: -1rem;
        padding-left: 1.5rem;
        padding-right: 1rem;
    }
}