/* 
 * Ravindran Advocates & Solicitors - Global Styles
 * Based on Brand Guidelines (Option 2)
 */

:root {
    /* Color Palette */
    --clr-ebony-clay: #1F2A44;
    --clr-glacier: #86B2C3;
    --clr-sprout: #b0daaf;
    --clr-taupe: #C6BEB1;
    --clr-white: #FFFFFF;
    --clr-light-gray: #f2f2f2;

    /* Typography */
    --font-heading-thin: 'Aboreto', cursive;
    --font-heading-bold: 'Montserrat', sans-serif;
    --font-heading: var(--font-heading-thin);
    --font-body: 'Open Sans', sans-serif;

    /* Layout */
    --header-padding: 5vw;
}

@media (min-width: 768px) {
    :root {
        --header-padding: 2vw;
    }
}

/* Global Reset & Base Elements */
html {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    /* body text font style: open sans weight 400 */
    color: var(--clr-ebony-clay);
    background-color: var(--clr-white);
    /* offset removed for overlay navbar */
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading-thin {
    font-family: var(--font-heading-thin);
    font-weight: 400;
    /* Default heading font style: aboreto weight 400 */
}

h1 b,
h1 strong,
h1 .fw-bold,
h2 b,
h2 strong,
h2 .fw-bold,
h3 b,
h3 strong,
h3 .fw-bold,
h4 b,
h4 strong,
h4 .fw-bold,
h5 b,
h5 strong,
h5 .fw-bold,
h6 b,
h6 strong,
h6 .fw-bold,
.font-heading-bold {
    font-family: var(--font-heading-bold);
    font-weight: 600;
    /* hero words font style: montserrat weight 600 */
}


/* Aboreto: css class for variable style */
.aboreto-resort {
    font-family: "Aboreto", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Montserrat css class for variable style */
.montserrat-resort {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

/* Open Sans: CSS class for a variable style */
.open-sans-resort {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

/* Typography Utility Classes */
.text-ebony-clay {
    color: var(--clr-ebony-clay);
}

.text-glacier {
    color: var(--clr-glacier);
}

.text-sprout {
    color: var(--clr-sprout);
}

.text-taupe {
    color: var(--clr-taupe);
}

.bg-ebony-clay {
    background-color: var(--clr-ebony-clay);
}

.bg-glacier {
    background-color: var(--clr-glacier);
}

.bg-sprout {
    background-color: var(--clr-sprout);
}

.bg-taupe {
    background-color: var(--clr-taupe);
}

.bg-light-gray {
    background-color: var(--clr-light-gray);
}

/* Navigation Overlay Base */
.custom-navbar {
    z-index: 1050;
    background-color: transparent !important;
    pointer-events: none;
    /* Let clicks pass through to hero */
}

.navbar-brand {
    position: relative;
    z-index: 1050;
}

.custom-navbar .d-flex {
    pointer-events: auto;
    /* Catch clicks on navbar items */
}

.brand-logo-img {
    height: 36px;
    width: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.logo-white {
    display: none;
}

.header-alt-white .logo-default {
    display: none;
}

.header-alt-white .logo-white {
    display: block;
}

/* Force logo switch when menu is open - MOBILE ONLY */
@media (max-width: 767px) {

    /* Default (Dark Blue Circle): Show White Logo */
    .custom-navbar:has(.menu-open):not(.header-alt-white) .logo-default {
        display: none !important;
    }

    .custom-navbar:has(.menu-open):not(.header-alt-white) .logo-white {
        display: block !important;
    }

    /* Alt White (White Circle): Show Dark Blue Logo */
    .custom-navbar:has(.menu-open).header-alt-white .logo-default {
        display: block !important;
    }

    .custom-navbar:has(.menu-open).header-alt-white .logo-white {
        display: none !important;
    }
}

/* Menu Toggle Button */
.menu-toggle-btn {
    background: transparent;
    border: none;
    padding: 10px 0;
    /* Zero side padding to perfectly align text to boundary */
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 1055;
    /* Higher than the dropdown to ensure 'MENU' remains visible */
}

.menu-text {
    font-weight: 300;
    /* Thin and light */
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--clr-ebony-clay);
    transition: color 0.5s ease;
}

/* Dark Background Header Alternative */
.header-alt-white .menu-text {
    color: var(--clr-white);
}

/* Force correct contrast when menu is open */
.custom-navbar:has(.menu-open) .menu-text,
.custom-navbar:has(.menu-open) .menu-close-icon {
    color: var(--clr-white) !important;
    /* Default for dark blue menu circle */
}

/* Override for light menu circle (on dark sections) */
.header-alt-white:has(.menu-open) .menu-text,
.header-alt-white:has(.menu-open) .menu-close-icon {
    color: var(--clr-ebony-clay) !important;
}

.menu-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    /* Ensure enough space for word and symbol */
}

.menu-text,
.menu-close-icon {
    grid-column: 1;
    grid-row: 1;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle-btn {
    display: grid;
    place-items: center;
}

.menu-close-icon {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    visibility: hidden;
    font-size: 1.2rem;
    color: var(--clr-ebony-clay);
}

.header-alt-white .menu-close-icon {
    color: var(--clr-white);
}

.menu-toggle-btn.is-active .menu-text {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
    visibility: hidden;
}

.menu-toggle-btn.is-active .menu-close-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    visibility: visible;
}

/* Custom Dropdown Menu (Expanding Circle) */
.custom-dropdown-menu {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100vh;
    background-color: var(--clr-ebony-clay);
    /* Default dark blue menu circle */
    /* Set padding to match header layout so links perfectly align with 'MENU' button */
    padding-top: calc(var(--header-padding) + 80px);
    /* 80px clears the logo height more comfortably on mobile */
    padding-right: var(--header-padding);
    padding-left: var(--header-padding);
    /* Clip path circle starts at top center */
    clip-path: circle(0px at top center);
    opacity: 0;
    visibility: hidden;
    transition: clip-path 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1040;
    /* Lower than .menu-toggle-btn */
    text-align: center;
}

.custom-dropdown-menu.menu-open {
    opacity: 1;
    visibility: visible;
    /* Radius large enough to cover mobile screen corners from top-center */
    clip-path: circle(120% at top center);
}

.header-alt-white .custom-dropdown-menu {
    background-color: var(--clr-white);
    /* White menu circle for dark pages */
}

@media (min-width: 768px) {
    .custom-dropdown-menu {
        width: 700px;
        height: 700px;
        left: auto;
        right: 0;
        transform: none;
        clip-path: circle(0px at top right);
        text-align: right;
    }

    .custom-dropdown-menu.menu-open {
        clip-path: circle(450px at top right);
    }
}

.nav-list {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
}

/* Staggered Animation for Nav Items */
.nav-list .nav-item {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-dropdown-menu.menu-open .nav-item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--anim-order) * 0.08s + 0.1s);
    /* Slight delay after circle starts */
}

.nav-list .nav-link {
    color: var(--clr-white);
    /* White text for dark blue circle */
    text-decoration: none;
    /* No underline unless hovered */
    font-size: 1.1rem;
    padding: 10px 0;
    /* Removing side padding to allow strictly right-aligned stacking */
    display: block;
    font-weight: 300;
    transition: color 0.2s ease;
    position: relative;
    /* Anchor for absolutely positioning the blue dot */
}

.nav-list .nav-link:hover,
.nav-list .nav-link:focus,
.nav-list .nav-link.active {
    text-decoration: underline;
    color: var(--clr-sprout) !important;
}

.header-alt-white .nav-list .nav-link {
    color: var(--clr-ebony-clay);
    /* Dark blue text for white circle */
}

/* Hover effects */
.hover-sprout:hover {
    color: var(--clr-sprout) !important;
    transition: color 0.3s ease;
}

.btn-outline-sprout {
    color: var(--clr-sprout);
    border-color: var(--clr-sprout);
}

.btn-outline-sprout:hover {
    background-color: var(--clr-sprout);
    color: var(--clr-ebony-clay);
}

.btn-sprout {
    background-color: var(--clr-sprout);
    color: var(--clr-ebony-clay);
    border-color: var(--clr-sprout);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.btn-sprout:hover {
    background-color: #4dc59c;
    /* Slightly darker sprout */
    color: var(--clr-ebony-clay);
}

.btn-submit {
    background-color: var(--clr-ebony-clay);
    color: #fff;
    border: none;
    padding: 1rem 3rem;
    border-radius: 50px;
    font-family: var(--font-heading-bold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    transition: all 0.3s;
    margin-top: 1rem;
}

.btn-submit:hover {
    background-color: var(--clr-sprout);
    color: var(--clr-ebony-clay);
    transform: translateY(-3px);
}

/* Layout Utilities */
.page-content {
    min-height: calc(100vh - 300px);
    /* Body - Footer */
}

/* Geometric motifs (Circles/Dots) */
.circle-motif {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.circle-motif-lg {
    width: 400px;
    height: 400px;
}

/* Overlapping Text Flow */
.hero-headline {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* test */

/* Loading Spinner for Search/Filters */
.search-spinner {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(31, 42, 68, 0.1);
    border-top: 2px solid var(--clr-sprout);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
    z-index: 4;
}

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Trust Indicators - New Bubble Design */
.trust-indicators-section {
    background-color: var(--clr-white);
    overflow: hidden;
    position: relative;
}

.trust-bubbles-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 700px;
    margin: 0 auto;
}

.trust-headline {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    pointer-events: none;
}

.trust-headline-back {
    z-index: 2;
    opacity: 0.2;
}

.trust-headline-front {
    z-index: 10;
    opacity: 1;
}

.trust-headline h3 {
    font-family: var(--font-heading-thin);
    font-size: clamp(3.5rem, 10vw, 9rem);
    line-height: 0.85;
    margin-bottom: 0;
    color: var(--clr-ebony-clay);
    mix-blend-mode: multiply;
}

/* Base Bubble Styles */
.trust-bubble {
    position: absolute;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.trust-bubble:hover {
    transform: scale(1.05);
}

/* Dimming effect for other bubbles */
.trust-indicators-section.has-active .trust-bubble:not(.is-active) {
    opacity: 0.3;
    filter: grayscale(1);
    pointer-events: none;
}

/* Active State Styling */
.trust-bubble.is-active {
    z-index: 100 !important;
    transform: scale(1.15);
    /* Slightly increased from 1.1 to distinguish from hover */
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    align-items: center;
    text-align: center;
}

/* Individual Active Backgrounds (shifting to border color) */
.bubble-lc-seow.is-active {
    background-color: #71a1b4;
}

/* Darker Glacier */
.bubble-malisse.is-active {
    background-color: var(--clr-glacier);
}

.bubble-abang.is-active {
    background-color: #98c897;
}

/* Darker Sprout */
.bubble-fadzli.is-active {
    background-color: var(--clr-glacier);
}

.bubble-hetal.is-active {
    background-color: var(--clr-glacier);
}

.bubble-michele.is-active {
    background-color: #b3aba0;
}

/* Darker Taupe */

/* Outline bubbles fill in on active */
.trust-bubble[class*="bubble-"]:not([style*="background-color"]).is-active {
    border-color: transparent;
}

/* Specific Bubble Position and Styling */
/* LC SEOW - Bottom Left Blue */
.bubble-lc-seow {
    width: 380px;
    height: 380px;
    background-color: var(--clr-glacier);
    bottom: 0;
    left: 0;
    z-index: 5;
    opacity: 0.85;
}

/* MALISSE TAN - Top Center Left White Outline */
.bubble-malisse {
    width: 320px;
    height: 320px;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-glacier);
    top: 5%;
    left: 20%;
    z-index: 4;
}

/* ABANG BRIAN - Center Right Green */
.bubble-abang {
    width: 250px;
    height: 250px;
    background-color: var(--clr-sprout);
    top: 25%;
    right: 32%;
    z-index: 6;
    opacity: 0.9;
}

/* MOHD FADZLI JOHAN - Top Right White Outline */
.bubble-fadzli {
    width: 400px;
    height: 400px;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-glacier);
    top: 0;
    right: 0;
    z-index: 3;
}

/* HETAL DOSHI - Bottom Center White Outline */
.bubble-hetal {
    width: 280px;
    height: 280px;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-glacier);
    bottom: 12%;
    left: 38%;
    z-index: 4;
}

/* MICHELE MAHENDRA - Bottom Right Taupe */
.bubble-michele {
    width: 350px;
    height: 350px;
    background-color: var(--clr-taupe);
    bottom: 5%;
    right: calc(15% - 175px);
    z-index: 5;
    opacity: 0.85;
}

/* Bubble Text Styling */
.trust-bubble .client-name {
    font-family: var(--font-heading-bold);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    color: var(--clr-ebony-clay);
    transition: color 0.3s ease;
}

.trust-bubble.text-white .client-name,
.trust-bubble.is-active .client-name {
    color: var(--clr-white);
}

.trust-bubble .client-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-ebony-clay);
    opacity: 0.7;
    line-height: 1.2;
    max-width: 180px;
    transition: all 0.3s ease;
}

