/**
 * BackupPower.ai Theme — Dark Navy Design
 * Matches FuelCare (fuelcareusa.com) look and feel
 *
 * Color palette from FuelCare:
 *   Page background:  #0E172D (dark navy)
 *   Content panels:   #142038 (slightly lighter navy)
 *   Primary blue:     #0D5291
 *   Secondary blue:   #4395D0
 *   Body text:        #FFFFFF / #DAE8F5
 *   Muted text:       #949EAE
 *   Card border:      #4395D0
 *   Coral accent:     #E07160
 *
 * Fonts: Inter (body), Poppins (headings/accents)
 *
 * @version 0.2.0
 */

/* ============================================
   Override GeneratePress CSS Custom Properties
   ============================================ */
:root {
    --contrast: #FFFFFF;
    --contrast-2: #DAE8F5;
    --contrast-3: #949EAE;
    --base: #1a2744;
    --base-2: #0E172D;
    --base-3: #142038;
    --accent: #4395D0;

    /* BackupPower palette */
    --bp-bg: #0E172D;
    --bp-bg-panel: #142038;
    --bp-bg-card: #1a2744;
    --bp-bg-card-hover: #1f2f52;
    --bp-primary: #0D5291;
    --bp-secondary: #4395D0;
    --bp-accent: #BDDEFC;
    --bp-text: #FFFFFF;
    --bp-text-body: #DAE8F5;
    --bp-text-muted: #949EAE;
    --bp-text-heading: #FFFFFF;
    --bp-border: #2c3e50;
    --bp-border-accent: #4395D0;
    --bp-coral: #E07160;
    --bp-yellow: #EDDEA4;
    --bp-orange: #F7A072;
    --bp-success: #27AE60;
    --bp-warning: #F39C12;
    --bp-danger: #E74C3C;
    --bp-radius: 8px;
    --bp-radius-lg: 12px;
    --bp-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --bp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --bp-transition: 0.3s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================
   Base / Body
   ============================================ */
body {
    background-color: var(--bp-bg) !important;
    color: var(--bp-text-body);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--bp-text-heading);
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-family: "Inter", sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

h2 {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
}

h3 {
    font-family: "Poppins", "Inter", sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 600;
}

h4 {
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: capitalize;
}

p {
    margin-bottom: 1.25rem;
    color: var(--bp-text-body);
}

strong, b {
    color: var(--bp-text);
}

em {
    color: var(--bp-text-muted);
}

/* ============================================
   Links
   ============================================ */
a {
    color: var(--bp-secondary) !important;
    text-decoration: none;
    transition: color var(--bp-transition);
}

a:hover,
a:focus,
a:active {
    color: var(--bp-accent) !important;
}

/* ============================================
   Header
   ============================================ */
.site-header {
    background-color: var(--bp-bg) !important;
    border-bottom: 2px solid var(--bp-primary);
    transition: all var(--bp-transition);
}

.site-header .inside-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-header .site-title a,
.site-header .main-title a,
.main-title a {
    color: var(--bp-text) !important;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none !important;
    letter-spacing: -0.01em;
}

.site-header .site-title a:hover,
.site-header .main-title a:hover {
    color: var(--bp-secondary) !important;
}

.site-header .site-description {
    color: var(--bp-text-muted) !important;
    font-size: 0.85rem;
}

/* ============================================
   Navigation
   ============================================ */
.main-navigation,
.main-navigation ul ul {
    background-color: var(--bp-bg) !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
    color: var(--bp-text) !important;
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--bp-transition);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--bp-secondary) !important;
}

.main-navigation .main-nav ul ul {
    background-color: var(--bp-bg-panel) !important;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
}

.main-navigation .main-nav ul ul li a {
    text-transform: none !important;
    font-size: 0.95rem !important;
    letter-spacing: normal !important;
}

/* Mobile menu */
.menu-toggle {
    color: var(--bp-text) !important;
}

.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus {
    background-color: transparent !important;
    color: var(--bp-text) !important;
}

/* ============================================
   Content Area — Dark Panels
   ============================================ */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
    background-color: var(--bp-bg-panel) !important;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
}

.site-main .wp-block-group__inner-container {
    color: var(--bp-text-body);
}

/* Entry title */
.entry-title,
.entry-title a,
.page-title {
    color: var(--bp-text-heading) !important;
    font-family: "Inter", sans-serif;
}

.entry-title a:hover {
    color: var(--bp-secondary) !important;
}

/* Entry meta */
.entry-meta,
.entry-meta a {
    color: var(--bp-text-muted) !important;
}

/* Entry content */
.entry-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--bp-text-body);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--bp-text-heading);
    margin-top: 2.5rem;
}

.entry-content h2 {
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bp-border);
}

