@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap');

/*
 * ============================================================
 * FEARANN ALBA — main.css
 * ============================================================
 * This is the core stylesheet. It defines:
 *   1. CSS variables (colours, typography tokens)
 *   2. Global body and typography styles
 *   3. Utility classes used throughout the theme
 *   4. Button styles
 *
 * All other stylesheets (nav.css, hero.css etc.) inherit
 * from the variables defined here.
 * ============================================================
 */


/*
 * ============================================================
 * 1. CSS VARIABLES
 * ============================================================
 * Defined on :root so they are available everywhere.
 * Reference them anywhere with var(--variable-name).
 * ============================================================
 */

:root {

    /* --- Colours --- */

    /* Page and modal backgrounds */
    --color-bg:           #000000;

    /* Cards, panels, navigation background */
    --color-surface:      #0b0b0b;

    /* A slightly lighter surface for subtle variation */
    --color-surface-alt:  #0c0c0c;

    /* Gold — used for CTAs, hover states, highlights, icons */
    --color-gold:         #B8960C;

    /* Gold at 80% opacity — used for button glow shadow on hover */
    --color-gold-glow:    rgba(184, 150, 12, 0.8);

    /* Main body text and headings */
    --color-text:         #ffffff;

    /* Secondary text — captions, supporting copy */
    --color-text-muted:   rgba(255, 255, 255, 0.6);

    /* Dividers and card borders — very subtle */
    --color-border:       rgba(255, 255, 255, 0.08);


    /* --- Typography --- */

    /* Primary font — Inter from Google Fonts */
    --font-primary:   'Inter', sans-serif;

    /* Monospace — used for small technical labels */
    --font-mono:      monospace;

    /* Font weights */
    --weight-light:   100;
    --weight-regular: 400;
    --weight-bold:    700;

    /* Base body font size */
    --font-size-base: 1rem;       /* 16px */

    /* Body text line height — generous for readability */
    --line-height-body: 1.8;

    /* Letter spacing for uppercase labels and navigation */
    --tracking-wide:  0.1em;
    --tracking-wider: 0.25em;


    /* --- Layout --- */

    /* Maximum width for centred content columns */
    --max-width: 1200px;

    /* Consistent horizontal padding on the content container */
    --container-padding: 2rem;

    /* Consistent vertical padding between page sections */
    --section-padding: 6rem;

}


/*
 * ============================================================
 * 2. GLOBAL TYPOGRAPHY & BODY
 * ============================================================
 * Applied to the whole page. Sets the font, background colour,
 * text colour, and base rendering quality.
 * ============================================================
 */

/*
 * Google Fonts import — loads Inter in the three weights we use.
 * This must come before any rules that use the font.
 */

html,
body {
    /*
     * overflow-x: clip prevents horizontal scrollbars without
     * creating a scroll container. This is important because
     * overflow-x: hidden on html or body causes the browser to
     * promote the root element to a scroll container, which
     * silently breaks position: sticky on every element on the
     * page. overflow-x: clip achieves the same visual clipping
     * without that side effect.
     */
    overflow-x: clip;
}

/* Prevent any element causing horizontal overflow */
* {
    box-sizing: border-box;
    max-width: 100%;
}

/* Exceptions — drone elements need to exceed their container */
.drone-wrapper,
.drone-assembly,
.drone__body,
.drone__prop,
.prop-svg {
    max-width: none;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-body);

    /* Improves font rendering on Mac/retina screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Headings --- */
/* Display headings use extralight weight and tight tracking */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-light);
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem,   4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/*
 * clamp(minimum, preferred, maximum) means the font size
 * scales fluidly with the viewport — smaller on mobile,
 * larger on desktop — without needing media queries.
 */

/* --- Body copy --- */
p {
    font-size: 1rem;
    font-weight: var(--weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text);
    max-width: 65ch;        /* Limits line length for readability */
    width: 100%;            /* Prevents overflow on mobile */
    margin-left: auto;      /* Centres the paragraph within its container */
    margin-right: auto;     /* when max-width kicks in (e.g. About Us section) */
}

/* --- Links --- */
a {
    color: var(--color-text);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-gold);
}

/* --- Section labels / mono tags --- */
/* Small uppercase technical labels used above section headings */
.label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-gold);
}


/*
 * ============================================================
 * 3. UTILITY CLASSES
 * ============================================================
 * Reusable layout helpers used throughout all templates.
 * ============================================================
 */

/*
 * .container
 * Centres content horizontally with a max-width.
 * Used inside most sections to keep text from stretching
 * too wide on large screens.
 */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/*
 * .section
 * Adds consistent vertical breathing room between
 * each section of a page.
 */
.section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

/*
 * .section--dark and .section--surface
 * Background colour variants for alternating sections.
 */
.section--dark {
    background-color: var(--color-bg);
}

.section--surface {
    background-color: var(--color-surface);
}

/*
 * Text alignment utilities
 */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/*
 * Muted text — for captions, secondary copy
 */
.text-muted {
    color: var(--color-text-muted);
}

/*
 * Uppercase tracking — for nav items, labels, CTAs
 */
.text-upper {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/*
 * Divider line — a subtle horizontal rule
 */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 3rem 0;
}


/*
 * ============================================================
 * 4. BUTTONS
 * ============================================================
 * Two variants:
 *   .btn          — outlined white border, transparent fill
 *   .btn--gold    — solid gold fill (used for primary CTAs)
 *
 * Both share the same base .btn styles.
 * Hover state on .btn fills with gold and adds a glow.
 * ============================================================
 */

.btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-text);

    /* Square corners — core to the visual identity */
    border-radius: 0;

    cursor: pointer;

    /* Smooth transition for hover effects */
    transition:
        background-color 0.2s ease,
        border-color     0.2s ease,
        color            0.2s ease,
        box-shadow       0.2s ease;
}

.btn:hover {
    background-color: var(--color-gold);
    border-color:     var(--color-gold);
    color:            #000000;

    /* Gold glow shadow — signature hover effect */
    box-shadow: 0 0 20px var(--color-gold-glow);
}

/*
 * .btn--gold
 * For cases where the button needs to be gold by default
 * rather than just on hover — primary hero CTAs.
 */
.btn--gold {
    background-color: var(--color-gold);
    border-color:     var(--color-gold);
    color:            #000000;
}

.btn--gold:hover {
    background-color: transparent;
    border-color:     var(--color-gold);
    color:            var(--color-gold);
    box-shadow:       0 0 20px var(--color-gold-glow);
}

/*
 * .btn--large
 * A size modifier for hero buttons — slightly bigger padding.
 */
.btn--large {
    padding: 1rem 2.5rem;
    font-size: 0.85rem;
}