/* ============================================================
   FILE: /assets/css/universal.css
   PURPOSE: Global styles & variables for Vivid Vista Creations
   NOTES:
   - Mobile-first
   - WCAG-aware contrasts based on your palette
   ============================================================ */

:root {
    /* Brand colors (from your brief) */
    --color-main: #38004a;
    --color-main-dark: #2a0038;
    --color-main-dark-2: #1a0322;
    --color-secondary: #333333;
    --color-sub-0: #926c9e;
    --color-sub-1: #e5bdeb;
    --color-sub-2: #c4c4c4;

    /* Neutrals */
    --color-bg: #f7f5f9;
    --color-white: #ffffff;
    --color-text: #222222;
    --color-border: #9c9c9c;

    /* Feedback */
    --color-success: #2f855a;
    --color-warning: #b7791f;
    --color-error: #b54a4a;

    /* Layout */
    --container-width: 100%;
    --radius-md: 8px;
    --radius-lg: 16px;
    --btn-radius: 999px;

    /* Spacing (4/8px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 50px;
    --space-10: 100px;
    --space-11: 200px;
}

.site-main {
    padding-top: 0 !important;
}
.bg{
    position: absolute;
    z-index: -2;
}

/* Full-width hero */
.hero {
    width: 100%;
    height: 600px;
    padding: var(--space-7) 0;
    padding-top: 100px;
    background-color: var(--color-main-dark-2);
    /* background:
        url('../img/vivid-vista-creations-website-design-development-company-hero-image-2.png') center/cover no-repeat,
        radial-gradient(circle at top left, rgba(56, 0, 74, 0.18) 0, transparent 55%),
        radial-gradient(circle at bottom right, rgba(229, 189, 235, 0.85) 0, transparent 55%),
        linear-gradient(135deg, #faf7fc 0%, #f4edf9 60%, #f7f5f9 100%); */
    border-bottom: 1px solid var(--color-border);
}

/* Hero content aligned left, not centered */
.hero-header {
    width: 80%;
    margin-left: 9%;
    /* background-color: rgba(255, 255, 255, 0.96); */
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    /* box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.9); */
}
.hero-kicker {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-white);
    margin-bottom: var(--space-2);
}
.hero-title {
    font-size: 3rem;
    width: 60%;
    margin: 0 0 var(--space-3);
    color: var(--color-white);
}
.hero-lead {
    width: 45%;
    font-size: 1rem;
    margin-bottom: var(--space-4);
    color: var(--color-sub-2);
}
/* hero rating */
.hero-rating{
    margin-top: 20px;
}
.star-icon{
    font-size: 1.5rem;
    color: goldenrod;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero-rating a{
    color: #d3b4dd;
}
.hero-rating a{
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}


@media (max-width: 450px) {
    .hero-tile, .hero-header h1 {
        line-height: 2.5rem;
        font-size: 2rem;
        width: 100%;
        margin-top: 50px;
    }
    .hero-rating{
        margin-top: 10px;
    }
    .hero-header{
        width: 100%;
        margin-left: 0;
    }
    .hero-actions {
        margin-top: 50px;
    }
}

/* cusom hr */
.seperator{
    width: 100%;
    height: 3px;
    background-color: var(--color-main);

}

/* icons */
i.bi {
   font-family: "bootstrap-icons" !important;
}
.bi {
    color: var(--color-main);
    font-size: 5rem;
}

.icon-s{
    font-size: 2rem;
}
.icon-ss{
    font-size: 1.5rem;
}

.card i.large-icon {
    color: var(--color-white);
}

/* name mark */
.name-mark{
    height: 19px;
}

/* Base reset-ish */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.site-body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

/* wrappers */
.wrapper{
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.center{
    text-align: center;
    padding: 20px;
}
.inline{
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
    padding-right: 20px;
}
.inline div{
    margin-top: 25px;
}

/* Logo */
.logo {
    display: inline-flex;
    align-items: center;
 
}
.logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

/* Header & Nav */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    position: fixed;
    z-index: 5;
}
.header-inner {
    width: 80%;
    margin-left: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.main-nav {
    position: relative;
}
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.nav-item {
    display: block;
}
.nav-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: var(--color-secondary);
    font-size: 0.95rem;
}
.nav-link:hover,
.nav-link.is-active {
    color: var(--color-main);
}

/* Mobile nav toggle */
.nav-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
}
.nav-toggle-bar {
    width: 18px;
    height: 2px;
    background-color: var(--color-secondary);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* When nav is open on mobile */
.nav-list.nav-open {
    display: block;
}

/* Main */
.site-main {
    padding-top: var(--space-6);
    /* padding-bottom: var(--space-6); */
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--color-border);
    background-color: #faf7fc;
}

.footer-inner {
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    font-size: 0.85rem;
}

.footer-copy {
    margin: 0;
    color: #555555;
}

.footer-links {
    margin: 0;
}

.footer-links a {
    color: var(--color-main);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}



.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
}

