:root {
    --dpg-primary: #2563eb;
    --dpg-primary-dark: #1d4ed8;
    --dpg-text: #1f2937;
    --dpg-text-muted: #4b5563;
    --dpg-bg-light: #f4f4f4;
    --dpg-bg-white: #ffffff;
    --dpg-border: #e5e7eb;
    --dpg-nav-active: #1f2937;
    --dpg-max-width: 1100px;
    --dpg-radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    color: var(--dpg-text);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55;
    background: var(--dpg-bg-white);
}

a { color: var(--dpg-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.dpg-container {
    max-width: var(--dpg-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Skip link */
.dpg-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    padding: 8px 12px;
    background: var(--dpg-text);
    color: #fff;
    z-index: 100;
}
.dpg-skip-link:focus { left: 12px; top: 12px; }

/* Header */
.dpg-header {
    background: #fff;
    border-bottom: 1px solid var(--dpg-border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.dpg-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 32px;
}
.dpg-logo img { height: 28px; width: auto; }

.dpg-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}
.dpg-nav-link {
    display: inline-block;
    padding: 10px 18px;
    color: var(--dpg-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    border-radius: var(--dpg-radius);
}
.dpg-nav-link:hover { color: var(--dpg-text); text-decoration: none; }
.dpg-nav-item.active .dpg-nav-link {
    background: var(--dpg-nav-active);
    color: #fff;
}

.dpg-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
}
.dpg-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dpg-text);
}

/* Sections */
.dpg-section { padding: 72px 0; }
.dpg-section-light { background: var(--dpg-bg-light); }
.dpg-section-white { background: #fff; }
.dpg-section-hero-bg {
    background-color: #14233a;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 140px 0;
}
.dpg-cta-overlay { color: #fff; }
.dpg-cta-overlay .dpg-h1-on-dark { font-size: 2.5rem; margin: 0 0 8px; }
.dpg-cta-subtitle { font-size: 1.1rem; margin: 0 0 24px; opacity: 0.9; }

.dpg-text-center { text-align: center; }

/* Headings — explicit colors override Oliphant custom.css globals (h1 { color: white } etc.) */
.dpg-h1-center,
.dpg-h2-primary,
.dpg-h2-primary-center,
.dpg-page-title { color: var(--dpg-text); font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: normal; }
.dpg-h1-center { font-size: 2.5rem; text-align: center; margin: 0 0 24px; line-height: 1.2; }
.dpg-h1-on-dark { font-size: 2.5rem; color: #fff; margin: 0; max-width: 720px; line-height: 1.2; }
.dpg-h2-primary { font-size: 2rem; margin: 0 0 16px; line-height: 1.2; }
.dpg-h2-primary-center { font-size: 2rem; text-align: center; margin: 0 0 16px; line-height: 1.2; }
.dpg-page-title { font-size: 2.25rem; margin: 0 0 24px; line-height: 1.2; }
.dpg-prose h2, .dpg-prose h3 { color: var(--dpg-text); font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: normal; }
.dpg-lead { font-size: 1.05rem; max-width: 760px; margin: 0 auto 32px; }
.dpg-effective-date { color: var(--dpg-text-muted); margin-top: -12px; }

/* Buttons */
.dpg-btn,
.dpg-prose .button {
    display: inline-block;
    padding: 12px 28px;
    background: var(--dpg-primary);
    color: #fff !important;
    border: 0;
    border-radius: var(--dpg-radius);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}
.dpg-btn:hover { background: var(--dpg-primary-dark); text-decoration: none; }
.dpg-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* Hero */
.dpg-hero { position: relative; }
.dpg-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.dpg-hero-image img { width: 100%; max-width: 520px; margin-left: auto; border-radius: var(--dpg-radius); }
.dpg-scroll-indicator {
    display: block;
    text-align: center;
    color: var(--dpg-text-muted);
    font-size: 1.5rem;
    text-decoration: none;
    margin-top: 24px;
}

/* Two-column section */
.dpg-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.dpg-two-col-aside img { width: 100%; border-radius: var(--dpg-radius); }
.dpg-two-col-aside:empty {
    background: var(--dpg-border);
    min-height: 280px;
    border-radius: var(--dpg-radius);
}

.dpg-bullet-list { padding-left: 0; list-style: none; }
.dpg-bullet-list li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.dpg-bullet-list li::before {
    content: '\25B8';
    position: absolute;
    left: 0;
    color: var(--dpg-primary);
}

/* Carousel */
.dpg-features-carousel {
    position: relative;
    margin: 32px auto 0;
    max-width: 800px;
}
.dpg-carousel-track { overflow: hidden; min-height: 180px; }
.dpg-feature-slide {
    display: none;
    text-align: center;
}
.dpg-feature-slide.is-active { display: block; }
.dpg-feature-slide p { margin: 0 0 16px; }
.dpg-feature-slide h5 { font-size: 1.15rem; margin: 0; }
.dpg-carousel-prev,
.dpg-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--dpg-border);
    background: #fff;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}
.dpg-carousel-prev { left: -20px; }
.dpg-carousel-next { right: -20px; }

/* Consumers options */
.dpg-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 32px 0 48px;
}
@media (max-width: 700px) { .dpg-options { grid-template-columns: 1fr; } }
.dpg-option {
    background: #fff;
    padding: 24px;
    border-radius: var(--dpg-radius);
    border: 1px solid var(--dpg-border);
}

/* Prose styling for legal pages */
.dpg-prose { max-width: 820px; }
.dpg-prose h2 { font-size: 1.6rem; margin-top: 36px; }
.dpg-prose h3 { font-size: 1.25rem; margin-top: 28px; }
.dpg-prose p, .dpg-prose ul, .dpg-prose ol { margin: 0 0 16px; }
.dpg-prose ul, .dpg-prose ol { padding-left: 22px; }

/* Contact form (Grav form plugin) */
.dpg-form-wrap { max-width: 720px; }
.dpg-form-wrap .form-input-wrapper,
.dpg-form-wrap .form-textarea-wrapper,
.dpg-form-wrap .form-select-wrapper {
    margin-bottom: 16px;
}
.dpg-form-wrap input[type="text"],
.dpg-form-wrap input[type="email"],
.dpg-form-wrap input[type="tel"],
.dpg-form-wrap select,
.dpg-form-wrap textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--dpg-border);
    border-radius: var(--dpg-radius);
    font: inherit;
}
.dpg-form-wrap textarea { min-height: 140px; resize: vertical; }
.dpg-form-wrap label { display: block; font-weight: 600; margin-bottom: 6px; }
.dpg-form-wrap .button {
    background: var(--dpg-primary);
    color: #fff;
    border: 0;
    padding: 12px 28px;
    border-radius: var(--dpg-radius);
    font-weight: 600;
    cursor: pointer;
}

