/*
 * ==========================================================================
 * NOIRE / BOOTSTRAP 5 THEME
 * ==========================================================================
 *
 * Bootstrap 5 must be loaded before this file.
 *
 * Fonts:
 *   - Minerva Modern  : headings / editorial typography
 *   - Proxima Nova    : body / navigation / UI
 */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Colors
       ---------------------------------------------------------------------- */

    --noire-black:       #111111;
    --noire-dark:        #1b1b1b;
    --noire-white:       #ffffff;
    --noire-off-white:   #f6f5f2;

    --noire-beige:       #acaa9a;
    --noire-beige-light: #bdb7a5;
    --noire-yellow: #ffebc7;

    --noire-text:        #171717;
    --noire-muted:       #77736f;
    --noire-border:      #deddd9;

    --noire-primary:     var(--noire-black);
    --noire-primary-hover: #3a3a3a;

    --noire-faq-bg: rgba(45, 45, 42, 0.10);
    --noire-faq-border: rgba(255, 255, 255, 0.35);
    --noire-faq-text: #fff;


    /* ----------------------------------------------------------------------
       Fonts
       ---------------------------------------------------------------------- */

    --noire-font-heading:
        'Georgia',
        serif;

    --noire-font-body:
        Helvetica,
        Arial,
        sans-serif;


    /* ----------------------------------------------------------------------
       Font weights
       ---------------------------------------------------------------------- */

    --noire-heading-weight: 400;

    --noire-body-weight:    400;
    --noire-ui-weight:      500;
    --noire-strong-weight:  600;


    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --noire-body-size:      1rem;
    --noire-body-line:      1.65;

    --noire-heading-line:   1.02;

    --noire-heading-spacing: -0.025em;
    --noire-ui-spacing:       0.10em;


    /* ----------------------------------------------------------------------
       Main heading sizes
       ---------------------------------------------------------------------- */

    --noire-h1-size: clamp(3.5rem, 7vw, 7rem);
    --noire-h2-size: clamp(2.75rem, 5vw, 5rem);
    --noire-h3-size: clamp(2.1rem, 3.4vw, 3.4rem);
    --noire-h4-size: clamp(1.6rem, 2.4vw, 2.4rem);

    --noire-lead-size: clamp(1.5rem, 2.5vw, 2.5rem);


    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --noire-container-max: 1320px;

    --noire-section-y:     7rem;
    --noire-section-y-md:  5rem;
    --noire-section-y-sm:  4rem;

    --noire-content-max:   900px;


    /* ----------------------------------------------------------------------
       UI
       ---------------------------------------------------------------------- */

    --noire-radius:         0;

    --noire-button-x:       1.75rem;
    --noire-button-y:       0.85rem;

    --noire-transition:     250ms ease;
}


/* ==========================================================================
   BOOTSTRAP VARIABLES
   ========================================================================== */

:root {
    --bs-body-bg:            var(--noire-beige);
    --bs-body-color:         var(--noire-text);
    --bs-body-font-family:   var(--noire-font-body);
    --bs-body-font-size:     var(--noire-body-size);
    --bs-body-line-height:   var(--noire-body-line);

    --bs-primary:            var(--noire-primary);
    --bs-primary-rgb:        17, 17, 17;

    --bs-border-color:       var(--noire-border);

    --bs-link-color:         var(--noire-text);
    --bs-link-hover-color:   var(--noire-primary-hover);

    --bs-border-radius:      var(--noire-radius);
    --bs-border-radius-sm:   var(--noire-radius);
    --bs-border-radius-lg:   var(--noire-radius);
}


/* ==========================================================================
   BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: var(--noire-font-body);
    font-weight: var(--noire-body-weight);
    font-size: var(--noire-body-size);
    line-height: var(--noire-body-line);

    color: var(--noire-text);
    background: var(--noire-beige);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;

    transition:
        color var(--noire-transition),
        opacity var(--noire-transition);
}

a:hover {
    color: var(--noire-primary-hover);
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
    max-width: var(--noire-container-max);
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    font-family: var(--noire-font-heading);
    font-weight: var(--noire-heading-weight);
    line-height: var(--noire-heading-line);
    letter-spacing: var(--noire-heading-spacing);

    color: var(--noire-text);
}

h1 {
    font-size: var(--noire-h1-size);
}

h2 {
    font-size: var(--noire-h2-size);
}

h3 {
    font-size: var(--noire-h3-size);
}

h4 {
    font-size: var(--noire-h4-size);
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-family: var(--noire-font-body);
    font-size: 0.7rem;
    font-weight: var(--noire-ui-weight);
    line-height: 1.4;
    letter-spacing: var(--noire-ui-spacing);
    text-transform: uppercase;
}


/* Bootstrap display headings */

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--noire-font-heading);
    font-weight: var(--noire-heading-weight);
    line-height: var(--noire-heading-line);
    letter-spacing: var(--noire-heading-spacing);
}


/* ==========================================================================
   EDITORIAL TYPE
   ========================================================================== */

