/*
 * Theme Name:  SORS Investment Company
 * Theme URI:   https://sorsinvestment.com/
 * Description: A child theme for SORS Investment Company, built on the Astra parent theme.
 *              Houses all brand-specific CSS variables, custom styles, and overrides
 *              for the "Quiet Luxury" real estate website design system.
 * Author:      [Insert Your Name / Agency Here]
 * Author URI:  [Insert Your Website Here]
 * Template:    astra
 * Version:     1.0.0
 * License:     GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: sors-investment
 * Tags:        real-estate, luxury, custom
 */


/* ==========================================================================
   1. GLOBAL BRAND VARIABLES
   Define all brand tokens here. Reference these throughout every custom
   CSS rule using var(--sors-gold) etc. If the client ever updates a
   brand color, you change it in one place and it propagates everywhere.
   ========================================================================== */

:root {

    /* ── Core Brand Colors ─────────────────────────────────────────────── */
    --sors-black:       #201E1E;   /* Deep Black  — authority, sophistication  */
    --sors-gold:        #F2C030;   /* Golden Yellow — optimism, creativity      */
    --sors-bg:          #FAFAF8;   /* Warm Off-White — primary page background  */
    --sors-charcoal:    #161414;   /* Deep Charcoal — dark sections, cards      */
    --sors-text:        #201E1E;   /* Primary body text color                   */

    /* ── Tints & Alphas (for overlays, borders, hover states) ─────────── */
    --sors-gold-10:     rgba(242, 192, 48, 0.10);
    --sors-gold-20:     rgba(242, 192, 48, 0.20);
    --sors-gold-40:     rgba(242, 192, 48, 0.40);
    --sors-black-60:    rgba(32, 30, 30, 0.60);
    --sors-black-05:    rgba(32, 30, 30, 0.05);
    --sors-white-60:    rgba(255, 255, 255, 0.60);
    --sors-white-05:    rgba(255, 255, 255, 0.05);

    /* ── Typography ────────────────────────────────────────────────────── */
    --sors-font:        'Montserrat', sans-serif;
    --sors-weight-light:    300;
    --sors-weight-regular:  400;
    --sors-weight-semibold: 600;
    --sors-weight-bold:     700;
    --sors-weight-extrabold:800;
    --sors-weight-black:    900;

    /* ── Font Size Scale ───────────────────────────────────────────────── */
    --sors-text-xs:     11px;
    --sors-text-sm:     13px;
    --sors-text-base:   15px;
    --sors-text-md:     16px;
    --sors-text-lg:     20px;
    --sors-text-xl:     24px;
    --sors-text-2xl:    32px;
    --sors-text-3xl:    48px;
    --sors-text-4xl:    64px;

    /* ── Letter Spacing ────────────────────────────────────────────────── */
    --sors-tracking-tight:  -0.025em;
    --sors-tracking-normal:  0em;
    --sors-tracking-wide:    0.08em;
    --sors-tracking-wider:   0.14em;
    --sors-tracking-widest:  0.26em;

    /* ── Spacing Scale ─────────────────────────────────────────────────── */
    --sors-space-xs:    8px;
    --sors-space-sm:    16px;
    --sors-space-md:    24px;
    --sors-space-lg:    40px;
    --sors-space-xl:    64px;
    --sors-space-2xl:   100px;
    --sors-space-3xl:   120px;

    /* ── Border & Radius ───────────────────────────────────────────────── */
    --sors-border:      1px solid rgba(32, 30, 30, 0.10);
    --sors-border-gold: 1px solid rgba(242, 192, 48, 0.30);
    --sors-radius-none: 0px;
    --sors-radius-sm:   4px;
    --sors-radius-md:   8px;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --sors-shadow-sm:   0 4px 16px rgba(32, 30, 30, 0.06);
    --sors-shadow-md:   0 12px 40px rgba(32, 30, 30, 0.10);
    --sors-shadow-lg:   0 24px 64px rgba(32, 30, 30, 0.14);
    --sors-shadow-gold: 0 12px 40px rgba(242, 192, 48, 0.30);

    /* ── Transitions ───────────────────────────────────────────────────── */
    --sors-transition:       all 0.3s ease;
    --sors-transition-slow:  all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --sors-transition-spring:all 0.9s cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Z-Index Scale ─────────────────────────────────────────────────── */
    --sors-z-base:      1;
    --sors-z-above:     10;
    --sors-z-nav:       100;
    --sors-z-overlay:   200;
    --sors-z-top:       999;
}


/* ==========================================================================
   2. GLOBAL BASE RESETS & BODY
   Override Astra's defaults to match the SORS design system baseline.
   ========================================================================== */