/* Lists */
.entry-content ul,
.entry-content ol {
    color: var(--bp-text-body);
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content li strong {
    color: var(--bp-text);
}

/* Blockquotes */
.entry-content blockquote {
    border-left: 4px solid var(--bp-secondary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--bp-bg-card);
    border-radius: 0 var(--bp-radius) var(--bp-radius) 0;
    color: var(--bp-text-body);
}

/* Horizontal rules / separators */
.wp-block-separator,
hr {
    border-color: var(--bp-border) !important;
    opacity: 0.6;
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar .widget {
    background-color: var(--bp-bg-panel) !important;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    color: var(--bp-text-body);
}

.sidebar .widget-title {
    color: var(--bp-text-heading);
    font-family: "Poppins", "Inter", sans-serif;
}

/* ============================================
   Footer — Hide GP default footer
   ============================================ */
.footer-widgets,
.site-info {
    display: none !important;
}

/* ============================================
   Site Footer (bp-tools rendered)
   ============================================ */
.bp-site-footer {
    background: #0a1120;
    border-top: 2px solid var(--bp-primary);
    color: var(--bp-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 2rem;
}

.bp-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem 1.5rem;
}

.bp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
}

.bp-footer-col h4 {
    color: var(--bp-secondary);
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
}

.bp-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bp-footer-col ul li {
    margin-bottom: 0.5rem;
}

.bp-footer-col ul li a {
    color: var(--bp-text-muted) !important;
    font-size: 0.9rem;
    transition: color var(--bp-transition);
}

.bp-footer-col ul li a:hover {
    color: var(--bp-text) !important;
}

/* Brand column */
.bp-footer-logo {
    font-family: "Inter", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bp-text);
    margin-bottom: 0.75rem;
}

.bp-footer-logo span {
    color: var(--bp-secondary);
}

.bp-footer-brand p {
    font-size: 0.9rem;
    color: var(--bp-text-muted);
    margin-bottom: 0.75rem;
}

.bp-footer-powered {
    font-size: 0.85rem !important;
    color: #6b7c93 !important;
}

.bp-footer-powered a {
    color: var(--bp-secondary) !important;
    font-weight: 600;
}

/* Contact info */
.bp-footer-contact {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bp-footer-contact a {
    color: var(--bp-text-muted) !important;
    font-size: 0.85rem;
}

.bp-footer-contact a:hover {
    color: var(--bp-text) !important;
}

/* Bottom bar */
.bp-footer-bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #1a2744;
    text-align: center;
    font-size: 0.8rem;
    color: #4a5568;
}

.bp-footer-bottom a {
    color: #6b7c93 !important;
}

.bp-footer-bottom a:hover {
    color: var(--bp-text-muted) !important;
}

/* Footer responsive */
@media (max-width: 768px) {
    .bp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .bp-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bp-footer-inner {
        padding: 2rem 1.25rem 1.25rem;
    }
}

/* ============================================
   Buttons
   ============================================ */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background),
.wp-block-button__link,
.bp-btn {
    background-color: var(--bp-primary) !important;
    color: var(--bp-text) !important;
    border: none !important;
    border-radius: var(--bp-radius);
    padding: 14px 32px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--bp-transition);
    display: inline-block;
    text-decoration: none !important;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus,
.wp-block-button__link:hover,
.bp-btn:hover {
    background-color: var(--bp-secondary) !important;
    color: var(--bp-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 149, 208, 0.3);
}

.bp-btn-secondary {
    background-color: transparent !important;
    color: var(--bp-secondary) !important;
    border: 2px solid var(--bp-secondary) !important;
}

.bp-btn-secondary:hover {
    background-color: var(--bp-secondary) !important;
    color: var(--bp-text) !important;
}

.bp-btn-lg {
    padding: 18px 40px;
    font-size: 1.125rem;
}

/* ============================================
   Cards & Panels
   ============================================ */
.bp-card {
    background: var(--bp-bg-card);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    padding: 2rem;
    transition: all var(--bp-transition);
}

.bp-card:hover {
    border-color: var(--bp-secondary);
    box-shadow: var(--bp-shadow-lg);
    transform: translateY(-2px);
}

