/*
Theme Name:  shoraio
Theme URI:   https://shoraio.ai
Description: shoraio.ai — Agentic AI for the Future of Work and Life. Minimal base theme, built for Elementor.
Author:      Thorsten Petter
Author URI:  https://shoraio.ai
Version:     4.0.0
License:     Private
Text Domain: shoraio
*/

/* ============================================================
   DESIGN SYSTEM — CSS VARIABLES
   These are available globally across all pages and Elementor widgets.
============================================================ */
:root {
    --soft-indigo:    #8A9CC9;
    --metallic-rose:  #D7A9B6;
    --blush-ocher:    #E9C46A;
    --off-white:      #F8F8F5;
    --ink-blue:       #2C3E50;
    --ink-blue-light: rgba(44, 62, 80, 0.7);
    --shadow-soft:    0 4px 20px rgba(44, 62, 80, 0.1);
    --shadow-elevated:0 8px 40px rgba(44, 62, 80, 0.15);
    --transition:     0.3s ease;
    --font-display:   'Orbitron', sans-serif;
    --font-body:      'Rajdhani', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
    font-family: var(--font-body);
    background-color: var(--off-white);
    color: var(--ink-blue);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ── SITE WRAPPER ── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }

/* ── ELEMENTOR PAGE CANVAS ── */
/* Push content below fixed header on non-homepage pages */
body:not(.home) .site-content,
body:not(.home) .elementor-section-wrap,
/* Desktop: push content below fixed 80px header */
body:not(.home) .site-content { padding-top: 80px; }

/* ── FOOTER ── */
.site-footer {
    background-color: var(--off-white);
    border-top: 1px solid rgba(44, 62, 80, 0.1);
}
.footer-main {
    max-width: 1400px; margin: 0 auto;
    padding: 60px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
.footer-left  { display: flex; flex-direction: column; gap: 24px; }
.footer-logo  {
    font-family: var(--font-display); font-size: 20px; font-weight: 600;
    color: var(--ink-blue); text-decoration: none;
}
.footer-nav, .footer-nav ul {
    display: flex; flex-direction: column; gap: 12px;
    list-style: none; margin: 0; padding: 0;
}
.footer-nav a {
    font-size: 14px; font-weight: 500;
    color: var(--ink-blue); text-decoration: none;
    transition: color var(--transition); width: fit-content;
}
.footer-nav a:hover { color: var(--blush-ocher); }

.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer-contact-title { font-size: 16px; font-weight: 600; color: var(--ink-blue); }
.footer-contact-text  {
    font-size: 14px; color: var(--ink-blue-light);
    line-height: 1.7; text-align: right;
}
.footer-contact-text a { color: var(--soft-indigo); text-decoration: none; }
.footer-contact-text a:hover { color: var(--blush-ocher); }

.footer-bottom {
    max-width: 1400px; margin: 0 auto; padding: 20px 60px;
    border-top: 1px solid rgba(44, 62, 80, 0.1);
    display: flex; justify-content: space-between; align-items: center;
}
.social-links { display: flex; gap: 16px; }
.social-link  {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-blue);
    transition: color var(--transition), transform var(--transition);
}
.social-link:hover { color: var(--soft-indigo); transform: translateY(-2px); }
.social-link svg { width: 20px; height: 20px; }

.legal-links, .legal-links ul {
    display: flex; gap: 8px; align-items: center;
    list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
.legal-links li + li::before { content: "|"; color: var(--ink-blue-light); font-size: 12px; }
.legal-separator { color: var(--ink-blue-light); font-size: 12px; }
.legal-links a  {
    font-size: 12px; color: var(--ink-blue-light);
    text-decoration: none; transition: color var(--transition);
}
.legal-links a:hover { color: var(--ink-blue); }

/* ── ELEMENTOR GLOBAL OVERRIDES ── */
/* Make Elementor use our fonts */
.elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); }
.elementor-widget-text-editor { font-family: var(--font-body); font-size: 17px; line-height: 1.8; }

/* ── UTILITY CLASSES (usable in Elementor CSS classes field) ── */
.text-indigo   { color: var(--soft-indigo) !important; }
.text-ocher    { color: var(--blush-ocher) !important; }
.text-inkblue  { color: var(--ink-blue) !important; }
.bg-offwhite   { background-color: var(--off-white) !important; }
.bg-indigo     { background-color: var(--soft-indigo) !important; }
.font-display  { font-family: var(--font-display) !important; }
.font-body     { font-family: var(--font-body) !important; }

/* ── BUTTONS (Elementor button style overrides) ── */
.elementor-button.elementor-button-primary,
.e-btn-primary {
    background-color: var(--soft-indigo) !important;
    color: var(--off-white) !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    transition: background-color var(--transition), transform var(--transition) !important;
}
.elementor-button.elementor-button-primary:hover,
.e-btn-primary:hover {
    background-color: var(--blush-ocher) !important;
    color: var(--ink-blue) !important;
    transform: scale(1.02) !important;
}

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .site-header { padding: 0 40px; }
    .footer-main { padding: 40px; gap: 40px; }
    .footer-bottom { padding: 24px 40px; }
}

