/* ==========================================================
   CDPH Portal Theme
   ----------------------------------------------------------
   Site-shell styling only.

   IMPORTANT:
   - Do not add generic Power Pages / Bootstrap overrides here.
   - Application pages such as OSH Requested Items own their
     internal forms, grid, table, modal and button styling.
   ========================================================== */


/* ----------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------- */

:root {
    --cdph-purple: #3b0aa3;
    --cdph-purple-dark: #2f0784;
    --cdph-blue: #005ea8;

    --cdph-text: #222222;
    --cdph-text-muted: #666666;

    --cdph-border: #d7d7d7;
    --cdph-background: #ffffff;
    --cdph-background-soft: #f5f5f5;

    --cdph-warning: #d90000;
    --cdph-warning-text: #ffffff;

    --cdph-content-max: 1280px;

    --cdph-space-xs: 4px;
    --cdph-space-sm: 8px;
    --cdph-space-md: 16px;
    --cdph-space-lg: 24px;
    --cdph-space-xl: 32px;
    --cdph-space-2xl: 48px;
}


/* ----------------------------------------------------------
   2. Environment warning
   ---------------------------------------------------------- */

.cdph-environment-warning {
    width: 100%;
    background: var(--cdph-warning);
    color: var(--cdph-warning-text);
}

.cdph-environment-warning__inner {
    width: 100%;
    max-width: var(--cdph-content-max);
    margin: 0 auto;
    padding: 10px 24px 12px;
}

