/* =====================================================
   SHINE GOLD JEWELLERY - MAIN CSS LOADER
   Sector CSS files are loaded automatically.
   Edit the relevant file inside css/sectors/
   ===================================================== */

@import url("css/sectors/01-base.css");
@import url("css/sectors/02-header.css");
@import url("css/sectors/03-hero.css");
@import url("css/sectors/04-buttons.css");
@import url("css/sectors/05-sections.css");
@import url("css/sectors/06-cards.css");
@import url("css/sectors/07-gold-price.css");
@import url("css/sectors/08-services.css");
@import url("css/sectors/10-contact.css");
@import url("css/sectors/11-footer.css");
@import url("css/sectors/12-floating.css");
@import url("css/sectors/13-animations.css");
@import url("css/sectors/14-responsive.css");
@import url("css/sectors/99-other.css");

/* All sector styles are loaded above. */


/* EXACT ENGLISH LANGUAGE SELECT TEXT FIX */
.language select {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
}

.language select option {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    background: #ffffff !important;
}






/* =====================================================
   4 FEATURE CARDS - FORCE 2 x 2
   ===================================================== */

main section .grid:has(> *:nth-child(4)),
main section .cards:has(> *:nth-child(4)),
main section .services:has(> *:nth-child(4)),
main section .service-grid:has(> *:nth-child(4)),
main section .category-grid:has(> *:nth-child(4)),
main section .features:has(> *:nth-child(4)) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

