@charset "UTF-8";
/* CSS Document */

/***********************************************
 *  HEADER — FINAL CLEAN VERSION | 03.17.26
 *  New multi‑variant system + existing breakpoint
 *  logo/text adjustments preserved
 ***********************************************/


/* ===========================
   Global variables | Header
=========================== */

:root {
    --header-ink: #2b1c0f;           /* text, nav, general dark strokes */
    --header-logo-color: #3C2415;    /* main logo fill | original koyo header logo brown */
    --header-border-color: #a8a8a8;  /* outline stroke (if present) | only if the logo has a distinct outline stroke separate from its main fill */
    --header-accent-color: #a8a8a8;  /* decorative SVGs (lines, dividers, inlay, flourishes) | header */
    --header-text-color: #3C2415;    /* phone/address block | icon + text | original koyo header logo brown */
    --header-inlay-color: #a8a8a8;   /* footer inlay | stroke color | this one is not a fill, but a stroke | this rule assigns color to color agnostic inlay iteration */
}

/* #a8a8a8 | silver */
/* #3C2415 | original koyo header logo brown */
/* #2b1c0f | orange-ish charcoal-y */
/* #DC143C | crimson */
/* #b31b1b | carnelian */



/* ===========================
   Global SVG styling
=========================== */
/*
#header svg * {
    fill: var(--header-ink);
}
*/

/* this replaces the line above ^^^, as the line above is nuking everything... */
/* Only apply ink color to nav icons or generic header SVGs */
/* now, this is a duplicate... it isn't interfereing, but it is causing some clutter... will clean this section up... */
/*
#header .header-accent-svg svg * {
    fill: var(--header-accent-color);
}
*/

/* or, if truly needing a "default", use the line below, instead... svg.component is the shared base class */
/*
#header .svg-component svg * {
    fill: var(--header-ink);
}

*/




/* ===========================
   Global SVG styling | Component-level overrides
=========================== */

/* HEADER — logo recoloring (correct, future‑proof) */
#header .header-logo-svg svg * {
    fill: var(--header-logo-color);
}

/* HEADER — text/info block */
#header .header-text-svg svg * {
    fill: var(--header-text-color);
}

/* HEADER — accent SVGs */
#header .header-accent-svg svg * {
    fill: var(--header-accent-color);
}

/* HEADER — inlay SVGs */
#header .header-inlay-svg svg * {
	/* in this instance, I need to override this override, otherwise the inlay border has a fill... in this case the silver fill... we only want the stroke-based/inlay
    fill: var(--header-inlay-color);
	*/
    fill: none !important; /* inlay is stroke‑only */
}

   /* if I want the gradient stroke but no fill */
/*
#header .header-inlay-svg svg path {
    fill: none !important;
}
  */



/* ===========================
   Header container + background
=========================== */
#header {
    width: 100%;
}

/* Desktop — 3000x390 */
.header-bg {
    width: 100%;
    aspect-ratio: 3000 / 390;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: block;
	
	/* commenting this out, for now... */
	/*
    min-height: 250px;
	*/
	
}


/* ============================================
   Header Background Variant Swaps
============================================ */

/* Desktop — 3000x390 */

.header-bg {
    background-image: url('../assets/images/header/background/koyo-header-background.Desktop.3000x390.v1.0.0.png');
	aspect-ratio: 3000 / 390;
	/*   /assets/ vs. assets/   |   + .a vs. Desktop
	background-image: url('assets/images/header/background/koyo-header-background.Desktop.3000x390.v1.0.0.png');
	background-image: url('/assets/images/header/background/koyo-header-background.a.3000x390.v1.0.0.png'); 
	*/
}

/* Desktop — 3000x390 */
/* ≥1921px — 4K / large display cap
   Prevents the 3000px source image from upscaling beyond its native width.
   background-color fills the side margins; match to the edge tone of the header image.
   Adjust --header-edge-fill to taste after reviewing at 4K. */
@media (min-width: 1921px) {
  .header-bg {
	aspect-ratio: 3000 / 390;
    background-size: 3000px auto;   /* locks at native width, no upscaling */
    background-color: #2a1e12;      /* placeholder — sample the edge of your header image and replace */
  }
}