body {
    font-family:  var(--sors-font);
    font-weight:  var(--sors-weight-regular);
    color:        var(--sors-text);
    background:   var(--sors-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--sors-gold);
    color:      var(--sors-black);
}

/* Scrollbar */
::-webkit-scrollbar              { width: 4px; }
::-webkit-scrollbar-track        { background: var(--sors-bg); }
::-webkit-scrollbar-thumb        { background: var(--sors-gold); }
::-webkit-scrollbar-thumb:hover  { background: var(--sors-black); }


/* ==========================================================================
   3. TYPOGRAPHY OVERRIDES
   Ensure all headings use the Montserrat ExtraBold/Black weight for
   the high-impact "Quiet Luxury" look across all Astra & Spectra output.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family:     var(--sors-font);
    font-weight:     var(--sors-weight-black);
    letter-spacing:  var(--sors-tracking-tight);
    color:           var(--sors-text);
    line-height:     1.1;
}

p, li, span, label, input, textarea {
    font-family: var(--sors-font);
}

a {
    color:      var(--sors-gold);
    transition: var(--sors-transition);
}

a:hover {
    color: var(--sors-black);
}


/* ==========================================================================
   4. ASTRA HEADER OVERRIDES
   Transparent sticky header — matches the JS scroll behavior used in
   the HTML prototypes, now handled via CSS + Astra's sticky class.
   ========================================================================== */

