/* =============================================
   SAINT BRANDS — Base Stylesheet
   Font: Helvetica Neue
   Units: vw (viewport width) for responsive sizing
   Design canvas: 1920px
   
   HOW TO USE:
   ─────────────────────────────────────────────
   1. layout.html = base template (header + footer)
   2. Page content goes inside <main class="content">
   
   PAGE TYPES:
   • Simple page (News, How it works, For Logists, Contacts):
     Use <div class="page-simple"> with __left and __text
   
   • Complex page (For Customers, For Brands):
     Use <div class="page-complex"> with section-hero,
     section-block, and <hr class="divider">
   ============================================= */


/* ─── Reset & Base ─────────────────────────── */

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

html {
    scroll-behavior: smooth;
    background: #000;                 /* prevents light gap below footer */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ─── HEADER ───────────────────────────────── */

.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo block — black bar at top */
.header__logo {
    width: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.04vw 0;                /* ~20px */
}

/* Logo — shared between header and footer */
.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    line-height: 1;
}

.logo__the {
    font-weight: 500;
    font-size: 0.832vw;                /* ~20px */
    letter-spacing: 0;
    color: #fff;
    text-transform: uppercase;
}

.logo__brand {
    font-weight: 500;                 /* Bold */
    font-size: 1.664vw;                /* ~40px — ratio 1:2 */
    letter-spacing: 0;
    color: #fff;
    text-transform: uppercase;
}

/* Navigation — centered menu bar */
.header__nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.6vw;                        /* ~50px between items */
    padding: 0.78vw 0;                /* ~15px vertical */
}

.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:hover,
.nav-link:active {
    text-decoration: none !important;
}

.nav-link {
    font-weight: 400;
    font-size: 1.3vw;                /* ~16px */
    color: #000;
    transition: transform 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    display: inline-block;
    transform-origin: center center;
}

/* Hover: scale up visually without layout shift + grey */
.nav-link:hover {
    transform: scale(1.12);
    color: #aaa;
}

.nav-link.active {
    color: #000;
}


/* ─── MAIN CONTENT WRAPPER ─────────────────── */

.content {
    width: 100%;
    flex: 1;                           /* pushes footer to bottom */
}


/* ─── SIMPLE PAGE ──────────────────────────── 
   Structure:
   <div class="page-simple">
     <div class="page-simple__left">
       <h1 class="page-simple__title">Title</h1>
       <img class="page-simple__image">
     </div>
     <div class="page-simple__text">
       <p>Text content...</p>
     </div>
   </div>
   ──────────────────────────────────────────── */

.page-simple {
    width: 100%;
    padding: 4.17vw 6.25vw;           /* ~80px top, ~120px sides */
    display: flex;
    gap: 5.2vw;                        /* ~100px between columns */
    align-items: flex-start;
}