/* Tablet — 2000x500 */
@media (max-width: 1200px) {
    .header-bg {
        background-image: url('../assets/images/header/background/koyo-header-background.Tablet.2000x500.v1.0.0.png');
		aspect-ratio: 2000 / 500;
		/*   /assets/ vs. assets/   |   + .b vs. Tablet
		background-image: url('assets/images/header/background/koyo-header-background.Tablet.2000x500.v1.0.0.png');
		background-image: url('/assets/images/header/background/koyo-header-background.b.2000x500.v1.0.0.png'); 
		*/
    }
}

/* Mobile — 1200x600 */
@media (max-width: 768px) {
    .header-bg {
        background-image: url('../assets/images/header/background/koyo-header-background.Mobile.1200x600.v1.0.0.png');
		aspect-ratio: 1200 / 600;
		/*   /assets/ vs. assets/   |   + .c vs. Mobile
		background-image: url('assets/images/header/background/koyo-header-background.Mobile.1200x600.v1.0.0.png');
		background-image: url('/assets/images/header/background/koyo-header-background.c.1200x600.v1.0.0.png'); 
		*/
    }
}


/*
On the header/footer — 4K override:
The issue at ≥1921px is that background-size: cover will stretch your 3000px-wide source image to fill a 3840px-wide (4K) viewport — that's a 28% upscale, which may be acceptable depending on the image content (wood grain, texture) but could soften or pixelate on very sharp displays.
You have two options:
Option A — background-size cap (no new asset needed). Lock the background image at its native width and let it tile or center with a solid fill fallback. Works well if the image has a centered focal point and the edges are relatively neutral.
Option B — background-size cap with a fill color. Set background-size to a pixel cap and add a matching background-color that blends with the image edges. Since your header has a wooden texture that likely has a consistent tone at the edges, this is cleaner than tiling.
Here's what I'd add to header.css, right after your existing @media (max-width: 1200px) block:

The #2a1e12 is a placeholder dark brown — you'll want to eyedropper the far left or right edge pixel of your actual header/footer background images and replace that value. If the edges fade to a consistent color (common in decorative wood/paper textures), this will be seamless. If the edges are complex, tiling (background-repeat: repeat-x) might be a cleaner fallback than a solid fill.
One more thing to check: your header.css has a @media (max-width: 1600px) rule setting min-height: clamp(180px, 12vw, 260px) on .header-bg. You may want a corresponding min-height floor for the 1921px+ tier to ensure the header doesn't collapse at extreme widths — but since aspect-ratio: 3000 / 390 is doing the height work, and that ratio is maintained by the browser, you likely don't need it. Just something to verify visually at those sizes.
*/


/* ===========================
   Header SVG components
=========================== */


/* ===========================
   Header inner wrapper
=========================== */
#header .header-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
}


/* Normalize SVG intrinsic sizing inside header | neutralize intrinsic SVG sizing so wrapper controls the size | in this case, controls only width dimension | one or the other, regarding this block or the one below */
/* commented out, due to adding the three SVG Normalization - Per Component blocks | as, the components are governed by different dimensions, so it cannot be universally controlled and must be further scoped as component-specific */
/*
#header .header-inner svg {
    width: 100%;
    height: auto;
    display: block;
}
*/

/* Normalize SVG intrinsic sizing inside header | neutralize intrinsic SVG sizing so wrapper controls the size | in this case, controls both height and width dimensions | one or the other, regarding this block or the one above ^^^  */
/* commented out, due to adding the three SVG Normalization - Per Component blocks | as, the components are governed by different dimensions, so it cannot be universally controlled and must be further scoped as component-specific */
/*
#header .header-inner svg {
    width: 100%;
    height: 100%;
    display: block;
}
*/



/* Inlay, logo, text rules follow here… */

/* ============================================
   SVG Normalization — Per Component
   Ensures each SVG follows its wrapper's sizing logic
============================================ */