/* Default: transparent over hero */
.site-header,
.main-header-bar {
    background:  transparent !important;
    transition:  background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                 box-shadow  0.45s cubic-bezier(0.16, 1, 0.3, 1),
                 padding     0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scrolled state: solid background */
.ast-sticky-active .main-header-bar {
    background:  rgba(250, 250, 248, 0.97) !important;
    box-shadow:  0 2px 32px rgba(32, 30, 30, 0.07) !important;
    border-bottom: 1px solid rgba(32, 30, 30, 0.08);
}

/* Dark page variant (services/about with dark hero) */
.dark-hero .site-header .main-header-bar { background: transparent !important; }
.dark-hero .ast-sticky-active .main-header-bar {
    background: rgba(32, 30, 30, 0.97) !important;
    border-bottom: 1px solid rgba(242, 192, 48, 0.10);
}

/* Nav links */
.main-header-bar .ast-builder-menu .menu-item > a {
    font-size:      var(--sors-text-xs);
    font-weight:    var(--sors-weight-semibold);
    letter-spacing: var(--sors-tracking-wider);
    text-transform: uppercase;
    color:          rgba(32, 30, 30, 0.65);
    transition:     var(--sors-transition);
    position:       relative;
}

.main-header-bar .ast-builder-menu .menu-item > a::after {
    content:          '';
    position:         absolute;
    bottom:           -5px;
    left:             0;
    width:            0;
    height:           1.5px;
    background:       var(--sors-gold);
    transition:       width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-header-bar .ast-builder-menu .menu-item > a:hover {
    color: var(--sors-black);
}

.main-header-bar .ast-builder-menu .menu-item > a:hover::after,
.main-header-bar .ast-builder-menu .current-menu-item > a::after {
    width: 100%;
}


/* ==========================================================================
   5. BUTTON SYSTEM
   Reusable button classes that can be applied to Spectra Button blocks
   via Additional CSS Class field in Gutenberg.
   ========================================================================== */

/* Primary: Gold */
.sors-btn-gold,
.wp-block-button.sors-btn-gold .wp-block-button__link {
    background:       var(--sors-gold);
    color:            var(--sors-black);
    font-family:      var(--sors-font);
    font-weight:      var(--sors-weight-bold);
    font-size:        var(--sors-text-xs);
    letter-spacing:   var(--sors-tracking-wider);
    text-transform:   uppercase;
    padding:          17px 38px;
    border:           none;
    border-radius:    var(--sors-radius-none);
    cursor:           pointer;
    text-decoration:  none;
    display:          inline-block;
    transition:       transform 0.22s ease,
                      box-shadow 0.3s ease;
}

.sors-btn-gold:hover,
.wp-block-button.sors-btn-gold .wp-block-button__link:hover {
    background:  var(--sors-gold);
    color:       var(--sors-black);
    transform:   translateY(-2px);
    box-shadow:  var(--sors-shadow-gold);
}

/* Secondary: Dark */
.sors-btn-dark,
.wp-block-button.sors-btn-dark .wp-block-button__link {
    background:       var(--sors-black);
    color:            #ffffff;
    font-family:      var(--sors-font);
    font-weight:      var(--sors-weight-bold);
    font-size:        var(--sors-text-xs);
    letter-spacing:   var(--sors-tracking-wider);
    text-transform:   uppercase;
    padding:          17px 38px;
    border:           none;
    border-radius:    var(--sors-radius-none);
    cursor:           pointer;
    text-decoration:  none;
    display:          inline-block;
    transition:       transform 0.22s ease,
                      box-shadow 0.3s ease;
}

.sors-btn-dark:hover,
.wp-block-button.sors-btn-dark .wp-block-button__link:hover {
    background:  var(--sors-black);
    color:       #ffffff;
    transform:   translateY(-2px);
    box-shadow:  var(--sors-shadow-md);
}

/* Ghost / Outline */
.sors-btn-outline,
.wp-block-button.sors-btn-outline .wp-block-button__link {
    background:       transparent;
    color:            var(--sors-black);
    font-family:      var(--sors-font);
    font-weight:      var(--sors-weight-semibold);
    font-size:        var(--sors-text-xs);
    letter-spacing:   var(--sors-tracking-wider);
    text-transform:   uppercase;
    padding:          16px 37px;
    border:           1.5px solid rgba(32, 30, 30, 0.25);
    border-radius:    var(--sors-radius-none);
    cursor:           pointer;
    text-decoration:  none;
    display:          inline-block;
    transition:       var(--sors-transition);
}

.sors-btn-outline:hover,
.wp-block-button.sors-btn-outline .wp-block-button__link:hover {
    border-color: var(--sors-gold);
    color:        var(--sors-black);
    transform:    translateY(-2px);
}


/* ==========================================================================
   6. SECTION UTILITIES
   Reusable section background classes. Apply to Spectra Row/Group blocks
   via the Additional CSS Class field.
   ========================================================================== */

.sors-section-white     { background: #ffffff; }
.sors-section-offwhite  { background: var(--sors-bg); }
.sors-section-dark      { background: var(--sors-black); color: #ffffff; }
.sors-section-charcoal  { background: var(--sors-charcoal); color: #ffffff; }
.sors-section-gold      { background: var(--sors-gold); color: var(--sors-black); }

/* Standard section padding */
.sors-section-pad        { padding: var(--sors-space-3xl) var(--sors-space-xl); }
.sors-section-pad-sm     { padding: var(--sors-space-2xl) var(--sors-space-xl); }

/* Max-width content container */
.sors-container {
    max-width:  1200px;
    margin:     0 auto;
    width:      100%;
}


/* ==========================================================================
   7. GOLD ACCENT LABEL
   The small uppercase gold labels used above every section heading.
   Apply class 'sors-label' to a Spectra Advanced Heading or Paragraph block.
   ========================================================================== */

.sors-label {
    font-size:      var(--sors-text-xs);
    font-weight:    var(--sors-weight-bold);
    letter-spacing: var(--sors-tracking-widest);
    text-transform: uppercase;
    color:          var(--sors-gold);
    display:        block;
    margin-bottom:  14px;
}


/* ==========================================================================
   8. CARD COMPONENTS
   Reusable card styles for pillar cards, project cards, and info boxes.
   ========================================================================== */

/* Standard bordered card */
.sors-card {
    border:      var(--sors-border);
    background:  #ffffff;
    transition:  border-color 0.4s ease,
                 box-shadow   0.4s ease,
                 transform    0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position:    relative;
    overflow:    hidden;
}

.sors-card:hover {
    border-color: var(--sors-gold);
    box-shadow:   var(--sors-shadow-md);
    transform:    translateY(-6px);
}

/* Gold bottom accent on hover */
.sors-card::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    right:            0;
    height:           2px;
    background:       var(--sors-gold);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sors-card:hover::after { transform: scaleX(1); }

/* Dark card variant (for dark section backgrounds) */
.sors-card-dark {
    border:      1px solid rgba(242, 192, 48, 0.12);
    background:  rgba(255, 255, 255, 0.025);
    transition:  border-color 0.5s, background 0.5s,
                 transform    0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sors-card-dark:hover {
    border-color: rgba(242, 192, 48, 0.42);
    background:   rgba(242, 192, 48, 0.04);
    transform:    translateY(-6px);
}


/* ==========================================================================
   9. SCROLL REVEAL ANIMATION SYSTEM
   Add class 'sors-reveal' to any block. JavaScript in functions.php
   will toggle '.sors-visible' when the element enters the viewport.
   ========================================================================== */

.sors-reveal {
    opacity:    0;
    transform:  translateY(40px);
    transition: opacity    0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform  0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.sors-reveal-left {
    opacity:    0;
    transform:  translateX(-48px);
    transition: opacity    0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform  0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.sors-reveal-right {
    opacity:    0;
    transform:  translateX(48px);
    transition: opacity    0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform  0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.sors-reveal-scale {
    opacity:    0;
    transform:  scale(0.94);
    transition: opacity    0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform  0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.sors-reveal.sors-visible,
.sors-reveal-left.sors-visible,
.sors-reveal-right.sors-visible,
.sors-reveal-scale.sors-visible {
    opacity:   1;
    transform: none;
}


/* ==========================================================================
   10. ROTOR SVG MOTIF UTILITY
   ========================================================================== */

@keyframes sors-rotor-spin    { to { transform: rotate(360deg);  } }
@keyframes sors-rotor-reverse { to { transform: rotate(-360deg); } }
@keyframes sors-float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-10px); }
}

.sors-rotor-spin    { animation: sors-rotor-spin    18s linear infinite; }
.sors-rotor-reverse { animation: sors-rotor-reverse 12s linear infinite; }
.sors-rotor-float   { animation: sors-float 6s ease-in-out infinite; }


/* ==========================================================================
   11. SPECTRA BLOCK OVERRIDES
   Fine-tune Spectra-generated markup to match the SORS design system.
   ========================================================================== */

/* Spectra Advanced Heading */
.wp-block-uagb-advanced-heading .uagb-heading-text {
    font-family:    var(--sors-font) !important;
    letter-spacing: var(--sors-tracking-tight) !important;
}

/* Spectra Info Box */
.wp-block-uagb-info-box {
    transition: var(--sors-transition-slow);
}

/* Spectra Buttons */
.wp-block-uagb-buttons-child .uagb-button__link {
    font-family:    var(--sors-font) !important;
    letter-spacing: var(--sors-tracking-wider) !important;
    text-transform: uppercase !important;
    border-radius:  var(--sors-radius-none) !important;
}

/* Spectra Divider — gold override */
.sors-divider-gold .wp-block-uagb-separator .uagb-sep-element {
    background: var(--sors-gold) !important;
    border-color: var(--sors-gold) !important;
}


/* ==========================================================================
   12. FORM OVERRIDES (WPForms)
   ========================================================================== */

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form select,
.wpforms-form textarea {
    font-family:   var(--sors-font);
    font-size:     var(--sors-text-sm);
    border:        1.5px solid rgba(32, 30, 30, 0.15);
    border-radius: var(--sors-radius-none);
    padding:       14px 18px;
    transition:    border-color 0.3s ease;
    background:    #ffffff;
    color:         var(--sors-text);
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    outline:      none;
    border-color: var(--sors-gold);
    box-shadow:   0 0 0 3px rgba(242, 192, 48, 0.12);
}

.wpforms-form .wpforms-submit {
    background:     var(--sors-gold);
    color:          var(--sors-black);
    font-family:    var(--sors-font);
    font-weight:    var(--sors-weight-bold);
    font-size:      var(--sors-text-xs);
    letter-spacing: var(--sors-tracking-wider);
    text-transform: uppercase;
    padding:        17px 38px;
    border:         none;
    border-radius:  var(--sors-radius-none);
    cursor:         pointer;
    transition:     transform 0.22s ease, box-shadow 0.3s ease;
}

.wpforms-form .wpforms-submit:hover {
    transform:   translateY(-2px);
    box-shadow:  var(--sors-shadow-gold);
}


/* ==========================================================================
   13. FOOTER OVERRIDES
   ========================================================================== */

.site-footer {
    background:    var(--sors-black);
    color:         rgba(255, 255, 255, 0.45);
    border-top:    1px solid rgba(242, 192, 48, 0.10);
}

.site-footer a {
    color:      rgba(255, 255, 255, 0.45);
    transition: color 0.25s ease;
}

.site-footer a:hover {
    color: var(--sors-gold);
}


/* ==========================================================================
   14. RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 1024px) {
    .sors-section-pad    { padding: 72px 36px; }
    .sors-section-pad-sm { padding: 56px 36px; }
}

@media (max-width: 768px) {
    .sors-section-pad    { padding: 64px 24px; }
    .sors-section-pad-sm { padding: 48px 24px; }
}

@media (max-width: 480px) {
    .sors-section-pad    { padding: 56px 20px; }
    .sors-section-pad-sm { padding: 40px 20px; }
}


/* ==========================================================================
   END OF SORS CHILD THEME STYLESHEET
   All further custom styles should be added BELOW this line, organised
   by page or component in clearly labelled comment blocks.
   ========================================================================== */