.trust-bubble.text-white .client-title,
.trust-bubble.is-active .client-title {
    color: var(--clr-white);
    opacity: 0.9;
}

/* Testimonial Content Reveal */
.testimonial-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    margin-top: 0;
}

.trust-bubble.is-active .testimonial-content {
    max-height: 200px;
    opacity: 1;
    margin-top: 1.5rem;
}

.testimonial-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--clr-white);
    margin-bottom: 0;
    font-style: italic;
}

.trust-bubble i.arrow-right {
    font-size: 1rem;
    margin-top: 1rem;
    opacity: 0.4;
    color: var(--clr-ebony-clay);
    transition: all 0.3s ease;
}

.trust-bubble.text-white i.arrow-right,
.trust-bubble.is-active i.arrow-right {
    color: var(--clr-white);
    opacity: 0.8;
}

.trust-bubble.is-active i.arrow-right {
    transform: rotate(90deg);
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    .trust-bubbles-wrapper {
        height: 600px;
    }

    .trust-headline h3 {
        font-size: 5rem;
    }

    .trust-bubble {
        transform: scale(0.8);
    }
}

@media (max-width: 767px) {
    .trust-bubbles-wrapper {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        padding: 4rem 1rem;
    }

    .trust-headline {
        margin-bottom: 2rem;
    }

    .trust-headline-back {
        display: none !important;
    }

    .trust-headline-front {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        width: 100%;
        margin: 0;
    }

    .trust-headline h3 {
        font-size: 3rem;
    }

    .trust-bubble {
        position: static;
        width: 100% !important;
        height: auto !important;
        border-radius: 50px;
        transform: none;
        padding: 2rem;
        aspect-ratio: auto;
    }
}