/* Now that I added the three blocks, below, the other two blocks above ^^^ must go, as those two blocks above contadict one another... also, that rule would complicate things, because the header svg assest are governed by different parameters, it is anot a global commonality... i.e. logo is governed by width whereas, text and inlay are governed by height... */

/* Logo (height-driven) */
.header-logo-svg svg {
    height: 100%;
    width: auto;
    display: block;
}

/* Inlay (width-driven) */
.header-inlay-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Text (width-driven) */
.header-text-svg svg {
    width: 100%;
    height: auto;
    display: block;
}



/* Logo color variants */
.logo-default { display: block; }
.logo-rich-black { display: none; }
.logo-black { display: none; }
.logo-brown { display: none; }


/* SVG normalization | logo */
/* commenting this out now, because it is overriding/conflicting and applying global SVG sizing of logo */
/*
.logo-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}
*/

/* SVG normalization | shared base class */
/* commenting this out now, because it is overriding/conflicting and applying global SVG sizing... leaving it in the PHP class stack : <div class="svg-component header-inlay-svg inlay-default header-inlay header-inlay-a"> has no effect, because wihout the rule it now becomes inert...the classes in PHP class stack are not functional rules, but just a hook that calls on the css rules within that div... so, another solution would be to remove that class " svg-component" from the PHP class stack... if left active in the CSS doc, but the hook is removed from the PHP class stack, then the rule becomes entirely irrelevant...CSS selectors only apply if the selector matches an element... if left in the PHP stack and active in the CSS doc, then the rule wll fire... so, if left in the PHP Class Stack and the CSS rule is active, then the rule must be overriden... so, CSS overrides may be applied via re-scoping, so that the active rule may still aplly elsewhere...  */

/*
.svg-component svg {
    width: 100%;
    height: 100%;
    display: block;
}
*/

/* HEADER OVERRIDE — neutralizes global rule inside header */
/* the re-coping override(s) would be aded immediately after the global rule, like this... */
/* 
#header .svg-component svg {
    width: auto;
    height: auto;
}
*/

/* Only apply global SVG normalization outside the header */
/* the re-scoping override(s) would be aded immediately after the global rule, like this... */
/*
:not(#header) .svg-component svg {
    width: 100%;
    height: 100%;
    display: block;
}
*/

/* Or if wanting the rule to only apply to the nav and footer, for exmple, it could be re-scoped like this */
/* in this instance, it is a moot point, as written, becuase the header.css do does not hav anything to do with footer and/or nav... */
/* I have a dedicated footer.css doc,  but not a nav-specific css doc... right now, the nav rules are included in the custom-styles.css doc... if fleshed out, it may make sense to build out a bump-out doc for nav */
/*
#nav .svg-component svg,
#footer .svg-component svg {
    width: 100%;
    height: 100%;
    display: block;
}
*/



/* Foreground wrapper for logo + text */
.header-foreground {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none; /* optional, but keeps layering clean */
}



/* Header logo link wrapper */
.header-logo-link {
    display: inline-block;
    padding: 0.25rem; /* subtle, optional */
	pointer-events: auto; /* restores clickability inside a non-interactive parent */
}