.btn-primary {
    background: linear-gradient(135deg, #38004a, #926c9e);
    color: var(--color-white);
    border: none; /* remove transparent border so gradient is smooth edge-to-edge */
}

.btn-primary:hover {
    background: var(--color-sub-0);
    transform: translateY(-1px);
    /* box-shadow: 0 18px 45px rgba(63, 0, 100, 0.45); */
    filter: brightness(1.03);
}

.btn-primary-ondark {
    background: linear-gradient(135deg, #38004a, #926c9e);
    color: var(--color-white);
    border: none; /* same fix as primary, no transparent border */
    /* transition comes from .btn */
}

.btn-primary-ondark:hover {
    background: var(--color-sub-0);
    transform: translateY(-1px);
    /* box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55); */
    filter: brightness(1.03);
}

.btn-outline {
    background: transparent;
    border-color: var(--color-sub-2);
    color: var(--color-secondary);
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
}

.btn-outline:hover {
    color: var(--color-main);
    transform: translateY(-1px);
    /* box-shadow: 0 18px 45px rgba(63, 0, 100, 0.45); */
}

/* on-dark outline, for hero area */
.btn-outline-ondark {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--color-sub-1);
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out, border-color 140ms ease-out;
}

.btn-outline-ondark:hover {
    border-color: var(--color-sub-1);
    color: var(--color-white);
    transform: translateY(-1px);
    /* box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55); */
}



/* Headings spacing */
h1, h2, h3 {
    color: var(--color-secondary);
    margin-top: 0;
}

/* Cards layout (for services/projects later) */
.grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 768px) {

    .nav-list {
        display: flex;
    }

    .nav-item {
        display: inline-block;
    }

    .nav-toggle {
        display: none;
    }

    .footer-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* form section */

/* Honeypot field (hidden from humans) */
.hp-field {
    display: none;
}


.form-section {
    margin-top: 50px;
    width: 80%;
    margin-left: 10%;
}

.form-intro {
    max-width: 720px;
    margin-bottom: var(--space-4);
}

.form-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Grid helpers for two-column layouts on larger screens */
.form-grid {
    display: grid;
    gap: var(--space-3);
}

.form-grid-2 {
    grid-template-columns: 1fr;
}

/* Individual fields */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-field label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-secondary);
}

.form-field input,
.form-field select,
.form-field textarea {
    font: inherit;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-white);
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}

/* Focus states for accessibility */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--color-main);
    outline-offset: 1px;
    border-color: var(--color-main);
}

/* Success / info messages */
.form-message {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
}

.form-message-success {
    border: 1px solid var(--color-success);
    background-color: #ecf7f1;
    color: #22543d;
}

/* Actions area (submit button) */
.form-actions {
    margin-top: var(--space-3);
}

/*cta- actions div  */
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Responsive tweaks */
@media (min-width: 768px) {
    .form-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contact-direct {
    width: 50%;
    margin-top: var(--space-6);
    
}
.contact-form{
    width: 50%;
}

.contact-direct-intro {
    margin-bottom: var(--space-3);
}

.contact-direct-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3) 0;
}

.contact-direct-list li {
    margin-bottom: var(--space-1);
    font-size: 0.95rem;
}

.contact-direct-list a {
    color: var(--color-main);
    text-decoration: none;
}

.contact-direct-list a:hover {
    text-decoration: underline;
}

.contact-direct-actions {
    margin-top: var(--space-2);
}
@media (max-width: 768px) {
    .wrapper{
        flex-direction: column;
        
    }
    .contact-form, .contact-direct{
        min-width: 100%;
    }
    .hero-header .hero-lead{
        width: 100%;
    }
    .contact-logo{
        width: 100%;
    }

    .hero{
        padding-top: 50px;
    }
}

/* ============================================================
   Install app banner (PWA prompt)
   ============================================================ */

body.site-body.has-install-banner {
    padding-bottom: 80px; /* Avoid footer being hidden behind banner */
}

.install-app-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-main-dark);
    color: var(--color-white);
    font-size: 0.9rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}

.install-app-text {
    margin: 0;
}

.install-app-actions {
    display: flex;
    gap: var(--space-2);
}

.install-app-dismiss {
    border: none;
    background: transparent;
    color: var(--color-sub-1);
    font-size: 0.85rem;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
}

@media (min-width: 768px) {
    .install-app-banner {
        left: 50%;
        transform: translateX(-50%);
        bottom: var(--space-3);
        max-width: 480px;
        border-radius: var(--radius-lg);
    }

    .legal-page{
        width: 80%;
        margin-left: 10%;
    }
}

/* ============================================================
   Home Process – Left image, Right steps
============================================================ */
.home-process .container {
    margin-left: 10%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px; /* space between image and steps */
    align-items: center;
}

/* LEFT: SVG visuals */
.home-process .process-visual {
    position: relative;
    width: 420px; /* adjust as needed */
    flex-shrink: 0;

    /* Base image adjustment controls */
    --base-x: 0px;
    --base-y: 0px;
    --base-scale: 1;
    --base-size: 43%; /* base width relative to container */
}

/* Shared base/rotor properties */
.home-process .process-base,
.home-process .process-rotor {
    display: block;
    height: auto;
}

/* ROTOR: full size, perfectly centered */
.home-process .process-rotor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    /* filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.50)); */
    transform: translate(-50%, -50%) rotate(var(--rot-deg, 0deg));
    transform-origin: 50% 50%;
    z-index: 2;

    transition: transform 850ms cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform;
}


/* BASE: centered, but adjustable */
.home-process .process-base {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--base-size);
    transform:
        translate(-50%, -50%)
        translate(var(--base-x), var(--base-y))
        scale(var(--base-scale));
    z-index: 1;
}

/* RIGHT: Steps content */
/* .home-process .project-steps {
    max-width: 720px;
} */

/* ============================================================
   Responsive: stack on mobile
============================================================ */
@media (max-width: 900px) {
    .home-process .container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .home-process .process-visual {
        width: min(360px, 90vw);
        margin-left: 0;
        margin-top: 200px;
        margin-bottom: 150px;
        display: none;
    }

    .home-process .project-steps {
        max-width: none;
    }
    .home-process .steps {
        display: none;
    }
}


/* ============================================================
   Home Process — Step hover / focus interaction
============================================================ */
.home-process .step {
    transition:
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms ease;
    transform-origin: left center;
}

.home-process .step:hover,
.home-process .step:focus-visible {
    transform: scale(1.03);
}

/* Universal Font size control */
h2{
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--color-main);
}