/* ── MOBILE — Elementor breakpoint is 767px ── */
@media (max-width: 767px) {

    /* Header */
    .site-header { padding: 0 20px; height: 64px; }
    .site-logo   { font-size: 18px; }

    /* Hide nav, show hamburger */
    .header-nav  { display: none !important; }
    .nav-toggle  { display: flex !important; }

    /* Mobile nav open state */
    .header-nav.open {
        display: flex !important;
        position: fixed;
        top: 64px;
        left: 0; right: 0;
        background: var(--off-white);
        box-shadow: var(--shadow-elevated);
        flex-direction: column !important;
        padding: 16px 20px 24px;
        gap: 0;
        z-index: 999;
    }
    .header-nav.open ul,
    .header-nav.open .header-nav-list {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100%;
    }
    .header-nav.open li {
        border-bottom: 1px solid rgba(44,62,80,0.08);
        width: 100%;
    }
    .header-nav.open a,
    .header-nav.open .header-nav-list li a {
        display: block;
        padding: 16px 0;
        font-size: 18px;
        color: var(--ink-blue) !important;
    }
    .header-nav.open a::after,
    .header-nav.open .header-nav-list li a::after { display: none; }

    /* Don't push content down with padding — Elementor handles its own spacing */
    body:not(.home) .site-content    { padding-top: 64px; }
    body:not(.home) .elementor       { padding-top: 0; }
    body:not(.home) .elementor-section-wrap { padding-top: 0; }

    /* Footer */
    .footer-main    { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; }
    .footer-right   { align-items: flex-start; }
    .footer-contact-text { text-align: left; }
    .footer-bottom  { flex-direction: column; gap: 16px; padding: 20px; }
    .legal-links, .legal-links ul { justify-content: center; flex-wrap: wrap; }

    /* White hamburger on homepage over video */
    .home .site-header:not(.scrolled) .nav-toggle span { background-color: var(--off-white); }
}

/* ── DESKTOP — always show nav, hide hamburger ── */
@media (min-width: 768px) {
    .nav-toggle  { display: none !important; }
    .header-nav  { display: flex !important; }
}

/* ── ELEMENTOR MOBILE FIXES ── */
@media (max-width: 767px) {
    /* Reduce section side padding */
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /* Stack two-column layouts */
    .elementor-col-50 {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Hero box */
    .elementor-widget-html div[style*="border-radius:16px"] {
        padding: 28px 20px !important;
    }
    /* CTA block */
    .elementor-widget-html div[style*="linear-gradient(135deg,#8A9CC9"] {
        padding: 36px 20px !important;
    }
    .elementor-widget-html div[style*="linear-gradient(135deg,#8A9CC9"] a {
        display: block !important;
        margin: 0 0 12px 0 !important;
        text-align: center;
    }
    /* Form grid — stack on mobile */
    .elementor-widget-html [style*="grid-template-columns:1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--blush-ocher);
    outline-offset: 2px;
}

/* ── CONTACT FORM 7 — Brand Styling ── */
.wpcf7-form {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
}

/* Field labels */
.wpcf7-form label {
    display: block;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-blue, #2C3E50);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* All input fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 16px;
    color: var(--ink-blue, #2C3E50);
    background-color: #ffffff;
    border: 1px solid rgba(44, 62, 80, 0.25);
    border-radius: 4px;
    padding: 11px 14px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 16px;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--soft-indigo, #8A9CC9);
    box-shadow: 0 0 0 3px rgba(138, 156, 201, 0.2);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: rgba(44, 62, 80, 0.4);
}

/* Textarea */
.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Checkbox + acceptance */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
}
.wpcf7-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--soft-indigo, #8A9CC9);
    cursor: pointer;
}
.wpcf7-form .wpcf7-list-item-label,
.wpcf7-form .wpcf7-acceptance span {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 14px;
    color: rgba(44, 62, 80, 0.7);
    line-height: 1.5;
}
.wpcf7-form .wpcf7-acceptance a,
.wpcf7-form .wpcf7-list-item-label a {
    color: var(--soft-indigo, #8A9CC9);
    text-decoration: none;
}
.wpcf7-form .wpcf7-acceptance a:hover {
    color: var(--blush-ocher, #E9C46A);
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
    width: 100%;
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 13px 32px;
    background-color: var(--soft-indigo, #8A9CC9);
    color: var(--off-white, #F8F8F5);
    border: 2px solid var(--soft-indigo, #8A9CC9);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 8px;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: var(--blush-ocher, #E9C46A);
    border-color: var(--blush-ocher, #E9C46A);
    color: var(--ink-blue, #2C3E50);
    transform: scale(1.02);
}

/* Validation messages */
.wpcf7-not-valid-tip {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 13px;
    color: var(--metallic-rose, #D7A9B6);
    margin-top: -12px;
    margin-bottom: 8px;
    display: block;
}
.wpcf7-response-output {
    font-family: var(--font-body, 'Rajdhani', sans-serif);
    font-size: 15px;
    padding: 14px 18px;
    border-radius: 4px;
    margin-top: 16px;
    border: none !important;
}
.wpcf7-mail-sent-ok {
    background-color: rgba(138, 156, 201, 0.15);
    color: var(--ink-blue, #2C3E50);
    border-left: 3px solid var(--soft-indigo, #8A9CC9) !important;
}
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
    background-color: rgba(215, 169, 182, 0.15);
    color: var(--ink-blue, #2C3E50);
    border-left: 3px solid var(--metallic-rose, #D7A9B6) !important;
}

/* Spinner */
.wpcf7-spinner {
    background-color: var(--soft-indigo, #8A9CC9) !important;
}