.bp-card-header {
    border-bottom: 2px solid var(--bp-border);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.bp-card-header h3 {
    margin: 0;
    color: var(--bp-text-heading);
}

/* ============================================
   Segment Selector (Homepage)
   ============================================ */
.bp-segment-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.bp-segment-card {
    background: var(--bp-bg-card);
    border: 2px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    padding: 2rem;
    text-align: center;
    text-decoration: none !important;
    transition: all var(--bp-transition);
    display: block;
}

.bp-segment-card:hover {
    border-color: var(--bp-secondary);
    background: var(--bp-bg-card-hover);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(67, 149, 208, 0.2);
}

.bp-segment-card .bp-segment-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.bp-segment-card h3 {
    color: var(--bp-text) !important;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.bp-segment-card p {
    color: var(--bp-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ============================================
   Calculator Container
   ============================================ */
.bp-calculator {
    background: var(--bp-bg-panel);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    overflow: hidden;
}

.bp-calculator-body {
    padding: 2rem;
}

.bp-calculator-body .bp-text-muted {
    color: var(--bp-text-muted);
}

/* ============================================
   CTA Sections
   ============================================ */
.bp-cta-section {
    background: linear-gradient(135deg, var(--bp-primary), var(--bp-secondary));
    border-radius: var(--bp-radius-lg);
    padding: 2.5rem;
    margin: 2rem 0;
    text-align: center;
}

.bp-cta-section h4 {
    color: var(--bp-text);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.bp-cta-section p {
    color: var(--bp-accent);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.bp-cta-section .bp-btn {
    background-color: var(--bp-text) !important;
    color: var(--bp-primary) !important;
    font-weight: 700;
}

.bp-cta-section .bp-btn:hover {
    background-color: var(--bp-accent) !important;
    color: var(--bp-primary) !important;
}

/* ============================================
   Segment Badges
   ============================================ */
.bp-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: "Poppins", "Inter", sans-serif;
}

.bp-badge-healthcare {
    background: rgba(39, 174, 96, 0.15);
    color: #27AE60;
}

.bp-badge-datacenter {
    background: rgba(67, 149, 208, 0.15);
    color: #4395D0;
}

.bp-badge-telecom {
    background: rgba(247, 160, 114, 0.15);
    color: #F7A072;
}

/* ============================================
   Form Inputs (dark theme)
   ============================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background-color: var(--bp-bg-card) !important;
    color: var(--bp-text) !important;
    border: 1px solid var(--bp-border) !important;
    border-radius: var(--bp-radius);
    padding: 12px 16px;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    transition: border-color var(--bp-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--bp-secondary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 149, 208, 0.2);
}

::placeholder {
    color: var(--bp-text-muted) !important;
}

/* ============================================
   Tables
   ============================================ */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    background: var(--bp-bg-card);
    color: var(--bp-text);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--bp-border-accent);
}

td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bp-border);
    color: var(--bp-text-body);
}

tr:hover td {
    background: var(--bp-bg-card);
}

/* ============================================
   Back to Top Button
   ============================================ */
a.generate-back-to-top {
    background-color: var(--bp-primary) !important;
    color: var(--bp-text) !important;
    border-radius: var(--bp-radius);
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
    background-color: var(--bp-secondary) !important;
}

/* ============================================
   Utility Classes
   ============================================ */
.bp-text-muted { color: var(--bp-text-muted); }
.bp-text-success { color: var(--bp-success); }
.bp-text-warning { color: var(--bp-warning); }
.bp-text-danger { color: var(--bp-danger); }
.bp-text-center { text-align: center; }
.bp-text-white { color: var(--bp-text); }

.bp-eyebrow {
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--bp-secondary);
    margin-bottom: 0.5rem;
}

.bp-stat-number {
    font-family: "Inter", sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--bp-text);
    line-height: 1.1;
}

.bp-mt-1 { margin-top: 0.5rem; }
.bp-mt-2 { margin-top: 1rem; }
.bp-mt-3 { margin-top: 1.5rem; }
.bp-mt-4 { margin-top: 2rem; }
.bp-mb-1 { margin-bottom: 0.5rem; }
.bp-mb-2 { margin-bottom: 1rem; }
.bp-mb-3 { margin-bottom: 1.5rem; }
.bp-mb-4 { margin-bottom: 2rem; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .entry-content {
        font-size: 1rem;
    }

    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .separate-containers .paging-navigation,
    .one-container .site-content,
    .inside-page-header {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .bp-segment-selector {
        grid-template-columns: 1fr;
    }

    .bp-cta-section {
        padding: 1.5rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .site-header,
    .site-info,
    .bp-site-footer,
    .main-navigation,
    .bp-cta-section {
        display: none !important;
    }

    .separate-containers .inside-article {
        background: #fff !important;
        border: none !important;
    }

    a {
        color: #000 !important;
    }
}

/* ============================================
   Notify-Me Email Capture
   ============================================ */
.bp-notify-section {
    background: linear-gradient(135deg, #142038 0%, #0a1628 100%);
    border: 1px solid var(--bp-primary, #0D5291);
    border-radius: 12px;
    padding: 32px 24px;
    margin: 40px 0;
    text-align: center;
}

.bp-notify-inner h3 {
    color: var(--contrast, #fff);
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
}

.bp-notify-inner p {
    color: var(--contrast-3, #949EAE);
    font-size: 15px;
    margin: 0 0 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bp-notify-form {
    display: flex;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
}

.bp-notify-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 15px;
}

.bp-notify-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.bp-notify-input:focus {
    outline: none;
    border-color: var(--bp-primary, #0D5291);
    box-shadow: 0 0 0 3px rgba(67, 149, 208, 0.25);
}

.bp-notify-btn {
    padding: 12px 24px;
    background: var(--bp-primary, #0D5291);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.bp-notify-btn:hover {
    background: var(--accent, #4395D0);
}

.bp-notify-success {
    color: #86EFAC;
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
}

.bp-notify-error {
    color: #FCA5A5;
    font-size: 14px;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .bp-notify-form {
        flex-direction: column;
    }
    .bp-notify-btn {
        width: 100%;
    }
}