/*
Theme Name: Märsta Centrum
Theme URI: https://marstacentrum.se
Template: shoppingmall
Description: Märsta Forever 2024 – Bold, colorful and loud.
Author: Antigravity
Version: 2.2.0
Text Domain: marstacentrum
*/

/* ─────────────────────────────────────────────────────────
   1. BRAND TOKENS (The "Loud" Design System)
   ───────────────────────────────────────────────────────── */
:root {
    /* Palette */
    --mc-blue:        #2297bc;
    --mc-yellow:      #f9b233;
    --mc-red:         #a51816;
    --mc-teal:        #056584;
    --mc-gray:        #f1f1f1;
    --mc-black:       #000000;
    --mc-white:       #ffffff;
    --mc-charcoal:    #1a1a1a;

    /* Semantic Layout */
    --container-max:  1440px;
    --gutter:         1.5rem;
    --space-section:  5rem;
    --space-card:     2rem;
    --space-grid:     1.187rem;
    --space-btn-pad:  1rem 2.5rem;

    /* Typography Scale - LOUD */
    --font-display:   'Anton', sans-serif;
    --font-body:      'EB Garamond', serif;
    --font-ui:        'Roboto', sans-serif;

    --lh-solid:       1;
    --lh-display:     1.1;
    --lh-body:        1.6;

    --fs-h1:          8rem;     /* Hero Primary */
    --fs-h2:          6rem;     /* Hero Secondary */
    --fs-h3:          4.125rem; /* Section Titles (Standard Loud) */
    --fs-h4:          3rem;     /* Card/Subsection Titles */
    
    --fs-body-lg:     1.25rem;  /* Intro/Featured text */
    --fs-body:        1.125rem; /* Base size */
    --fs-ui:          1.875rem; /* Buttons / Ticker */

    /* Effects */
    --shadow-card:    4px 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-btn:     2px 2px 4px rgba(0, 0, 0, 0.4);
    --overlay-dark:   rgba(0, 0, 0, 0.35);
    --overlay-light:  rgba(255, 255, 255, 0.1);
    --transition-fast: 0.15s ease;
    --transition-card: 0.3s ease;
    --radius-card:    0;
    --radius-btn:     8px;
    --radius-pill:    8px;

    /* Dimensions */
    --aspect-puff:    416 / 296;
}

/* ─────────────────────────────────────────────────────────
   2. CORE RESET & BASE
   ───────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background:       var(--mc-white);
    color:            var(--mc-black);
    font-family:      var(--font-body);
    font-size:        var(--fs-body);
    line-height:      var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--mc-blue);
    text-decoration: none;
    transition: opacity 0.2s;
}

a:hover {
    opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────
   WCAG 2.1 AA – Fokusindikator
   Aldrig ta bort outline utan att ersätta den!
   ───────────────────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--mc-yellow);
    outline-offset: 3px;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--mc-yellow);
    outline-offset: 3px;
    border-radius: var(--radius-btn);
}

/* ─────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ───────────────────────────────────────────────────────── */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h3); } /* Default H2 is our "Section Title" size */
h3 { font-size: var(--fs-h4); }

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height:    var(--lh-display);
    font-weight:    400;
    margin-top:     0;
    margin-bottom:  1rem;
}

/* Anton är single-weight – förhindra browser font-synthesis (fake bold) */
[style*="Anton"],
.font-display,
[class*="fp-"] [class*="btn"],
[class*="fpmarsta-"] {
    font-synthesis: none;
    font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────────
   4. LAYOUT COMPONENTS
   ───────────────────────────────────────────────────────── */
section {
    padding: var(--space-section) 0;
}

.site-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.site-footer {
    background:  var(--mc-blue);
    color:       var(--mc-white);
    font-family: var(--font-display);
    padding:     var(--space-section) 0;
    margin-top:  var(--space-section);
}