/* ===========================
   Header logo
=========================== */
.header-logo-svg {
    height: 65%; /* of inlay height */
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


/* ===========================
   Header text block
=========================== */
.header-text-svg {
    position: absolute;
    left: 50%;
    top: 93.33%;     /* was previously 95.73% | centerline aligned to bottom stroke */
    transform: translate(-50%, -50%);
    width: 45%;
    height: auto;
    max-height: 120px;
    pointer-events: none;
    z-index: 3;
}



/* ============================================
   Breakpoint Adjustments (Logo + Text Only)
============================================ */

/* ≤1600px */
@media (max-width: 1600px) {
    .header-bg {
        min-height: clamp(180px, 12vw, 260px);
    }
}

/* ≤1280px */
@media (max-width: 1280px) {
    .header-logo-svg { height: 68%; }
    .header-text-svg {
        width: 48%;
        top: 92.5%;
    }
}

/* ≤1200px */
@media (max-width: 1200px) {
    .header-bg {
        min-height: clamp(160px, 14vw, 220px);
    }
    .header-logo-svg { height: 68%; }
    .header-text-svg {
        width: 48%;
        top: 92.5%;
    }
}

/* ≤1024px */
@media (max-width: 1024px) {
    .header-logo-svg { height: 70%; }
    .header-text-svg {
        width: 52%;
        top: 92%;
    }
}

/* ≤900px */
@media (max-width: 900px) {
    .header-bg {
        min-height: clamp(140px, 16vw, 200px);
    }
    .header-logo-svg { height: 70%; }
    .header-text-svg {
        width: 52%;
        top: 92%;
    }
}

/* ≤768px */
@media (max-width: 768px) {
    .header-logo-svg { height: 72%; }
    .header-text-svg {
        width: 58%;
        top: 91.5%;
    }
}

/* ≤600px */
@media (max-width: 600px) {
    .header-bg {
        min-height: clamp(120px, 18vw, 180px);
    }
    .header-logo-svg { height: 72%; }
    .header-text-svg {
        width: 58%;
        top: 91.5%;
    }
}

/* ≤480px */
@media (max-width: 480px) {
    .header-logo-svg { height: 75%; }
    .header-text-svg {
        width: 62%;
        top: 90.5%;
    }
}



/* ===========================
   Header inlay (positioning)
=========================== */
.header-inlay-svg {
	/*
    width: 98.4375%;      /* 1890 / 1920 
	*/
	width: 94%;   /* desktop — slight margin each side | this line replaces the line above ^^^ may need some fine-tuning */
    position: absolute;   /* this changes the position from what it was | previously, position: relative;  */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}



/* ============================================
   Header Inlay Variant Visibility
============================================ */
/*
.header-inlay {
    display: none;
}

.header-inlay-a {
    display: block;
}
*/

/* Tablet (B) */
/*
@media (max-width: 1200px) {
    .header-inlay {
        display: none;
    }
    .header-inlay-b {
        display: block;
    }
}
*/

/* Mobile (C) */
/*
@media (max-width: 768px) {
    .header-inlay {
        display: none;
    }
    .header-inlay-c {
        display: block;
    }
}
*/

/* ============================================
   Header Inlay Variant Visibility | 2.0
============================================ */

/* this replaces the Header Inlay Variant Visibility blocks above ^^^ */

/* Default (Desktop A) */
.header-inlay   { display: none; }
.header-inlay-a { display: block; }
.header-inlay-b { display: none; }
.header-inlay-c { display: none; }

/* Tablet (B) — ≤1200px */
@media (max-width: 1200px) {
    .header-inlay-a { display: none; }
    .header-inlay-b { display: block; }
    .header-inlay-c { display: none; }
}

/* Mobile (C) — ≤768px */
@media (max-width: 768px) {
    .header-inlay-a { display: none; }
    .header-inlay-b { display: none; }
    .header-inlay-c { display: block; }
}


/* Desktop inlay: 1890 wide, bg box width = 100% of .header-bg */
/* Target: inlay fills ~63% of bg with equal left/right margin */
/* But your inlay SVG IS the decorative border — it should nearly fill the bg */
/* 1890/3000 = 63% of the PNG, but the PNG is background-size: cover */
/* So size relative to the rendered box: */

.header-inlay-svg {
    width: 94%;   /* desktop — slight margin each side */
}

@media (max-width: 1200px) {
    .header-inlay-svg {
        width: 96%;   /* tablet inlay 1960 inside 2000bg — nearly full width */
    }
}

@media (max-width: 768px) {
    .header-inlay-svg {
        width: 95%;   /* mobile inlay 1150 inside 1200bg */
    }
}



/* ===========================
   Header fallback
=========================== */

@supports not (background-size: cover) {
    #header {
		background-image: url('../assets/images/header/woodenHeader2026.1920x250.4.2.0.png');
        /*   /assets/ vs. assets/
		background-image: url('..assets/images/header/woodenHeader2026.1920x250.4.2.0.png');
		*/
    }
}