/*
Theme Name: Online Bill Check
Theme URI: https://bill.com.pk
Template: generatepress
Author: bill.com.pk
Description: Custom GeneratePress child theme powering the Online Bill Check utility bill platform (MEPCO, LESCO, FESCO, IESCO, GEPCO, PESCO, HESCO, SEPCO, QESCO, TESCO, AJK, Bahria Town, SNGPL, SSGC).
Version: 1.0.3
Text Domain: generatepress-child
*/

/* ============================================================
   Geist design-system overrides.
   This stylesheet is auto-enqueued by GeneratePress AFTER its
   core main.min.css, so element-level rules here win the cascade
   (the other theme stylesheets load before GP core). Use this
   file only for things GP core would otherwise override:
   base typography, links, and the GP header/nav/footer chrome.
   ============================================================ */

/* Typography — apply Geist + capped weights GP core resets */
body,
button,
input,
select,
textarea {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body {
    background-color: #fff;
    color: var(--text, #171717);
    font-feature-settings: "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text, #171717);
}

h1 {
    letter-spacing: -0.04em;
    line-height: 1.1;
}

/* Base links default to the interactive blue (components override per-context) */
a {
    color: var(--accent, #0072f5);
}

a:hover {
    color: var(--accent-hover, #0060d6);
}

/* ---------- GeneratePress header / navigation ---------- */
.site-header {
    background-color: #fff;
    box-shadow: inset 0 -1px 0 var(--border-color, #ebebeb);
}

.main-navigation,
.main-navigation .inside-navigation {
    background-color: #fff;
}

.main-navigation .main-nav ul li a,
.menu-toggle {
    color: var(--text, #171717);
    font-weight: 500;
    font-size: 0.95rem;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--accent, #0072f5);
}

/* ---------- Brand logo (gradient bolt badge + gradient wordmark) ---------- */
.site-branding .main-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    line-height: 1;
}

.site-branding .main-title::before {
    content: "";
    width: 1.55em;
    height: 1.55em;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='24' y2='24' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230072f5'/%3E%3Cstop offset='1' stop-color='%23e91e63'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' rx='6' fill='url(%23g)'/%3E%3Cpath transform='translate(3 3) scale(.75)' d='M13 10V3L4 14h7v7l9-11h-7z' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.18), 0 2px 6px rgba(0, 114, 245, 0.18);
    border-radius: 7px;
}

.site-branding .main-title a {
    background: linear-gradient(120deg, #0072f5 15%, #7b2ff7 55%, #e91e63 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.site-title a {
    color: var(--text, #171717);
}

.site-description {
    color: var(--text-secondary, #4d4d4d);
}

/* "Check Bill" menu button — single brand-gradient glass.
   First neutralise the old black wrapper on the <li>, then make
   the <a> itself the glass button (animated ring added below). */
body .main-navigation .main-nav ul li.nav-btn.primary-btn,
body .main-navigation .main-nav ul li.nav-btn {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body .main-navigation .main-nav ul li.nav-btn.primary-btn > a,
body .main-navigation .main-nav ul li.current-menu-item.nav-btn.primary-btn > a,
.site-header .main-navigation .main-nav ul li.nav-btn > a {
    position: relative !important;
    z-index: 0;
    isolation: isolate;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(0, 114, 245, 0.95), rgba(123, 47, 247, 0.92), rgba(233, 30, 99, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: var(--radius-sm, 8px) !important;
    padding: 0.5rem 1.15rem !important;
    margin-left: 0.5rem !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    backdrop-filter: blur(9px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px -10px rgba(123, 47, 247, 0.5) !important;
    transition: transform 0.25s var(--btn-ease, ease), box-shadow 0.25s var(--btn-ease, ease) !important;
}

body .main-navigation .main-nav ul li.nav-btn.primary-btn > a::before,
.site-header .main-navigation .main-nav ul li.nav-btn > a::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--btn-angle, 0deg), #0072f5, #7b2ff7, #e91e63, #ff8a3d, #0072f5);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
    animation: btn-ring-spin 7s linear infinite;
}

body .main-navigation .main-nav ul li.nav-btn.primary-btn > a:hover,
.site-header .main-navigation .main-nav ul li.nav-btn > a:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 12px 26px -10px rgba(123, 47, 247, 0.6) !important;
}

body .main-navigation .main-nav ul li.nav-btn.primary-btn > a:hover::before,
.site-header .main-navigation .main-nav ul li.nav-btn > a:hover::before {
    opacity: 1;
    animation-duration: 3s;
}

/* Provider-themed "Check Bill" menu button on provider templates */
body.page-template-page-provider .main-navigation .main-nav ul li.nav-btn.primary-btn > a,
body.page-template-page-bill-summary .main-navigation .main-nav ul li.nav-btn.primary-btn > a {
    background: linear-gradient(135deg, color-mix(in srgb, var(--provider-color, #0072f5) 95%, white), color-mix(in srgb, var(--provider-color, #0072f5) 80%, transparent)) !important;
    color: var(--provider-contrast, #fff) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px -10px color-mix(in srgb, var(--provider-color, #0072f5) 50%, transparent) !important;
}

.page-template-page-provider .main-navigation .main-nav ul li:hover > a,
.page-template-page-provider .main-navigation .main-nav ul li.current-menu-item > a,
.page-template-page-bill-summary .main-navigation .main-nav ul li:hover > a,
.page-template-page-bill-summary .main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--provider-color);
}


/* Dropdown submenus: shadow-border instead of GP's hard shadow */
.main-navigation ul ul {
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--card-border, rgba(0, 0, 0, 0.08)), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm, 8px);
}

/* ---------- GeneratePress footer ---------- */
.site-footer,
.inside-site-info {
    background-color: #fff;
}

.site-footer,
.site-info,
.site-info a {
    color: var(--text-secondary, #4d4d4d);
}

.site-info a:hover {
    color: var(--text, #171717);
}

.site-footer {
    box-shadow: inset 0 1px 0 var(--border-color, #ebebeb);
}

/* ============================================================
   Glassmorphism buttons + animated brand-gradient ring.
   Loaded last so it governs the button look site-wide.
   - Every button is frosted translucent glass (backdrop blur,
     soft light border, top highlight).
   - A blue->pink brand gradient ring hugs each button; it spins
     gently on the few prominent CTAs and on hover for the rest
     (so the busy provider grids stay calm until hovered).
   - Primary CTAs use the brand gradient fill; provider buttons
     keep their own colour; secondary buttons are light glass.
   - Honors prefers-reduced-motion.
   ============================================================ */
@property --btn-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

:root {
    --btn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes btn-ring-spin {
    to { --btn-angle: 360deg; }
}

/* ---- shared frosted-glass shell ---- */
.cta-buttons .primary-btn,
.cta-buttons .secondary-btn,
.check-bill-btn,
.view-all-btn,
.submit-btn,
.provider-link,
button.nav-btn.primary-btn {
    position: relative;
    z-index: 0;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    backdrop-filter: blur(9px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06),
        0 8px 22px -10px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s var(--btn-ease),
                box-shadow 0.25s var(--btn-ease),
                filter 0.2s ease;
}

/* ---- the gradient ring around every button (static by default) ---- */
.cta-buttons .primary-btn::before,
.cta-buttons .secondary-btn::before,
.check-bill-btn::before,
.view-all-btn::before,
.submit-btn::before,
.provider-link::before,
button.nav-btn.primary-btn::before,
.blog-nav-btn::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--btn-angle, 0deg),
        #0072f5, #7b2ff7, #e91e63, #ff8a3d, #0072f5);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
}

/* Provider buttons: the ring is a glossy sweep of the provider's OWN
   colour (light -> base -> dark), instead of the blue->pink brand ring. */
.check-bill-btn::before,
.provider-link::before,
.submit-btn::before,
body.page-template-page-provider .main-navigation .main-nav ul li.nav-btn.primary-btn > a::before,
body.page-template-page-bill-summary .main-navigation .main-nav ul li.nav-btn.primary-btn > a::before {
    background: conic-gradient(from var(--btn-angle, 0deg),
        var(--provider-color, #0072f5) 0%,
        color-mix(in srgb, var(--provider-color, #0072f5) 45%, white) 25%,
        var(--provider-color, #0072f5) 50%,
        color-mix(in srgb, var(--provider-color, #0072f5) 60%, black) 75%,
        var(--provider-color, #0072f5) 100%);
}

/* Prominent CTAs: a gentle constant spin */
.cta-buttons .primary-btn::before,
.view-all-btn::before,
.submit-btn::before {
    opacity: 0.6;
    animation: btn-ring-spin 7s linear infinite;
}

/* Every button: ring brightens and spins faster on hover */
.cta-buttons .primary-btn:hover::before,
.cta-buttons .secondary-btn:hover::before,
.check-bill-btn:hover::before,
.view-all-btn:hover::before,
.submit-btn:hover::before,
.provider-link:hover::before,
button.nav-btn.primary-btn:hover::before,
.blog-nav-btn:hover::before {
    opacity: 1;
    animation: btn-ring-spin 3s linear infinite;
}

/* ---- glass fills ---- */
/* Primary CTAs: brand blue->pink gradient glass */
.cta-buttons .primary-btn,
.view-all-btn,
button.nav-btn.primary-btn {
    background: linear-gradient(135deg,
        rgba(0, 114, 245, 0.92), rgba(123, 47, 247, 0.9), rgba(233, 30, 99, 0.92)) !important;
    color: #fff !important;
}

/* Secondary CTA: light frosted glass */
.cta-buttons .secondary-btn {
    background: rgba(255, 255, 255, 0.55) !important;
    color: var(--primary, #171717) !important;
}

/* Provider buttons: each provider's own colour as glass */
.check-bill-btn,
.provider-link,
.submit-btn {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--provider-color, #0072f5) 95%, white),
        color-mix(in srgb, var(--provider-color, #0072f5) 80%, transparent)) !important;
    color: var(--provider-contrast, #fff) !important;
    filter: none;
}

/* ---- hover lift + deeper soft shadow ---- */
.cta-buttons .primary-btn:hover,
.cta-buttons .secondary-btn:hover,
.check-bill-btn:hover,
.view-all-btn:hover,
.submit-btn:hover,
.provider-link:hover,
button.nav-btn.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 14px 30px -12px rgba(0, 0, 0, 0.42);
}

/* ---- tactile press ---- */
.cta-buttons .primary-btn:active,
.cta-buttons .secondary-btn:active,
.check-bill-btn:active,
.view-all-btn:active,
.submit-btn:active,
.provider-link:active,
button.nav-btn.primary-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.18);
    transition-duration: 0.05s;
}

/* ---- round blog-slider buttons: glass circle + ring ---- */
.blog-nav-btn {
    isolation: isolate;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    backdrop-filter: blur(9px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px -8px rgba(0, 0, 0, 0.25);
}

.blog-nav-btn:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-50%) scale(1.08);
}

/* ---- link-style CTAs stay as text + an arrow nudge ---- */
.read-more-link .arrow-icon,
.view-all-btn .arrow-icon,
.tool-cta .arrow-icon {
    transition: transform 0.25s var(--btn-ease);
}

.read-more-link:hover .arrow-icon,
.view-all-btn:hover .arrow-icon,
.tool-card:hover .tool-cta .arrow-icon {
    transform: translateX(4px);
}

/* ---- accessible keyboard focus ring ---- */
.cta-buttons .primary-btn:focus-visible,
.cta-buttons .secondary-btn:focus-visible,
.check-bill-btn:focus-visible,
.view-all-btn:focus-visible,
.submit-btn:focus-visible,
.provider-link:focus-visible,
button.nav-btn.primary-btn:focus-visible,
.blog-nav-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0, 114, 245, 0.7);
}

/* ---- respect reduced-motion: keep the glass, stop the spin ---- */
@media (prefers-reduced-motion: reduce) {
    .cta-buttons .primary-btn::before,
    .cta-buttons .secondary-btn::before,
    .check-bill-btn::before,
    .view-all-btn::before,
    .submit-btn::before,
    .provider-link::before,
    button.nav-btn.primary-btn::before,
    .blog-nav-btn::before,
    .cta-buttons .primary-btn:hover::before,
    .view-all-btn:hover::before,
    .submit-btn:hover::before,
    .check-bill-btn:hover::before,
    .provider-link:hover::before,
    button.nav-btn.primary-btn:hover::before,
    .blog-nav-btn:hover::before {
        animation: none;
    }
}