/* Footer */
.dpg-footer {
    background: var(--dpg-bg-light);
    color: var(--dpg-text);
    padding: 56px 0 32px;
    margin-top: 48px;
    font-size: 0.95rem;
}
.dpg-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
}
@media (max-width: 800px) {
    .dpg-footer-inner { grid-template-columns: 1fr; }
}
.dpg-footer-logo { height: 28px; width: auto; margin-bottom: 16px; }
.dpg-footer-tagline { color: var(--dpg-text-muted); }
.dpg-footer-social { list-style: none; padding: 0; display: flex; gap: 12px; margin: 16px 0 0; }
.dpg-footer-social a {
    display: inline-flex;
    width: 32px;
    height: 32px;
    background: var(--dpg-text);
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.dpg-footer-col h3 { margin: 0 0 12px; font-size: 1.05rem; }
.dpg-footer-disclaimer { color: var(--dpg-text-muted); font-size: 0.85rem; margin-top: 16px; }

/* Mobile */
@media (max-width: 800px) {
    .dpg-hero-inner { grid-template-columns: 1fr; }
    .dpg-two-col { grid-template-columns: 1fr; }
    .dpg-menu-toggle { display: flex; }
    .dpg-nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        padding: 8px;
        border-bottom: 1px solid var(--dpg-border);
    }
    .dpg-header.is-open .dpg-nav-list { display: flex; }
    .dpg-h1-on-dark { font-size: 1.75rem; }
    .dpg-section { padding: 48px 0; }
}

/* =====================================================================
   Negotiator rebrand overrides
   ---------------------------------------------------------------------
   The negotiator templates use Oliphant's `ol-*` classes in custom.css.
   These rules retint that page family to match DPG: gray section
   backgrounds (like the public pages), DPG-blue action buttons.
   Anything not overridden falls through to custom.css unchanged.
   ===================================================================== */

/* Section / hero backgrounds: drop Oliphant's blue-gradient hero image and
   purple highlight backgrounds in favor of flat DPG light-grey. */
