/*
 Theme Name:   HappilyEverInvites Child
 Theme URI:    https://happilyeverinvites.co.za
 Description:  Child theme for HappilyEverInvites wedding invitation platform.
               Supports 3 packages with per-client CSS variable customisation.
 Author:       HappilyEverInvites
 Author URI:   https://happilyeverinvites.co.za
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  happilyeverinvites
*/

/* ============================================================
   ROOT DESIGN TOKENS — overridden per client via inline style
   ============================================================ */
:root {
    /* Client-customisable — injected as inline <style> by functions.php */
    --hei-color-primary:   #c8a97e;
    --hei-color-secondary: #f5f0eb;
    --hei-color-accent:    #7a5c3e;
    --hei-color-dark:      #2c2c2c;
    --hei-color-light:     #fdfaf7;
    --hei-color-text:      #444444;

    --hei-font-heading:    'Cormorant Garamond', Georgia, serif;
    --hei-font-body:       'Lato', system-ui, sans-serif;
    --hei-font-script:     'Great Vibes', cursive;

    /* Spacing scale */
    --hei-space-xs:  0.5rem;
    --hei-space-sm:  1rem;
    --hei-space-md:  2rem;
    --hei-space-lg:  4rem;
    --hei-space-xl:  6rem;

    /* Typography scale */
    --hei-size-h1:   clamp(2.5rem, 6vw, 5rem);
    --hei-size-h2:   clamp(1.8rem, 4vw, 3rem);
    --hei-size-h3:   clamp(1.3rem, 2.5vw, 1.8rem);
    --hei-size-body: clamp(0.95rem, 1.5vw, 1.1rem);

    /* Transitions */
    --hei-transition: 0.3s ease;

    /* Border radius */
    --hei-radius-sm: 4px;
    --hei-radius-md: 8px;
    --hei-radius-lg: 16px;
    --hei-radius-pill: 50px;
}

/* ============================================================
   FONT LOADING — font-display: swap prevents layout shift
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Great+Vibes&family=Lato:wght@300;400;700&display=swap');

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:    var(--hei-font-body);
    font-size:      var(--hei-size-body);
    color:          var(--hei-color-text);
    background:     var(--hei-color-light);
    line-height:    1.7;
    margin:         0;
    overflow-x:     hidden;
}

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

/* Lazy-load placeholder — prevents CLS */
img[loading="lazy"] {
    background: var(--hei-color-secondary);
}

a {
    color:           var(--hei-color-primary);
    text-decoration: none;
    transition:      color var(--hei-transition);
}

a:hover { color: var(--hei-color-accent); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family:  var(--hei-font-heading);
    color:        var(--hei-color-dark);
    line-height:  1.2;
    font-weight:  400;
    margin-top:   0;
}

h1 { font-size: var(--hei-size-h1); }
h2 { font-size: var(--hei-size-h2); }
h3 { font-size: var(--hei-size-h3); }

.hei-script {
    font-family: var(--hei-font-script);
    color:       var(--hei-color-primary);
    font-size:   1.4em;
    line-height: 1.3;
}

/* ============================================================
   SECTION UTILITY
   ============================================================ */
.hei-section {
    padding: var(--hei-space-xl) var(--hei-space-md);
}

.hei-section--alt {
    background: var(--hei-color-secondary);
}

.hei-container {
    max-width:    900px;
    margin-inline: auto;
    padding-inline: var(--hei-space-md);
}

.hei-section-title {
    text-align:    center;
    margin-bottom: var(--hei-space-md);
}

.hei-section-title::after {
    content:    '';
    display:    block;
    width:      60px;
    height:     2px;
    background: var(--hei-color-primary);
    margin:     var(--hei-space-sm) auto 0;
}

/* ============================================================
   BUTTON
   ============================================================ */
.hei-btn {
    display:          inline-block;
    padding:          0.8em 2.4em;
    border-radius:    var(--hei-radius-pill);
    font-family:      var(--hei-font-body);
    font-size:        0.9rem;
    letter-spacing:   0.12em;
    text-transform:   uppercase;
    cursor:           pointer;
    transition:       all var(--hei-transition);
    border:           none;
}

.hei-btn--primary {
    background:  var(--hei-color-primary);
    color:       #fff;
}

.hei-btn--primary:hover {
    background: var(--hei-color-accent);
    color:      #fff;
}

.hei-btn--outline {
    background:  transparent;
    color:       var(--hei-color-primary);
    border:      2px solid var(--hei-color-primary);
}

.hei-btn--outline:hover {
    background: var(--hei-color-primary);
    color:      #fff;
}

/* ============================================================
   DIVIDER
   ============================================================ */
.hei-divider {
    display:        flex;
    align-items:    center;
    gap:            var(--hei-space-sm);
    margin:         var(--hei-space-md) auto;
    max-width:      300px;
    justify-content: center;
    color:          var(--hei-color-primary);
    font-size:      1.2rem;
}

.hei-divider::before,
.hei-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--hei-color-primary);
    opacity:    0.4;
}