/*
Theme Name: Online Bill Check
Theme URI: https://checkonlinebill.pk
Template: generatepress
Author: checkonlinebill.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.0
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);
}

/* Colorful CTA button in the menu (the "Check Bill" item) */
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 {
    color: #fff !important;
    background: var(--primary, #171717) !important;
    border-radius: var(--radius-sm, 8px) !important;
    padding: 0.5rem 1.1rem !important;
    margin-left: 0.5rem !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

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;
    background: var(--primary-light, #404040) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Provider-themed header elements on provider templates */
body.page-template-page-provider .main-navigation .main-nav ul li.nav-btn.primary-btn a,
body.page-template-page-provider .main-navigation .main-nav ul li.current-menu-item.nav-btn.primary-btn > a,
body.page-template-page-bill-summary .main-navigation .main-nav ul li.nav-btn.primary-btn a,
body.page-template-page-bill-summary .main-navigation .main-nav ul li.current-menu-item.nav-btn.primary-btn > a {
    background: var(--provider-color) !important;
    color: var(--provider-contrast) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--provider-color) 35%, transparent) !important;
}

body.page-template-page-provider .main-navigation .main-nav ul li.nav-btn.primary-btn a:hover,
body.page-template-page-bill-summary .main-navigation .main-nav ul li.nav-btn.primary-btn a:hover {
    background: var(--provider-color) !important;
    color: var(--provider-contrast) !important;
    filter: brightness(0.9);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--provider-color) 45%, 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);
}