.ol-section.ol-sub-header,
.ol-hero,
.ol-hero-inner,
.ol-section.ol-sub-header-2 {
    background-image: none !important;
    background-color: var(--dpg-bg-light) !important;
    color: var(--dpg-text);
}
.ol-sub-header .ol-heading-primary,
.ol-sub-header h1,
.ol-sub-header h2,
.ol-sub-header .ol-subtext-light {
    color: var(--dpg-text) !important;
    text-shadow: none;
}

/* Generic .ol-section backgrounds: ensure light-grey or white sections look
   the same as the public pages instead of any Oliphant tinted variant. */
.ol-bg-transparent { background-color: transparent !important; }

/* Buttons: replace purple gradient with flat DPG blue. */
.ol-btn,
.ol-btn-large,
form button,
.ol-btn-outline {
    background: var(--dpg-primary) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: var(--dpg-radius) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.ol-btn:hover,
.ol-btn-large:hover,
form button:hover,
.ol-btn-outline:hover {
    background: var(--dpg-primary-dark) !important;
    background-image: none !important;
}
.ol-btn::before,
.ol-btn-large::before,
.ol-btn-outline::before { display: none !important; }

/* Login button (header) — DPG public pages don't use this, but the
   negotiator pages can. Keep it ghost-style on light bg. */
.ol-btn-login {
    background: transparent;
    color: var(--dpg-primary) !important;
    border: 1px solid var(--dpg-primary) !important;
}
.ol-btn-login:hover {
    background: var(--dpg-primary) !important;
    color: #fff !important;
}

/* Form links / outline buttons / "use name and last name instead" link
   used in lookup-id.html.twig. */
.ol-form-link {
    color: var(--dpg-primary) !important;
}

/* Negotiator headings — Oliphant uses dark blue (#14358A), which is close
   enough to DPG; just ensure consistency with our text color tokens. */
.ol-heading-primary {
    color: var(--dpg-text) !important;
}

/* Cards / form wrappers.
   - `.ol-main-form` is the surrounding section — make it the same DPG grey
     so the white card doesn't sit on a stray white band between two grey
     sections (which looked broken).
   - `.ol-main-form-wrap` is Oliphant's outer "frame" with a translucent
     purple tint and a soft shadow that read as a pink/lavender glow on the
     grey aesthetic. Strip both.
   - `.ol-main-form-wrap-inner` is the actual white card — keep it on white
     with a subtle grey border so it stands out cleanly against the grey. */
.ol-section.ol-main-form {
    background-color: var(--dpg-bg-light) !important;
}
.ol-main-form-wrap {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: var(--dpg-radius);
}
.ol-main-form-wrap-inner {
    background-color: #fff !important;
    border: 1px solid var(--dpg-border);
    box-shadow: none !important;
}

/* Highlight / accent backgrounds the negotiator uses (e.g. CTA bands,
   discount-offer popups, special-offer banners). Tone the cyan tint down
   to the same DPG light grey. */
.ol-cta-section,
.ol-cta-section.ol-bg-transparent,
[style*="EBF7FF"] {
    background: var(--dpg-bg-light) !important;
    background-image: none !important;
}
.popup-overlay { background-color: rgba(0, 0, 0, 0.45); }
.popup-content {
    background: #fff;
    border-top: 4px solid var(--dpg-primary);
}
.popup-btn {
    background: var(--dpg-primary) !important;
    color: #fff !important;
    border: 0 !important;
}
.popup-btn-outline {
    background: #fff !important;
    color: var(--dpg-primary) !important;
    border: 1px solid var(--dpg-primary) !important;
}
.highlight {
    color: var(--dpg-primary);
    font-weight: 700;
}

/* Footer SMS opt-in
   -----------------
   Sits at the top of .dpg-footer (inside .dpg-container).
   White card with subtle border to stand out against the grey footer bg. */
.dpg-footer-optin {
    background: #fff;
    border: 1px solid var(--dpg-border);
    border-radius: var(--dpg-radius);
    padding: 24px;
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 800px) {
    .dpg-footer-optin { grid-template-columns: 1fr; }
}
.dpg-footer-optin-text h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--dpg-text);
}
.dpg-footer-optin-text p {
    margin: 0;
    color: var(--dpg-text-muted);
    font-size: 0.95rem;
}
.dpg-footer-optin-form { margin: 0; }
.dpg-footer-optin-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 12px;
}
.dpg-footer-optin-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--dpg-border);
    border-radius: var(--dpg-radius);
    font: inherit;
}
.dpg-footer-optin-row .dpg-btn { white-space: nowrap; }
.dpg-footer-optin-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--dpg-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}
.dpg-footer-optin-consent input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}
.dpg-footer-optin-consent a { color: var(--dpg-primary); }

.dpg-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}