.page-simple__left {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-simple__title {
    font-weight: 200;                 /* Thin */
    font-size: 5vw;                   /* ~96px */
    line-height: 1.05;
    color: #000;
    text-align: left;
    width: 100%;
}

.page-simple__image {
    margin-top: 2.6vw;                /* ~50px */
    max-width: 80%;
}

.page-simple__text {
    flex: 1;
    font-weight: 200;                 /* Regular */
    font-size: 1.5vw;                /* ~14px */
    line-height: 1.7;
    color: #000;
}


/* ─── COMPLEX PAGE ─────────────────────────── 
   Wrapper for multi-section pages
   ──────────────────────────────────────────── */

.page-complex {
    width: 100%;
    padding: 4.17vw 6.25vw;
}


/* ─── SECTION: Hero ────────────────────────── 
   Big title + image on left, text on right.
   Used for page intro and sections with illustrations.
   
   <div class="section-hero">
     <div class="section-hero__left">
       <h1 class="section-hero__title">Title</h1>
       <img class="section-hero__image">
     </div>
     <div class="section-hero__text">
       <p>...</p>
     </div>
   </div>
   ──────────────────────────────────────────── */

.section-hero {
    display: flex;
    gap: 5.2vw;
    align-items: flex-start;
    margin-bottom: 2.6vw;
}

.section-hero__left {
    flex: 0 0 35%;
}

/* Large thin title — for page headings */
.section-hero__title {
    font-weight: 200;                 /* Thin */
    font-size: 5vw;                   /* ~96px */
    line-height: 1.05;
    color: #000;
}

/* Smaller bold title — for sub-sections */
.section-hero__title--small {
    font-weight: 700;                 /* Bold */
    font-size: 1.25vw;               /* ~24px */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
}

.section-hero__image {
    margin-top: 2.6vw;
    max-width: 90%;
}

.section-hero__text {
    flex: 1;
    font-weight: 400;
    font-size: 0.73vw;                /* ~14px */
    line-height: 1.7;
    color: #000;
    padding-top: 1vw;
}


/* ─── DIVIDER ──────────────────────────────── 
   <hr class="divider">
   ──────────────────────────────────────────── */

.divider {
    width: 87.5%;                      /* 1680 / 1920 */
    height: 1px;
    background: #aaa;
    margin: 2.6vw auto;               /* ~50px vertical spacing */
    border: none;
}


/* ─── SECTION: Block ───────────────────────── 
   Title on left, text on right. No image.
   
   <div class="section-block">
     <h2 class="section-block__title">TITLE</h2>
     <div class="section-block__text">
       <p>...</p>
     </div>
   </div>
   ──────────────────────────────────────────── */

.section-block {
    display: flex;
    gap: 5.2vw;
    align-items: flex-start;
    margin-bottom: 1vw;
}

.section-block__title {
    font-weight: 700;                 /* Bold */
    font-size: 1.25vw;               /* ~24px */
    letter-spacing: 0.05em;
    color: #000;
    flex: 0 0 35%;
    text-transform: uppercase;
}

.section-block__text {
    flex: 1;
    font-weight: 400;
    font-size: 0.73vw;                /* ~14px */
    line-height: 1.7;
    color: #000;
}


/* ─── FOOTER ───────────────────────────────── */

.footer {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 2.6vw 0;                 /* vertical only — centering handles horizontal */
}

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

/* Top row: logo + columns as one centered group */
.footer__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw;
}

.footer__logo {
    flex: 0 0 auto;
    pointer-events: none;
}

.footer__logo .logo__the,
.footer__logo .logo__brand {
    color: #fff;
}

.footer__columns {
    display: flex;
    gap: 5vw;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.4vw;
}

.footer__col-title {
    font-weight: 700;
    font-size: 1vw;                /* ~14px */
    letter-spacing: 0.05em;
    color: #fff;
    margin-bottom: 0.5vw;
    text-transform: uppercase;
}

.footer__link,
.footer__link:link,
.footer__link:visited,
.footer__link:hover,
.footer__link:active {
    font-weight: 300;
    font-size: 1vw;              /* ~12px */
    color: #fff;
    opacity: 0.85;
    text-decoration: none !important;
}

/* No hover effects on footer links per spec */

/* Bottom: address centered */
.footer__bottom {
    padding-top: 2.5vw;
    text-align: center;
}

.footer__address {
    font-weight: 500;
    font-size: 0.8vw;               /* ~10px */
    color: #fff;
    opacity: 0.7;
}

.document_header_1 {
    display: flex;
    font-weight: 500;
    font-size: 1.5vw;
    align-items: center;
    justify-content: center;
}

.document_header_2 {
    display: flex;
    font-weight: 700;
    font-size: 2vw;
    align-items: center;
    justify-content: center;
}

.document_header_3 {
    display: flex;
    font-weight: 700;
    font-size: 1.7vw;
    align-items: center;
    justify-content: center;
}

.document_text {
    display: flex;
    font-weight: 300;
    font-size: 1.2vw;
    padding: 40px 280px;
}

.document_text_list {
    display: flex;
    flex-direction: column;
    font-weight: 300;
    font-size: 1.2vw;
    padding: 40px 380px;
}