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



/***********************************************
 *  FOOTER — FINAL CLEAN VERSION | 03.19.26
 *  Mirrors header architecture
 *  Structural ratio box + inlay system
 ***********************************************/


/* ===========================
   Global variables | footer
=========================== */
:root {
    --footer-ink: #2b1c0f;                 /* text, nav, general dark strokes */
    --footer-logo-color: #a8a8a8;          /* main logo fill | original koyo header logo brown | logo not featured in current iteration */
    --footer-border-color: #a8a8a8;        /* outline stroke (if present) | only if the logo has a distinct outline stroke separate from its main fill */
    --footer-accent-color: #a8a8a8;        /* decorative SVGs (lines, dividers, inlay, flourishes) | footer */
    --footer-text-color: #3C2415;          /* phone/address block | icon + text | original koyo header logo brown */
    --footer-copyright-color: #3C2415;     /* phone/address block | icon + text | original koyo header logo brown */
    --footer-inlay-color: #a8a8a8; /* stroke-only inlays | 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 (footer)
=========================== */
#footer svg * {
    fill: var(--footer-ink);
}

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

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

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

/* FOOTER — text/info block */
#footer .footer-copyright-svg svg * {
    fill: var(--footer-copyright-color);
}

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

/* /* FOOTER — inlay SVGs | stroke-only */
#footer .footer-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(--footer-inlay-color);
	*/
    fill: none !important;     /* inlay is stroke‑only */
}


/* ===========================
   Footer container + background
=========================== */
#footer {
    width: 100%;
	/* this block above ^^^ is the only one, in the previous iteration | the blocks below are added to possibly address the gap between footer and window */
	display: block;
    margin: 0;
    padding: 0;
}

/* Foreground wrapper */

/*
.footer-inner {
    position: relative;
    z-index: 1;
}
*/

/* this block replaces the block above ^^^ */
/* blanking this out here, to more closely mirror the header... */
/*
#footer .footer-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
}
*/



/* Structural ratio box — defines footer height */
.footer-bg {
    width: 100%;
    aspect-ratio: 3000 / 156; /* desktop footer ratio */
    background-image: url('../assets/images/footer/background/koyo-footer-background.Desktop.3000x156.v1.0.0.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: relative;
    display: block;
    min-height: 100px; /* guardrail */
    z-index: 0;
	/* these blocks above ^^^ are all in the previous iteration | the blocks below are added to possibly address the gap between footer and window */
	margin: 0;
    padding: 0;
}

/*
.footer-bg { 
    /* this is the only rule that was not used from this block
    min-height: 100px; /* guardrail 
}
*/


/* this one replaces the block above ^^^... cross-checked vs. new iteration and this new block inherits rules from the block above, so kind of a fusion... */
/*
.footer-bg {
    /* this url may have been a cause for some woes... koyo-footer-background.Desktop.3000x???....png'
    background-image: url('../assets/images/footer/background/koyo-footer-background.Desktop.3000x???....png');
    /* no longer using the height parameter 
    height: 100%;
    /* position is now relative 
    position: absolute;
    /* this rule no longer being used 
    inset: 0;
}
*/


/* ============================================
   Footer Background Variant Swaps
============================================ */

/* ≥1921px — 4K / large display cap */
@media (min-width: 1921px) {
  .footer-bg {
	aspect-ratio: 3000 / 156; /* desktop footer ratio */
    background-size: 3000px auto;   /* locks at native width, no upscaling */
    background-color: #2a1e12;      /* match to footer image edge tone */
  }
}

@media (max-width: 1200px) {
    .footer-bg {
        background-image: url('../assets/images/footer/background/koyo-footer-background.Tablet.2000x180.v1.0.0.png');
		aspect-ratio: 2000 / 180;
    }
}

@media (max-width: 768px) {
    .footer-bg {
        background-image: url('../assets/images/footer/background/koyo-footer-background.Mobile.1200x220.v1.0.0.png');
		aspect-ratio: 1200 / 220;
    }
}


/*
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.
*/



/* ===========================
   Footer inner wrapper
=========================== */
/* this rule is now higher up in the cascade ^^^ so, moved way up from this previous location */
/*
#footer .footer-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
}
*/

/* this block replaces the block above ^^^ */
#footer .footer-inner {
    position: relative;
    width: 100%;
    height: 100%;
	display: block;     /* mirrors header-inner — not flex */
	/*
    display: flex;
	*/
	/*
	z-index: 1;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
	*/
	padding: 0;
}



/* Foreground wrapper for text + copyright */
.footer-foreground {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}



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

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


/* Logo color variants */
/* these are omitted in the last clean-up ??? */
/*
.logo-default { display: block; }
.logo-rich-black { display: none; }
.logo-black { display: none; }
.logo-brown { display: none; }
*/


/* SVG normalization | logo */
/* this is omitted in the last clean-up ??? */
/*
.logo-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}
*/


/* 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) */
/* this is currently orphaned | footer doesn't currently have a logo in the PHP */
/*
.footer-logo-svg svg {
    height: 100%;
    width: auto;
    display: block;
}
*/


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


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


/* Copyright (width-driven) */
.footer-copyright-svg svg {
    /*
	width: 100%;
    height: auto;
	*/
	height: 100%;
    width: auto;            /* overrides the width-driven rule for this component */
    display: block;
}