.cdph-environment-warning__message {
    margin: 0 0 3px;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.cdph-environment-warning__link {
    display: inline-block;
    color: var(--cdph-warning-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.cdph-environment-warning__link:visited {
    color: var(--cdph-warning-text);
}

.cdph-environment-warning__link:hover,
.cdph-environment-warning__link:focus {
    color: var(--cdph-warning-text);
    text-decoration: none;
}

.cdph-environment-warning__link:focus {
    outline: 2px solid var(--cdph-warning-text);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   3. Site header
   ---------------------------------------------------------- */

.cdph-site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: var(--cdph-background);
    border-bottom: 1px solid var(--cdph-border);
}

.cdph-site-header .cdph-site-navbar {
    min-height: 0;
    margin: 0;
    background: var(--cdph-background);
    border: 0;
    border-radius: 0;
}

.cdph-site-header__inner {
    width: 100%;
    max-width: var(--cdph-content-max);
    margin: 0 auto;
    padding: 0 24px;
}

.cdph-site-header__brand-row {
    width: 100%;
}

.cdph-site-header .navbar-header {
    float: none;
}

.cdph-site-header .navbar-brand {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 16px 0 10px;
}

.cdph-brand {
    display: block;
}

.cdph-brand__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.cdph-brand__link:hover,
.cdph-brand__link:focus {
    text-decoration: none;
}

.cdph-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 58px;
}


/* ----------------------------------------------------------
   4. Primary navigation
   ---------------------------------------------------------- */

.cdph-site-header .cdph-primary-nav {
    width: 100%;
    padding: 0;
}

.cdph-site-header .cdph-primary-nav__inner {
    width: 100%;
    margin: 0;
    padding: 2px 0 16px;
}

.cdph-site-header .cdph-primary-nav__list {
    float: none;
    width: 100%;
    margin: 0;
}

.cdph-site-header .cdph-primary-nav__item,
.cdph-site-header .cdph-primary-nav__utility {
    float: left;
}


/*
   Targeted !important is intentional here.

   theme.css contains a generic anchor color rule that applies
   across the portal. These overrides are restricted to the
   CDPH site header and do not affect page content or application UI.
*/


/* ----------------------------------------------------------
   Top-level navigation links
   ---------------------------------------------------------- */

.cdph-site-header .cdph-primary-nav__list > li > a,
.cdph-site-header .cdph-primary-nav__list > li > a:link,
.cdph-site-header .cdph-primary-nav__list > li > a:visited {
    padding: 9px 13px !important;
    color: #222222 !important;
    background-color: transparent !important;
    background-image: none !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
}


/* First navigation item */

.cdph-site-header .cdph-primary-nav__list > li:first-child > a {
    padding-left: 0 !important;
}


/* Hover / keyboard focus / open dropdown */

.cdph-site-header .cdph-primary-nav__list > li > a:hover,
.cdph-site-header .cdph-primary-nav__list > li > a:focus,
.cdph-site-header .cdph-primary-nav__list > li.open > a {
    color: var(--cdph-purple) !important;
    background-color: transparent !important;
    background-image: none !important;
    text-decoration: underline !important;
}


/* Navigation dividers */

.cdph-site-header .divider-vertical {
    float: left;
    width: 1px;
    height: 22px;
    margin: 9px 7px;
    padding: 0;
    border: 0;
    border-left: 1px solid #a8a8a8;
}


/* Dropdown menus */

.cdph-site-header .dropdown-menu {
    margin-top: 0;
    padding: 5px 0;
    background: #ffffff;
    border: 1px solid var(--cdph-border);
    border-radius: 0;
}

.cdph-site-header .dropdown-menu > li > a,
.cdph-site-header .dropdown-menu > li > a:link,
.cdph-site-header .dropdown-menu > li > a:visited {
    padding: 8px 16px;
    color: var(--cdph-text) !important;
    background: transparent !important;
    font-size: 14px;
    text-decoration: none !important;
}

.cdph-site-header .dropdown-menu > li > a:hover,
.cdph-site-header .dropdown-menu > li > a:focus {
    color: var(--cdph-purple) !important;
    background: var(--cdph-background-soft) !important;
    text-decoration: underline !important;
}


/* ----------------------------------------------------------
   Header utility navigation
   Search / language / authentication
   ---------------------------------------------------------- */

.cdph-site-header .cdph-primary-nav__utility {
    white-space: nowrap;
}

.cdph-site-header .cdph-primary-nav__utility > a,
.cdph-site-header .cdph-primary-nav__utility > a:link,
.cdph-site-header .cdph-primary-nav__utility > a:visited {
    display: flex;
    align-items: center;
    min-height: 39px;
    color: #222222 !important;
}

.cdph-site-header .cdph-primary-nav__utility > a:hover,
.cdph-site-header .cdph-primary-nav__utility > a:focus {
    color: var(--cdph-purple) !important;
}

.cdph-site-header .cdph-primary-nav__utility .username {
    white-space: nowrap;
}

.cdph-site-header .cdph-primary-nav__utility .caret {
    margin-left: 6px;
}

.cdph-site-header .navbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.cdph-site-header .glyphicon-search {
    top: 0;
    color: currentColor !important;
    font-size: 16px;
}


/* Keep utility separators visually compact */

.cdph-site-header
.cdph-primary-nav__utility
+ .divider-vertical {
    margin-left: 2px;
}


/* Prevent long authenticated names from distorting navigation */

.cdph-site-header .username {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}


/* ----------------------------------------------------------
   5. Breadcrumbs
   ---------------------------------------------------------- */

.cdph-breadcrumbs {
    width: 100%;
    margin: 0;
    padding: 14px 0 12px;
    font-size: 13px;
    line-height: 1.45;
}

.cdph-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdph-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--cdph-text-muted);
}

.cdph-breadcrumbs__item:not(:last-child)::after {
    content: "/";
    display: inline-block;
    margin: 0 8px;
    color: #8a8a8a;
}

.cdph-breadcrumbs__link,
.cdph-breadcrumbs__link:link,
.cdph-breadcrumbs__link:visited {
    color: var(--cdph-blue) !important;
    text-decoration: none;
}

.cdph-breadcrumbs__link:hover,
.cdph-breadcrumbs__link:focus {
    color: var(--cdph-purple) !important;
    text-decoration: underline;
}

