/**
 * Holcim Rebrand — Legacy Site Header & Navigation
 *
 * Color overrides for header, top nav, and content headings.
 * Cascades after styles.css. Does not modify layout or body content.
 * ul.depth1 (postit sub-nav) is intentionally untouched.
 *
 * Palette reference: theme/less/holcim-colors.less
 *   #041739 — @holcim-premium-blue  (header bg, nav tabs)
 *   #1d4370 — @holcim-dark-blue     (nav hover)
 *   #04bbf1 — @holcim-bright-blue   (active/current nav tab)
 *   #007fad — @holcim-medium-blue   (h1/h2)
 */


/* =============================================================================
   HOLCIM FONTS
   ============================================================================= */

@font-face {
    font-family: 'Holcim';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Holcim-Regular.eot');
    src: local(''),
         url('../fonts/Holcim-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Holcim-Regular.woff2') format('woff2'),
         url('../fonts/Holcim-Regular.woff') format('woff'),
         url('../fonts/Holcim-Regular.svg#holcim') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'Holcim';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Holcim-Bold.eot');
    src: local(''),
         url('../fonts/Holcim-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Holcim-Bold.woff2') format('woff2'),
         url('../fonts/Holcim-Bold.woff') format('woff'),
         url('../fonts/Holcim-Bold.svg#Holcim') format('svg');
    font-display: swap;
}

@font-face {
    font-family: 'Holcim-headline';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/Holcim-HeadlineBlack.eot');
    src: local(''),
         url('../fonts/Holcim-HeadlineBlack.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Holcim-HeadlineBlack.woff2') format('woff2'),
         url('../fonts/Holcim-HeadlineBlack.woff') format('woff'),
         url('../fonts/Holcim-HeadlineBlack.svg#Holcim') format('svg');
    font-display: swap;
}


/* =============================================================================
   HEADER
   ============================================================================= */

div#header {
    background: #041739;
    background-image: none;
    display: flex;
    align-items: flex-end;
    padding-left: 60px;
    padding-right: 60px;
    font-family: 'Holcim', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* =============================================================================
   LOGO — Replace old PNG with LogoZinco.svg (full SVG visible)
   SVG viewBox: 101.34 × 192.76 → aspect ratio 0.526 (width:height).
   Available header height above nav: ~91px.
   Logo × 1.2 = 91px → height: 76px, width: 40px (= 76 × 0.526, matches ratio).
   margin ≈ 10% of logo height = 8px → top: 8px. Logo bottom at y:84px, nav
   starts at ~y:91px. background-size: contain fills the element exactly.
   ============================================================================= */

#header h1#logo {
    background-image: url(../images/LogoZinco.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 60px;
	  height: 94px;
    position: static; /* leave absolute flow → join flex row */
    top: auto;
    left: auto;
    align-self: center; /* vertically center logo in the 125px header */
    flex-shrink: 0;
    margin: 0;
    margin-right: 50px;
}


/* =============================================================================
   CLAIM — hide
   ============================================================================= */

div#claim {
    display: none;
}


/* =============================================================================
   NAVIGATION — leave absolute flow to sit beside logo in flex row
   position:relative keeps ul.depth1 (postit) anchored to this element.
   display:flow-root clears the floated ul.depth0 items so the div has height.
   ============================================================================= */

div#navigation {
    position: relative; /* was absolute;bottom:0 — flex-end on parent handles vertical align */
    bottom: auto;
    display: flow-root;
    z-index: 100; /* above img#floatImage (z-index:99); header bg stays behind shovel */
}


/* =============================================================================
   TOP NAV — depth0 list items
   Tab style: rounded top corners only (register card / folder tab look).
   border-bottom: none lets the tab sit flush against the content area below.
   padding-right: 0 overrides the 19px legacy PNG geometry from styles.css.
   overflow: hidden clips the a/span child to the rounded top corners.
   Uses child combinator (> li) to avoid bleeding into ul.depth1 descendants.
   ============================================================================= */

div#navigation ul.depth0 > li {
    padding-right: 0;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
    margin-bottom: 0;
    background: #041739;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-bottom: none;
    box-shadow: none;
}


/* =============================================================================
   TOP NAV — link and span text (direct children only)
   Transparent background so gradient on li shows through.
   Balanced padding replaces the old asymmetric PNG-tuned values.
   ============================================================================= */

div#navigation ul.depth0 > li > a,
div#navigation ul.depth0 > li > span {
    background: transparent;
    background-image: none;
    color: #ffffff;
    box-shadow: none;
    padding: 8px 14px;
    font-weight: normal;
}


/* =============================================================================
   TOP NAV — hover state
   ============================================================================= */

div#navigation ul.depth0 > li:hover {
    background: #1d4370;
}

div#navigation ul.depth0 > li:hover > a,
div#navigation ul.depth0 > li:hover > span {
    background: transparent;
    color: #ffffff;
    box-shadow: none;
}


/* =============================================================================
   TOP NAV — active / current item
   li.open = current path ancestor (set by PHP); li#true = exact current page.
   padding-right: 0 needed here explicitly — styles.css li#true has 2-ID
   specificity (div#navigation … li#true) which beats the > li rule above.
   ============================================================================= */

div#navigation ul.depth0 > li.open,
div#navigation ul.depth0 > li#true {
    padding-right: 0;
    margin-bottom: -1px;
    background: #04bbf1;
    background-image: none;
    box-shadow: none;
}

div#navigation ul.depth0 > li.open > a,
div#navigation ul.depth0 > li.open > span,
div#navigation ul.depth0 > li#true > span {
    background: transparent;
    background-image: none;
    color: #ffffff;
    box-shadow: none;
}


/* =============================================================================
   CONTENT HEADINGS
   ============================================================================= */

h1, h2 {
    color: #007fad;
    font-family: 'Holcim-headline', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}