@media (min-width: 769px) {
    main section .grid:has(> *:nth-child(4)),
    main section .cards:has(> *:nth-child(4)),
    main section .services:has(> *:nth-child(4)),
    main section .service-grid:has(> *:nth-child(4)),
    main section .category-grid:has(> *:nth-child(4)),
    main section .features:has(> *:nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    main section .grid:has(> *:nth-child(4)),
    main section .cards:has(> *:nth-child(4)),
    main section .services:has(> *:nth-child(4)),
    main section .service-grid:has(> *:nth-child(4)),
    main section .category-grid:has(> *:nth-child(4)),
    main section .features:has(> *:nth-child(4)) {
        grid-template-columns: 1fr !important;
    }
}




/* ===== SHINE GOLD - FACEBOOK + WHATSAPP SAME SIZE ===== */

footer a:has(img[src*="facebook"]),
footer a:has(img[src*="whatsapp"]),
footer a:has(img[src*="WhatsApp"]),
footer a:has(svg) {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    box-sizing: border-box !important;
}

footer a:has(img[src*="facebook"]) img,
footer a:has(img[src*="whatsapp"]) img,
footer a:has(img[src*="WhatsApp"]) img {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
}

footer a:has(img[src*="facebook"]) svg,
footer a:has(img[src*="whatsapp"]) svg,
footer a:has(img[src*="WhatsApp"]) svg {
    width: 30px !important;
    height: 30px !important;
}









/* ===== JEWELLERY PAGE - GEMSTONE IMAGE FINAL SIZE ===== */

body[data-page="jewellery"] main img {
    width: 500px !important;
    max-width: 500px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
}


/* Keep the image balanced inside its frame */

body[data-page="jewellery"] main section img {
    width: 500px !important;
    max-width: 500px !important;
    height: auto !important;
    object-fit: contain !important;
}


/* Desktop */

@media (min-width: 769px) {

    body[data-page="jewellery"] main section img {
        width: 500px !important;
        max-width: 500px !important;
    }

}


/* Mobile */

@media (max-width: 768px) {

    body[data-page="jewellery"] main img,
    body[data-page="jewellery"] main section img {
        width: 88% !important;
        max-width: 420px !important;
        height: auto !important;
    }

}





/* ===== CONTACT INFO - PREMIUM LABEL SPACING ===== */

body[data-page="contact"] main a[href*="wa.me"] strong,
body[data-page="contact"] main a[href^="tel:"] strong,
body[data-page="contact"] main a[href*="facebook.com"] strong,
body[data-page="contact"] main a[href*="google.com/maps"] strong {
    margin-right: 14px !important;
}

/* Extra breathing room for text following the label */
body[data-page="contact"] main a[href*="wa.me"] strong + *,
body[data-page="contact"] main a[href^="tel:"] strong + *,
body[data-page="contact"] main a[href*="facebook.com"] strong + *,
body[data-page="contact"] main a[href*="google.com/maps"] strong + * {
    margin-left: 0 !important;
}







/* =====================================================
   SHINE GOLD - MOBILE HERO IMAGE PREMIUM VISIBILITY
   ===================================================== */

@media (max-width: 768px) {

    body[data-page="home"] .hero-slider {
        position: relative !important;
        overflow: hidden !important;
    }

    body[data-page="home"] .hero-slide {
        min-height: 520px !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: 78% center !important;
    }

    /* 4 EXISTING SLIDES */
    body[data-page="home"] .hero-slide:nth-child(1) {
        background-image: url("images/hero/banners/banner-01.svg") !important;
    }

    body[data-page="home"] .hero-slide:nth-child(2) {
        background-image: url("images/hero/banners/banner-02.svg") !important;
    }

    body[data-page="home"] .hero-slide:nth-child(3) {
        background-image: url("images/hero/banners/banner-03.svg") !important;
    }

    body[data-page="home"] .hero-slide:nth-child(4) {
        background-image: url("images/hero/banners/banner-04.svg") !important;
    }

    /* LIGHTER PREMIUM OVERLAY */
    body[data-page="home"] .hero-slide::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;

        background: linear-gradient(
            90deg,
            rgba(8,7,5,.62) 0%,
            rgba(8,7,5,.40) 38%,
            rgba(8,7,5,.12) 70%,
            rgba(8,7,5,.02) 100%
        ) !important;
    }

    body[data-page="home"] .hero-slide > * {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* MOBILE PHONES */
@media (max-width: 480px) {

    body[data-page="home"] .hero-slide {
        min-height: 520px !important;
        background-size: cover !important;
        background-position: 80% center !important;
    }

}





/* =====================================================
   SHINE GOLD - MOBILE GOLD PRICE TITLE FINAL FIX
   ONLY MOBILE GOLD PRICE SECTION
   ===================================================== */

@media screen and (max-width: 767px) {

    /* Gold Price section title */
    section:has(.live-badge) h1,
    section:has(.live-badge) h2,
    section:has(.live-badge) h3,
    section:has(.live) h1,
    section:has(.live) h2,
    section:has(.live) h3,
    .gold-price-section h1,
    .gold-price-section h2,
    .gold-price-section h3,
    .gold-price h1,
    .gold-price h2,
    .gold-price h3 {

        color: #2b1b0e !important;
        -webkit-text-fill-color: #2b1b0e !important;
        opacity: 1 !important;
        text-shadow: none !important;
        visibility: visible !important;
    }

    /* Gold Price description */
    section:has(.live-badge) p,
    section:has(.live) p,
    .gold-price-section p,
    .gold-price p {

        color: #554235 !important;
        -webkit-text-fill-color: #554235 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Gold Price small heading / eyebrow */
    section:has(.live-badge) .eyebrow,
    section:has(.live) .eyebrow,
    .gold-price-section .eyebrow,
    .gold-price .eyebrow {

        color: #a87516 !important;
        -webkit-text-fill-color: #a87516 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
/* ===== PRODUCTION PERFORMANCE OPTIMIZATION ===== */
img{content-visibility:auto;}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}




/* GOLD PRICE TITLE - MOBILE ONLY - FINAL */
@media screen and (max-width: 768px) {

    [data-t="gold_title"] {
        color: #5A3008 !important;
        -webkit-text-fill-color: #5A3008 !important;
        text-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
    }

}





/* =========================================================
   SHINE GOLD - PROFESSIONAL MULTI-LANGUAGE FONT SYSTEM
   Sinhala / English / Tamil
   FULL SITE + MOBILE
   ========================================================= */

/* ---------- BASE FONT VARIABLES ---------- */

:root {
    --font-si-body: "NotoSansSinhala", "Noto Sans Sinhala",
                    "Nirmala UI", "Segoe UI", Arial, sans-serif;

    --font-si-heading: "NotoSerifSinhala", "Noto Sans Sinhala",
                       "Nirmala UI", Georgia, serif;

    --font-en-body: "Segoe UI", "Noto Sans", Arial, sans-serif;
    --font-en-heading: "Georgia", "Times New Roman", serif;

    --font-ta-body: "Noto Sans Tamil", "Nirmala UI",
                    "Latha", "Segoe UI", Arial, sans-serif;

    --font-ta-heading: "Noto Serif Tamil", "Nirmala UI",
                       "Latha", Georgia, serif;
}


/* =========================================================
   SINHALA
   ========================================================= */

body[data-lang="si"] {
    font-family: var(--font-si-body) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
}

body[data-lang="si"] h1,
body[data-lang="si"] h2,
body[data-lang="si"] h3,
body[data-lang="si"] h4,
body[data-lang="si"] .hero h1,
body[data-lang="si"] .hero-copy h1,
body[data-lang="si"] .page-hero h1,
body[data-lang="si"] .section-head h2,
body[data-lang="si"] .split h2,
body[data-lang="si"] .calculator h2,
body[data-lang="si"] .contact-panel h2,
body[data-lang="si"] .cta-band h2 {
    font-family: var(--font-si-heading) !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
}


/* =========================================================
   ENGLISH
   ========================================================= */

body[data-lang="en"] {
    font-family: var(--font-en-body) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
}

body[data-lang="en"] h1,
body[data-lang="en"] h2,
body[data-lang="en"] h3,
body[data-lang="en"] h4,
body[data-lang="en"] .hero h1,
body[data-lang="en"] .hero-copy h1,
body[data-lang="en"] .page-hero h1,
body[data-lang="en"] .section-head h2,
body[data-lang="en"] .split h2,
body[data-lang="en"] .calculator h2,
body[data-lang="en"] .contact-panel h2,
body[data-lang="en"] .cta-band h2 {
    font-family: var(--font-en-heading) !important;
    letter-spacing: -0.25px !important;
    font-weight: 700 !important;
}


/* =========================================================
   TAMIL
   ========================================================= */

body[data-lang="ta"] {
    font-family: var(--font-ta-body) !important;
    font-size: 16px !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
}

body[data-lang="ta"] h1,
body[data-lang="ta"] h2,
body[data-lang="ta"] h3,
body[data-lang="ta"] h4,
body[data-lang="ta"] .hero h1,
body[data-lang="ta"] .hero-copy h1,
body[data-lang="ta"] .page-hero h1,
body[data-lang="ta"] .section-head h2,
body[data-lang="ta"] .split h2,
body[data-lang="ta"] .calculator h2,
body[data-lang="ta"] .contact-panel h2,
body[data-lang="ta"] .cta-band h2 {
    font-family: var(--font-ta-heading) !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
}


/* =========================================================
   COMMON PROFESSIONAL TYPOGRAPHY
   ========================================================= */

body[data-lang] p {
    font-size: 15px !important;
    line-height: 1.75 !important;
}

body[data-lang] .eyebrow,
body[data-lang] .kicker {
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
}

body[data-lang] .breadcrumbs {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

body[data-lang] .btn {
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
}

body[data-lang] .menu a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

body[data-lang] .nav-quote {
    font-size: 13px !important;
}

body[data-lang] .premium-card h3,
body[data-lang] .service-body h3,
body[data-lang] .feature h3,
body[data-lang] .step-card h3 {
    font-size: 20px !important;
    line-height: 1.45 !important;
}

body[data-lang] .premium-card p,
body[data-lang] .service-body p,
body[data-lang] .feature p,
body[data-lang] .step-card p {
    font-size: 14px !important;
    line-height: 1.75 !important;
}

body[data-lang] .gold-card h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

body[data-lang] .gold-card p {
    font-size: 14px !important;
    line-height: 1.65 !important;
}

body[data-lang] .live-meta {
    font-size: 12px !important;
}


/* =========================================================
   DESKTOP HEADING SCALE
   ========================================================= */

@media (min-width: 769px) {

    body[data-lang] .hero-copy h1 {
        font-size: clamp(48px, 5.8vw, 76px) !important;
        line-height: 1.18 !important;
    }

    body[data-lang] .page-hero h1 {
        font-size: clamp(44px, 5vw, 64px) !important;
        line-height: 1.22 !important;
    }

    body[data-lang] .section-head h2,
    body[data-lang] .split h2,
    body[data-lang] .calculator h2,
    body[data-lang] .contact-panel h2 {
        font-size: clamp(32px, 3.5vw, 47px) !important;
        line-height: 1.3 !important;
    }

    body[data-lang] .cta-band h2 {
        font-size: 38px !important;
        line-height: 1.3 !important;
    }
}


/* =========================================================
   MOBILE TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    body[data-lang] {
        font-size: 15px !important;
    }

    body[data-lang] p {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    body[data-lang] .hero-copy h1 {
        font-size: clamp(32px, 9.5vw, 46px) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    body[data-lang] .page-hero h1 {
        font-size: clamp(32px, 9vw, 44px) !important;
        line-height: 1.24 !important;
        letter-spacing: 0 !important;
    }

    body[data-lang] .section-head h2,
    body[data-lang] .split h2,
    body[data-lang] .calculator h2,
    body[data-lang] .contact-panel h2 {
        font-size: clamp(27px, 7.8vw, 36px) !important;
        line-height: 1.3 !important;
        letter-spacing: 0 !important;
    }

    body[data-lang] .cta-band h2 {
        font-size: clamp(27px, 7.5vw, 36px) !important;
        line-height: 1.3 !important;
    }

    body[data-lang] .premium-card h3,
    body[data-lang] .service-body h3,
    body[data-lang] .feature h3,
    body[data-lang] .step-card h3 {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }

    body[data-lang] .premium-card p,
    body[data-lang] .service-body p,
    body[data-lang] .feature p,
    body[data-lang] .step-card p {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    body[data-lang] .eyebrow,
    body[data-lang] .kicker {
        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    body[data-lang] .btn {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    body[data-lang] .menu a {
        font-size: 14px !important;
    }

    body[data-lang] .gold-card h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    body[data-lang] .gold-card p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    body[data-lang] {
        font-size: 15px !important;
    }

    body[data-lang] .hero-copy h1 {
        font-size: clamp(30px, 9.2vw, 42px) !important;
        line-height: 1.2 !important;
    }

    body[data-lang] .page-hero h1 {
        font-size: clamp(30px, 8.8vw, 40px) !important;
        line-height: 1.25 !important;
    }

    body[data-lang] .section-head h2,
    body[data-lang] .split h2,
    body[data-lang] .calculator h2,
    body[data-lang] .contact-panel h2 {
        font-size: clamp(26px, 7.5vw, 34px) !important;
        line-height: 1.32 !important;
    }

    body[data-lang] p {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }
}


/* =========================================================
   PREVENT TEXT FROM BREAKING THE MOBILE LAYOUT
   ========================================================= */

body[data-lang] h1,
body[data-lang] h2,
body[data-lang] h3,
body[data-lang] h4,
body[data-lang] p,
body[data-lang] a,
body[data-lang] span {
    overflow-wrap: break-word !important;
    word-break: normal !important;
}


/* =========================================================
   BETTER FONT RENDERING
   ========================================================= */

body[data-lang] {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}