.cdph-breadcrumbs__item--current {
    color: var(--cdph-text-muted);
    font-weight: 600;
}


/* ----------------------------------------------------------
   6. Page title banner
   ---------------------------------------------------------- */

.cdph-page-banner {
    width: 100%;
    margin: 0 0 28px;
    padding: 15px 18px;
    background: var(--cdph-purple);
    color: #ffffff;
}

.cdph-page-title {
    margin: 0;
    padding: 0;
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.cdph-page-title,
.cdph-page-title * {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   7. Standard informational content layout
   ---------------------------------------------------------- */

.container.cdph-content-layout {
    width: 100%;
    max-width: var(--cdph-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.cdph-content-layout__row {
    margin-top: 0;
}

.cdph-side-column,
.cdph-main-column {
    min-width: 0;
}


/* Left informational navigation column */

.cdph-side-column {
    padding-right: 28px;
}


/* Main informational content column */

.cdph-main-column {
    padding-left: 28px;
    border-left: 1px solid var(--cdph-border);
    overflow-wrap: anywhere;
}


/* Responsive media inside informational content */

.cdph-main-column img,
.cdph-main-column video,
.cdph-main-column iframe {
    max-width: 100%;
}

.cdph-main-column img {
    height: auto;
}


/* Side-navigation wrapper */

.cdph-side-navigation-region {
    width: 100%;
}


/* ----------------------------------------------------------
   8. Side navigation
   ---------------------------------------------------------- */

.cdph-side-nav {
    width: 100%;
    font-size: 14px;
    line-height: 1.35;
}


/* Remove legacy tree/bullet presentation */

.cdph-side-nav .cdph-side-nav__list,
.cdph-side-nav .cdph-side-nav__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdph-side-nav .cdph-side-nav__branch,
.cdph-side-nav .cdph-side-nav__item {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* Standard navigation link */

.cdph-side-nav .cdph-side-nav__link,
.cdph-side-nav .cdph-side-nav__link:link,
.cdph-side-nav .cdph-side-nav__link:visited {
    display: block;
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid transparent;

    color: var(--cdph-text) !important;
    background: transparent !important;

    font-weight: 500;
    text-decoration: none !important;
}


/* Hover and keyboard focus */

.cdph-side-nav .cdph-side-nav__link:hover,
.cdph-side-nav .cdph-side-nav__link:focus {
    color: var(--cdph-purple) !important;
    background: var(--cdph-background-soft) !important;
    text-decoration: underline !important;
}


/* Current page */

.cdph-side-nav
.cdph-side-nav__item--active
> .cdph-side-nav__link,
.cdph-side-nav
.cdph-side-nav__item.active
> .cdph-side-nav__link {
    border-left-color: var(--cdph-blue);

    color: var(--cdph-blue) !important;
    background: #f6f8fa !important;

    font-weight: 700;
    text-decoration: none !important;
}


/* Nested navigation */

.cdph-side-nav .cdph-side-nav__sublist {
    margin-top: 2px;
}

.cdph-side-nav
.cdph-side-nav__sublist
.cdph-side-nav__sublist
.cdph-side-nav__link {
    padding-left: 24px;
    font-size: 13px;
}


/* Give adjacent entries subtle separation without boxes */

.cdph-side-nav__item + .cdph-side-nav__item {
    border-top: 1px solid #eeeeee;
}



/* ----------------------------------------------------------
   9. Homepage
   ---------------------------------------------------------- */

.cdph-home-hero {
    width: 100%;
    min-height: 500px;
    background-image: url('/Homehero.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cdph-home-hero__inner {
    display: flex;
    align-items: center;
    min-height: 500px;
    width: 100%;
    max-width: var(--cdph-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.cdph-home-hero__content {
    width: 100%;
    max-width: 820px;
}

.cdph-home-hero__title {
    max-width: 820px;
    margin: 0;
    color: #000000;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
}

.cdph-home-hero__title-break {
    display: block;
    margin-top: 4px;
}

.cdph-home-accent {
    width: 100%;
    min-height: 90px;
    background: var(--cdph-purple);
}


/* ----------------------------------------------------------
   10. Footer
   ---------------------------------------------------------- */

.cdph-site-footer {
    width: 100%;
    margin-top: var(--cdph-space-2xl);
    background: #eeeeec;
    border-top: 1px solid var(--cdph-border);
    color: var(--cdph-text);
}

.cdph-site-footer .footer-bottom {
    width: 100%;
    padding: 0;
    background: transparent;
}

.container.cdph-site-footer__inner {
    width: 100%;
    max-width: var(--cdph-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: 18px 24px;
}

.cdph-site-footer__content {
    width: 100%;
    font-size: 14px;
    line-height: 1.45;
}

.cdph-site-footer__content p {
    margin: 0;
}

.cdph-site-footer__content a,
.cdph-site-footer__content a:link,
.cdph-site-footer__content a:visited {
    color: var(--cdph-blue);
}

.cdph-site-footer__content a:hover,
.cdph-site-footer__content a:focus {
    color: var(--cdph-purple);
    text-decoration: underline;
}


/* ----------------------------------------------------------
   11. Responsive shell adjustments
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    /* Environment warning */

    .cdph-environment-warning__inner {
        padding-top: 10px;
        padding-right: 16px;
        padding-bottom: 11px;
        padding-left: 16px;
    }

    .cdph-environment-warning__message {
        font-size: 15px;
    }

    .cdph-environment-warning__link {
        font-size: 13px;
    }


    /* Header */

    .cdph-site-header__inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cdph-site-header .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cdph-site-header .navbar-brand {
        padding: 12px 0;
    }

    .cdph-brand-logo {
        height: 44px;
    }

    .cdph-site-header .navbar-toggle {
        float: none;
        margin: 0;
    }

    /* Informational two-column layout */

.container.cdph-content-layout {
    padding-left: 16px;
    padding-right: 16px;
}

.cdph-side-column,
.cdph-main-column {
    padding-left: 15px;
    padding-right: 15px;
}

.cdph-main-column {
    border-left: 0;
}


    /* Mobile navigation */

    .cdph-site-header .cdph-primary-nav__inner {
        padding-left: 0;
        padding-right: 0;
    }

    .cdph-site-header .cdph-primary-nav__list {
        margin: 0;
    }

    .cdph-site-header .cdph-primary-nav__item,
    .cdph-site-header .cdph-primary-nav__utility {
        float: none;
        width: 100%;
    }

    .cdph-site-header .cdph-primary-nav__list > li > a,
    .cdph-site-header .cdph-primary-nav__list > li:first-child > a {
        padding: 10px 0 !important;
    }

    .cdph-site-header .divider-vertical {
        display: none;
    }

    .cdph-site-header .cdph-primary-nav__utility > a {
        min-height: 0;
    }

    .cdph-site-header .username {
        max-width: 100%;
    }


    /* Breadcrumbs */

    .cdph-breadcrumbs {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 12px;
    }

    .cdph-breadcrumbs__item:not(:last-child)::after {
        margin-left: 6px;
        margin-right: 6px;
    }


    /* Page title */

    .cdph-page-banner {
        margin-bottom: 22px;
        padding: 13px 15px;
    }

    .cdph-page-title {
        font-size: 25px;
    }



    /* Homepage */

    .cdph-home-hero,
    .cdph-home-hero__inner {
        min-height: 360px;
    }

    .cdph-home-hero__inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cdph-home-hero__content,
    .cdph-home-hero__title {
        max-width: 100%;
    }

    .cdph-home-hero__title {
        font-size: 28px;
    }

    .cdph-home-accent {
        min-height: 64px;
    }


    /* Footer */

    .cdph-site-footer__inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}