.noire-lead {
    font-family: var(--noire-font-heading);
    font-size: var(--noire-lead-size);
    font-weight: var(--noire-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.noire-label {
    display: block;
    margin-bottom: 1rem;

    font-family: var(--noire-font-body);
    font-size: 0.68rem;
    font-weight: var(--noire-ui-weight);
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.noire-number {
    font-family: var(--noire-font-body);
    font-size: 0.72rem;
    font-weight: var(--noire-body-weight);
    line-height: 1;
    letter-spacing: 0.04em;
}

.noire-intro {
    max-width: var(--noire-content-max);

    font-family: var(--noire-font-heading);
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

.noire-section {
    padding-top: var(--noire-section-y);
    padding-bottom: var(--noire-section-y);
}

.noire-section-md {
    padding-top: var(--noire-section-y-md);
    padding-bottom: var(--noire-section-y-md);
}

.noire-section-sm {
    padding-top: var(--noire-section-y-sm);
    padding-bottom: var(--noire-section-y-sm);
}


/* Full dark section */

.noire-dark {
    color: var(--noire-white);
    background: var(--noire-black);
}

.noire-dark h1,
.noire-dark h2,
.noire-dark h3,
.noire-dark h4,
.noire-dark h5,
.noire-dark h6 {
    color: var(--noire-white);
}

.noire-dark a:hover {
    color: var(--noire-white);
    opacity: 0.6;
}


/* Slightly warm background */

.noire-off-white {
    background: var(--noire-off-white);
}


/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.navbar-brand {
    font-family: var(--noire-font-body);
    font-size: 0.85rem;
    font-weight: var(--noire-strong-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navbar-nav {
    gap: 1.5rem;
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;

    font-family: var(--noire-font-body);
    font-size: 0.7rem;
    font-weight: var(--noire-ui-weight);
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    color: var(--noire-text);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--noire-muted);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    padding:
        var(--noire-button-y)
        var(--noire-button-x);

    border-radius: var(--noire-radius);

    font-family: var(--noire-font-body);
    font-size: 0.7rem;
    font-weight: var(--noire-ui-weight);
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    transition:
        color var(--noire-transition),
        background-color var(--noire-transition),
        border-color var(--noire-transition);
}

.btn-primary {
    color: var(--noire-white);
    background-color: var(--noire-black);
    border-color: var(--noire-black);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--noire-white);
    background-color: var(--noire-primary-hover);
    border-color: var(--noire-primary-hover);
}

.btn-outline-dark {
    color: var(--noire-black);
    background: transparent;
    border-color: var(--noire-black);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    color: var(--noire-white);
    background-color: var(--noire-black);
    border-color: var(--noire-black);
}


/* ==========================================================================
   TEXT LINKS
   ========================================================================== */

.noire-link {
    position: relative;
    display: inline-block;
}

.noire-link::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -0.25rem;
    left: 0;

    height: 1px;

    background-color: currentColor;

    transition: transform var(--noire-transition);
    transform-origin: right;
}

.noire-link:hover::after {
    transform: scaleX(0);
    transform-origin: left;
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.noire-image {
    display: block;
    width: 100%;
    height: auto;

    border-radius: var(--noire-radius);
}

.noire-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Subtle image zoom */

.noire-image-hover {
    overflow: hidden;
}

.noire-image-hover img {
    display: block;
    width: 100%;

    transition:
        transform 700ms ease,
        opacity 700ms ease;
}

.noire-image-hover:hover img {
    transform: scale(1.025);
}


/* ==========================================================================
   GALLERIES
   ========================================================================== */

.noire-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.noire-gallery-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}


/* ==========================================================================
   CARDS / BLOG
   ========================================================================== */

.card {
    border: 0;
    border-radius: var(--noire-radius);
    background: transparent;
}

.card-title {
    margin-bottom: 1rem;

    font-family: var(--noire-font-heading);
    font-size: 1.8rem;
    font-weight: var(--noire-heading-weight);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

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

.card .read-more {
    font-size: 0.7rem;
    font-weight: var(--noire-ui-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form-label {
    margin-bottom: 0.5rem;

    font-family: var(--noire-font-body);
    font-size: 0.68rem;
    font-weight: var(--noire-ui-weight);
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.form-control,
.form-select {
    min-height: 3rem;

    padding-right: 0;
    padding-left: 0;

    border-width: 0 0 1px;
    border-color: var(--noire-border);
    border-radius: 0;

    background-color: transparent;
    box-shadow: none !important;

    font-family: var(--noire-font-body);
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--noire-black);
    background-color: transparent;
}

textarea.form-control {
    min-height: 8rem;
    resize: vertical;
}


/* ==========================================================================
   QUOTES
   ========================================================================== */

.blockquote {
    margin-bottom: 0;

    font-family: var(--noire-font-heading);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: var(--noire-heading-weight);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.blockquote-footer {
    margin-top: 1.5rem;

    color: inherit;

    font-family: var(--noire-font-body);
    font-size: 0.68rem;
    font-weight: var(--noire-ui-weight);
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.noire-divider {
    height: 1px;
    margin: 0;

    border: 0;
    background-color: var(--noire-border);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    font-family: var(--noire-font-body);
    font-size: 0.75rem;
}

footer .nav-link {
    padding: 0;

    color: inherit;
}

footer .nav-link:hover {
    opacity: 0.55;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    :root {
        --noire-section-y: var(--noire-section-y-md);
    }

    .navbar-nav {
        gap: 0.5rem;
        margin-top: 1.25rem;
    }

    .noire-gallery-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 575.98px) {

    :root {
        --noire-section-y: var(--noire-section-y-sm);
    }

    .noire-gallery,
    .noire-gallery-3 {
        grid-template-columns: 1fr;
    }

    .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .noire-lead {
        font-size: 1.8rem;
    }
}