/* Footer Styles */
.footer-section {
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.05em;
}

.footer-section > .container {
    padding-left: var(--header-padding);
    padding-right: var(--header-padding);
}

/* Mobile Navbar Background Scroll Feature */
@media (max-width: 767px) {
    .custom-navbar {
        transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease !important;
    }
    .custom-navbar.navbar-scrolled {
        background-color: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
    }
    .custom-navbar.navbar-scrolled.header-alt-white {
        background-color: rgba(31, 42, 68, 0.6) !important;
    }
}

.footer-newsletter-headline {
    font-family: var(--font-heading-thin);
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--clr-ebony-clay);
    max-width: 600px;
}

.footer-newsletter-subheadline {
    font-family: var(--font-heading-bold);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.footer-newsletter-form input::placeholder {
    color: var(--clr-glacier);
    font-size: 0.8rem;
    font-weight: 600;
}

.footer-logo {
    height: 36px;
    width: auto;
}

.footer-heading {
    font-family: var(--font-heading-bold);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Global Outgoing Link Transition */
.global-transition-dot {
    position: fixed;
    border-radius: 50%;
    background-color: var(--clr-ebony-clay);
    pointer-events: none;
    z-index: 999999;
}

.footer-address {
    line-height: 1.6;
    color: var(--clr-glacier);
}

.footer-links li a {
    transition: color 0.3s ease;
}

.footer-links li a:hover {
    color: var(--clr-glacier) !important;
}

.footer-bottom {
    letter-spacing: 0.1em;
    font-weight: 500;
}

.footer-bottom a:hover {
    color: var(--clr-glacier) !important;
}

@media (max-width: 991px) {
    .footer-newsletter-headline {
        font-size: 1.8rem;
    }

    .footer-logo {
        height: 36px;
        width: auto;
    }
}

@media (max-width: 767px) {
    .footer-newsletter-headline {
        font-size: 1.5rem;
    }

    .footer-bottom {
        text-align: center;
    }
}

/* --- PRELOADER ANIMATION --- */
#preloader-wrapper {
    position: fixed;
    inset: 0;
    /* Initialize with dark background to prevent sprout flash */
    background-color: var(--clr-ebony-clay);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

#logo-container {
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

#main-logo-svg {
    height: 100%;
    width: auto;
    overflow: visible;
}

#center-dot {
    fill: var(--clr-ebony-clay);
    /* Ebony Clay Dark Blue */
    transform-origin: center center;
}

.outer-dot,
.text-paths {
    fill: var(--clr-ebony-clay);
}

/* Hide SVG elements before GSAP initializes them */
.outer-dot {
    opacity: 0;
}

#logo-typography-group,
#logo-grid-group {
    opacity: 0;
}

#loading-text {
    position: absolute;
    color: var(--clr-white);
    font-weight: 700;
    letter-spacing: 0.2em;
    z-index: 10;
    font-family: var(--font-heading-bold);
    font-size: 0.8rem;
    pointer-events: none;
}
/* Hide reCAPTCHA badge */
.grecaptcha-badge { visibility: hidden; }