/* Logo color variants */
/* these are omitted in the last clean-up ??? | these are header-specific classes anyway and don't correspond to anything currently in footer... there is no logo variant system in current iteration */
/*
.logo-default { display: block; }
.logo-rich-black { display: none; }
.logo-black { display: none; }
.logo-brown { display: none; }
*/


/* ===========================
   Footer logo block
=========================== */
/* this is currently orphaned | footer doesn't currently have a logo in the PHP */
/*
.footer-logo-svg {
    height: clamp(60px, 12vw, 150px);
    width: auto;
    z-index: 4;
}
*/

/* Footer logo link wrapper */
/* this is now moved below the footer-logo-svg */
/* this is currently orphaned | footer doesn't currently have a logo in the PHP | without a logo, no need for a logo link wrapper */
/*
.footer-logo-link {
    display: inline-block;
    padding: 0.25rem;
}
*/


/* ===========================
   Footer text block
=========================== */
/* keeping commented out iteration as bread crumb | to show what was replaced */ 
/*
.footer-text-svg {
    height: clamp(40px, 8vw, 100px);
    width: auto;
    z-index: 2;
}
*/


/* this block replaces the block above ^^^ | since added the foreground wrapper */
.footer-text-svg {
    position: absolute;
    left: 50%;           /* adjust to taste once rendering | 50% centers the asset vertically (x-axis) */
	/*
    top: 38%;                          /* adjust to taste once rendering
    */
	top: 50%;            /* adjust to taste once rendering | started out at 38%... 50% centers the asset horizontally (y-axis) */
	transform: translate(-50%, -50%);
    width: 48%;                        /* previously set at 30% | previously set at 65% | previously set at 45% | previously set at 40% | adjust width to taste */
    height: auto;
	max-height: 60px;                 /* hard guardrail | added this parameter to mirror header | text line is truncated for some reason in footer... | adjust width to taste | remove or comment out — this is constraining the SVG render | the footer's ratio box is 3000/156 — very shallow, so the same width: 45% resolves to a much narrower pixel value at the same viewport width, and the SVG text, being width-driven, gets squeezed and clips at the wrapper's right edge. */
	pointer-events: none;
    z-index: 3;
}


@media (max-width: 1280px) {
    .footer-text-svg { width: 54%; }
}

@media (max-width: 1024px) {
    .footer-text-svg { width: 66%; }
}

@media (max-width: 768px) {
    .footer-text-svg { width: 88%; }
}

@media (max-width: 600px) {
    .footer-text-svg { width: 94%; }
}



/* ===========================
   Footer copyright block
=========================== */
/* keeping commented out iteration as bread crumb | to show what was replaced */
/*
.footer-copyright-svg {
    height: clamp(40px, 8vw, 100px);
    width: auto;
    z-index: 3;
}
*/


/* this block replaces the block above ^^^ | since added the foreground wrapper */
.footer-copyright-svg {
    position: absolute;
	top: 50%;                          /* adjust to taste once rendering | started out at 72%... 50% centers the asset vertically (x-axis) */
    left: 2%;                          /* adjust to taste once rendering | starting point — equidistant margin from left inlay edge relative to inner edges of top and bottom of inlay */
    /*
	transform: translate(-50%, -50%);
	*/
	transform: translateY(-50%);   /* centers vertically only, no longer translateX */
    /*
	width: 35%;
	*/
	width: auto;
	/*
    height: auto;
	*/
	height: 30%;            /* previously set at 45% |previously set at 55% | constrained to fit within inlay — adjust this dial */
	max-height: 60px;       /* hard guardrail */
    pointer-events: none;
    z-index: 3;
}


/* ============================================
   Footer Copyright Variant Visibility
============================================ */
@media (max-width: 768px) {
    .footer-copyright-svg {
        top: auto;
        bottom: 8%;        /* pins to bottom of footer shape */
        transform: translateY(0);
        height: 22%;       /* slightly larger for readability at mobile */
    }
}



/* ===========================
   Footer inlay (positioning)
=========================== */
.footer-inlay-svg {
    width: 98%; /* visually matches header inset */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}


/* ============================================
   Footer Inlay Variant Visibility
============================================ */
/*
.footer-inlay {
    display: none;
}

.footer-inlay-a {
    display: block;
}

@media (max-width: 1200px) {
    .footer-inlay {
        display: none;
    }
    .footer-inlay-b {
        display: block;
    }
}

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



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

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

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

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

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


/* Footer inlay width per breakpoint */
.footer-inlay-svg {
    width: 96%;   /* desktop: 2970/3000 = 99% of PNG, slight margin */
}

@media (max-width: 1200px) {
    .footer-inlay-svg {
        width: 96%;   /* tablet: 1960/2000 */
    }
}

@media (max-width: 768px) {
    .footer-inlay-svg {
        width: 94%;   /* mobile: 1150/1200 */
    }
}



/* ===========================
   Footer embellishment block
=========================== */
.footer-embellishment-svg {
    width: 20vw;
    max-width: 300px;
    z-index: 2;
}



/* ============================================
   Footer fallback (rarely used)
============================================ */
@supports not (background-size: cover) {
    #footer {
        background-image: url('../assets/images/footer/background/koyo-footer-background.a.1920x100.fallback.png');
    }
}