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


/***********************************************
 *  DESIGN TOKENS/VARIABLES — GLOBAL CONTROL PANEL - LAYOUT OVERRIDES *
 ***********************************************/
:root {
  /* Layout */
	
  /* Page-level rhythm */
  --page-top-gap: 48px;
  --page-bottom-gap: 48px;
	
  /* Module-level rhythm */
  --grid-gap: 1.5rem; /* or whatever matches your horizontal gutter | default bootstrap horizontal gutter is 1.5rem | the first adjustment was 3rem, but too much
  --grid-gap: 24px;   /* or whatever your value is... | 1.5rem = 24px | this is a suggested change setting to account for the --page-top-gap and page-bottom-gap update... ^^^ see above ^^^ */ /* default Bootstrap gutter (1.5rem = 24px) */
  
	/* Legacy (to remove later) */
  /*
	--global-top-padding: 40px; 
	*/ /* this will be redundant, once --page-top-gap is fully implemented... once done can either zero out or grey out/delete */
  /* there is a previous iteration of this ^^^ rule that was placed right before the tumbling leaves/background implementation */
	
  /* Nav Colors */ 
  --nav-text: #ff8c00; /* closely matches previous live site iteration */
    /*--nav-text: #e67600; /* more "burnt orange" */
    /*--nav-text: #d47a1a; /* this is the first iteration selected by assistant */
  --nav-border: #ff8c00;
	/*--nav-border: #d4a15a; /* this is the first iteration selected by assistant */
  --nav-bg: #ffffff;
  
  /* Nav Colors | Hover */
  --nav-text-hover: #e67600; /* more "burnt orange" *//* original suggestion: #e0e0e0; or whatever darker shade fits your palette */
	
  /* Nav Colors | Selected/Active */
  --nav-text-selected: rgba(255,255,255,0.92); /* #e67600; | more "burnt orange" *//* original suggestion: #e0e0e0; or whatever darker shade fits your palette */


  /* Glow + Shadow */
  --nav-glow-color: rgba(212,122,26,0.6);
  --nav-glow-active: rgba(212,122,26,0.4);
  --nav-glow-selected: rgba(212,122,26,0.5);
  --nav-shadow: 0 2px 3px rgba(0,0,0,0.1);

  /* Border + Radius */
  --nav-border-width: 1px;
  --nav-radius: 0;

  /* Typography */
  --nav-font-family: "Helvetica Neue", Arial, sans-serif;
  --nav-font-weight-default: 600;
  --nav-font-weight-selected: 800;
	/*--nav-font-weight-selected: 600; /* this is the first iteration selected by assistant | it is now 800 */

  /* Geometry */
  --nav-parent-padding-y: 6px;
  --nav-child-padding-y: 4px;
	
}
	
	
	
  /* ============================================================
     Tumbling Leaves | Global Defaults
   ============================================================ */
	
  /* Tumbling Leaves | Background Graphic */
	/* this was original rule that was replaced by the leaves-top-offset rule
  --global-top-padding: 40px;
	*/


:root {
  --leaves-top-offset: 48px;            /* previously set to 250px | previously set to 220px | tune to sit/offset below header | reverted back to previous gap from global-top-padding rule  as new starting position */
  --leaves-tint: rgba(0, 0, 0, 0.05);   /* tint leaves to taste | right now set at 5% */
  --leaves-width: 600px;                /* tune width to taste */
  /* reverted back to overflow_hidden directly to site-wrapper, so height is now controlled in ::before block at height: 100% */
  /*
  --leaves-height: 2400px;              /* default, sized for the tallest page | this is base/default value... there will be page-specific overrides
  */
	
}


/* ===== site-wide tumbling maple leaves background | root-level variables/rules | end - from Claude ===== */

/* ============================================================
   Tumbling Leaves | Responsive Width Breakpoints
   Controls --leaves-width at each viewport range
   Keep --leaves-top-offset in sync with --page-top-gap (both 48px, no breakpoint overrides needed)
   ============================================================ */

/* Large desktop + high-res (1920px and above) */
@media (min-width: 1921px) {
  :root {
    --leaves-width: 900px;
  }
}

/* Standard large desktop (1280px–1920px) */
@media (min-width: 1280px) and (max-width: 1920px) {
  :root {
    --leaves-width: 750px;
  }
}

/* Tablet / small desktop (769px–1279px) — default 600px holds fine, no override needed */

/* Large mobile / small tablet edge (600px–768px) */
@media (max-width: 768px) {
  :root {
    --leaves-width: 520px;
  }
}

/* Small mobile — proportional, always ~5% margin per side (480px–599px) */
@media (max-width: 599px) {
  :root {
    --leaves-width: 90vw;
  }
}

/* Smallest phones — Galaxy Z Fold, SE, etc. (479px and below) */
@media (max-width: 479px) {
  :root {
    --leaves-width: 88vw;
  }
}



/* ============================================================
   Tumbling Leaves | Page-Specific Overrides
   ============================================================ */
/* this needs to be commented out, as the overrides will now be scoped to body */

/*
.main-home { --leaves-height: 2400px; }
.main-sushi { --leaves-height: 1800px; }
.main-photos { --leaves-height: 1600px; }
.main-location { --leaves-height: 1400px; }
*/


/* ============================================================
   Tumbling Leaves | Page-Specific Height Overrides
   Scoped to body so .site-wrapper::before can inherit
   ============================================================ */

/* a corresponding body class is added to each page-specific source (PHP) file... fore example: <body class="page-home"> & <body class="page-sushi"> */

/*
body.page-home     { --leaves-height: 2400px; }
body.page-sushi    { --leaves-height: 1800px; }
body.page-photos   { --leaves-height: 1600px; }
body.page-location { --leaves-height: 1400px; }
*/


/* ===== layout foundation ===== */
/* ===== making the wrapper a flex column | begins ===== */

html {
  min-height: 100%;   /* was height: 100% — this was locking scroll */
	/*
  height: 100%;
	*/
}

body {
  min-height: 100vh; /* ← key change | forces body to fill viewport | on pages that aren't content-heavy, this replaces the overrides that was peviously filling in the remaining space | this fix ensures the flex column always fills at least the full viewport, regardless of content length */
  display: flex;
  flex-direction: column;
}

.site-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative; /* ← added this, 03.27.26 */
  overflow: hidden; /* clips ::before at the wrapper's natural boundary | this line was removed as it was blocking the scroll | moved footer inside wrapper so reverting back to this */
  
}

/*
Issue 1: Leaves starting too high (up in the header area)
Your .site-wrapper::before uses position: absolute, but for that to work correctly, .site-wrapper needs to be the positioning context — meaning it needs position: relative. Without it, the ::before pseudo-element will climb the DOM until it finds a positioned ancestor, which could be the <body> or even the <html> element, causing it to paint relative to the very top of the page (including the header area).
The fix is straightforward — add position: relative to .site-wrapper:

Your --leaves-top-offset: 250px is then measured from the top of .site-wrapper itself (which starts below the nav), so it should land where you expect.

Issue 2: Confirming whether the browser is serving cached CSS
This is a classic development frustration. Here's a quick triage checklist:
To do a hard reload bypassing the cache, use Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac). In Chrome DevTools, you can also right-click the reload button while DevTools is open and choose "Empty Cache and Hard Reload."
To confirm which version of the file is actually being served, open DevTools → Network tab → filter by "CSS" → reload the page → click on custom-styles.css → check the Response tab. You'll see the raw file content the server actually sent.
To check if the browser used a cached copy, look at the "Status" column in the Network tab. A 304 Not Modified or (from disk cache) means it used the old version. A 200 means it fetched fresh.
If you're on a local PHP server (like MAMP, XAMPP, or similar), sometimes the server itself caches files. A full server restart can clear that.
A quick development trick to force cache-busting without touching your server config is to add a query string to your stylesheet link in the HTML:

<link href="css/custom-styles.css?v=2" rel="stylesheet">

Bump that number every time you want to guarantee a fresh fetch. It's a blunt instrument but reliable during active development.
Once you've confirmed the fresh CSS is loading, the position: relative addition to .site-wrapper should resolve the offset issue cleanly.

*/

main {
  flex: 1; /* This pushes the footer down | grows to fill available space, pushing footer down */
  padding-top: var(--page-top-gap);
  padding-bottom: var(--page-bottom-gap);
}

/* ===== this controls the global padding/spacing between the navigation, the content, and the footer | begin  ===== */
/* this was under the end of nav controls... it is now conflicting so will grey out, for now  
main {
  padding-top: var(--global-top-padding);
  padding-bottom: var(--page-bottom-padding, 40px);
}
*/


/* ===== making the wrapper a flex column | ends ===== */
/* ===== end of layout foundation ===== */



/***********************************************
 *  GLOBAL BACKGROUNDS | TUMBLING LEAVES
 ***********************************************/

/* ===== site-wide tumbling maple leaves background | begin - from Copilot ===== */

/* why tis isn't merged into the main blocks earlier in the doc... */

/* ===== I will narrow it down to body or .site-wrapper | I also need to revisit to implement the svg with the PNG as fallback | I will also revisit to implement svg as mask-image ===== */

/* ===== will delete this instance of the :root... it is here for noe as a reminder of something it conyrols directly... this same rule has been added above in the :root section

:root {
  --global-top-padding: 40px;
}

===== */

/* Leaves */
/*
body {
  background-image: 
url('../../assets/svg/tumbling-leaves/koyo-leaves-main-seven.agnostic.v1.0.0.svg') ,
*/

/* 
url('../../assets/svg/tumbling-leaves/koyoLeavesMainSeven05.7.2.0.svg') ,
*/

/*
url('../../assets/images/tumbling-leaves/koyoLeavesMainSeven05.7.1.0Artboard1000.png');
  background-repeat: no-repeat;
  background-position: center var(--page-top-gap);
  background-size: 500px auto;
  background-attachment: scroll;
  background-color: transparent;
}
*/


/* ===== Add the leaves via ::before on body or .site-wrapper, so the mask only affects that layer: ===== */
/* ===== this block replaces the block above ^^^ ===== */
/* ===== commenting this one out, to see what standalone "wrapper" iteration does... also, to prevent two stacked iterations... ===== */
/*
body::before {
  content: '';
  position: absolute; /* fixed or absolute | previous iteration was set at fixed | fixed pins the element/asset to the viewport, so it stays put while content scrolls over it... | now set to absolute, so leaves should now scroll with content | previous setting - position: fixed;  */
/*
  top: var(--leaves-top-offset);  /* offset past header | previously setting - top: var(--page-top-gap); */  
/*
  left: 50%;
  transform: translateX(-50%);
  width: var(--leaves-width);   /* my leaves width | previous setting - width: 500px;  */
/*
  height: 100%;   /* or a specific height */
/*
  z-index: 0;
  pointer-events: none;

  background-color: var(--leaves-tint); /* my leaves tint | previous setting - background-color: rgba(0, 0, 0, 0.05);  */

/*
  -webkit-mask-image: url('../../assets/svg/tumbling-leaves/koyo-leaves-main-seven.agnostic.v1.0.0.svg');
  mask-image:         url('../../assets/svg/tumbling-leaves/koyo-leaves-main-seven.agnostic.v1.0.0.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
  -webkit-mask-position: top center;
  mask-position:         top center;
  -webkit-mask-size: var(--leaves-width) auto;  /* explicit width, natural height | previous setting - -webkit-mask-size: contain  */
/*
  mask-size:         var(--leaves-width) auto;  /* explicit width, natural height | previous setting - mask-size: contain  */
/*
}
*/


/* ===== site-wide tumbling maple leaves background | end - from Claude ===== */



/* Tumbling Leaves on Wrapper | recommended to remove this one */
/*
.site-wrapper {
    background-image: 
url('../../assets/svg/tumbling-leaves/koyo-leaves-main-seven.agnostic.v1.0.0.svg') ,
*/

/* 
url('../../assets/svg/tumbling-leaves/koyoLeavesMainSeven05.7.2.0.svg') ,
*/
/*
url('../../assets/images/tumbling-leaves/koyoLeavesMainSeven05.7.1.0Artboard1000.png');
  background-repeat: no-repeat;
  background-position: center var(--page-top-gap);
  background-size: 500px auto;
  background-attachment: scroll;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
*/

/* ===== site-wide tumbling maple leaves background | end - from Copilot ===== */



/* ===== Add the leaves via ::before on body or .site-wrapper, so the mask only affects that layer: ===== */
/* ===== this block replaces the block above ^^^ ===== */

.site-wrapper::before {
  content: '';
  position: absolute; /* fixed or absolute | previous iteration was set at fixed | fixed pins the element/asset to the viewport, so it stays put while content scrolls over it... | now set to absolute, so leaves should now scroll with content | previous setting - position: fixed;  */
  top: var(--leaves-top-offset);  /* offset past header | previously setting - top: var(--page-top-gap); */ 
  left: 50%;
  transform: translateX(-50%);
  width: var(--leaves-width);   /* my leaves width | previous setting - width: 500px;  */
  height: 100%;   /* or a specific height 
  /* this line replaced the line above ^^^ | rather than 100%, it was scoped to a root-level rule that included page-specific overrides... reverted things back */
  /*
  height: var(--leaves-height);
  */
  z-index: 0;
  pointer-events: none;

  background-color: var(--leaves-tint); /* my leaves tint | previous setting - background-color: rgba(0, 0, 0, 0.05);  */
	
  -webkit-mask-image: url('../../assets/svg/tumbling-leaves/koyo-leaves-main-seven.agnostic.v1.0.0.svg');
  mask-image:         url('../../assets/svg/tumbling-leaves/koyo-leaves-main-seven.agnostic.v1.0.0.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
  -webkit-mask-position: top center;
  mask-position:         top center;
  -webkit-mask-size: var(--leaves-width) auto;  /* explicit width, natural height | previous setting - -webkit-mask-size: contain  */
  mask-size:         var(--leaves-width) auto;  /* explicit width, natural height | previous setting - mask-size: contain  */
}

/* ===== site-wide tumbling maple leaves background | end - from Claude ===== */



/***********************************************
 *  GLOBAL SVG NEGATIVE SCOPES
 ***********************************************/
main svg path,
.contact-info svg path {
    fill: currentColor;
}



/***********************************************
 *  GLOBAL TYPOGRAPHY | GLOBAL LINK DEFAULTS
 ***********************************************/

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/***********************************************
 *  GLOBAL BUTTON SYSTEM (shared parent + child)
 ***********************************************/
.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-bg);
  color: var(--nav-text) !important;
  text-transform: lowercase;
  border: var(--nav-border-width) solid var(--nav-border);
  border-radius: var(--nav-radius);
  box-shadow: var(--nav-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

/* Hover glow + lift with drop-shadow */
.nav-button:hover {
  transform: translateY(-1px);
  box-shadow:
	0 2px 6px rgba(0, 0, 0, 0.22),
    0 0 10px var(--nav-glow-color),
    var(--nav-shadow);
  border-color: var(--nav-text);
}

/* Clicked (active) state */
.nav-button:active {
  box-shadow:
    0 0 6px var(--nav-glow-active),
    var(--nav-shadow);
}

/* Persistent selected state */
.nav-button.active {
  box-shadow:
    0 0 8px var(--nav-glow-selected),
    var(--nav-shadow);
  border-color: var(--nav-text);
  font-weight: var(--nav-font-weight-selected);
}

.nav-link.nav-button {
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight-default);
  letter-spacing: -0.25px;
}

.nav-link.nav-button.active {
  font-weight: var(--nav-font-weight-selected);
  letter-spacing: -0.35px;
  color: var(--nav-text-selected);
}

.nav-link.nav-button:hover {
  color: var(--nav-text-hover);
  text-shadow: 0 0 4px var(--nav-glow-color);
}

.nav-link.nav-button,
.nav-link.nav-button:hover,
.nav-link.nav-button:focus {
  text-decoration: none;
}


/***********************************************
 *  PARENT BUTTON GEOMETRY (top-level nav) !important;
 ***********************************************/
.navbar {
  padding: 0;
}

.navbar-nav {
  display: flex;
  width: 100%;
}

.nav-item {
  flex: 1; /* equal-width buttons */
}

.nav-link {
  padding: var(--nav-parent-padding-y) 0;
  border-radius: var(--nav-radius);
}

/* Parent stays glowing while dropdown is open */
.dropdown-toggle.show {
  box-shadow:
    0 0 10px var(--nav-glow-color),
    var(--nav-shadow);
  border-color: var(--nav-text);
}


/***********************************************
 *  DROPDOWN PANEL GEOMETRY
 ***********************************************/
.dropdown-menu {
  width: 100%; /* match parent button width */
  border: var(--nav-border-width) solid var(--nav-border);
  border-radius: var(--nav-radius);
  padding: 0;
  margin-top: 0; /* flush with parent button */
  background: var(--nav-bg);
}


/***********************************************
 *  CHILD BUTTON GEOMETRY (dropdown items)
 ***********************************************/
.dropdown-item {
  padding: var(--nav-child-padding-y) 0;
  border-bottom: var(--nav-border-width) solid var(--nav-border);
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: var(--nav-radius);
  color: var(--nav-text);
  background: var(--nav-bg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* centering */
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* centering | this is rule is redundant, as he rule above is covering the bases and doing so in a more comprehensive manner

.dropdown-item {
  text-align: center;
}

*/

/* Remove last divider | geometry exception */
.dropdown-item:last-child {
  border-bottom: none;
}

/* child button typography | underline removal */
.dropdown-item,
.dropdown-item:hover,
.dropdown-item:focus {
  text-decoration: none;
}

/* child button typography hover | color + text glow */
.dropdown-item:hover {
  color: var(--nav-text-hover);
  text-shadow: 0 0 4px var(--nav-glow-color);
}

/* Child button hover geometry | glow + border */
.dropdown-item:hover {
  box-shadow:
    0 0 10px var(--nav-glow-color),
    var(--nav-shadow);
  border-color: var(--nav-text);
}

.dropdown-item.active {
  border: 1px solid var(--nav-selected-border);
  background: var(--nav-selected-bg);
  color: var(--nav-selected-text);
  box-shadow: var(--nav-selected-glow);
  font-weight: 600;
}




/* ===== Main navbar| end ===== */



/* ===== this controls the global padding/spacing between the navigation, the content, and the footer | begin  ===== */

/* ===== this controls the global padding/spacing/gap between the rows/cards | the parameter for the variable is in the root | these are layout-level overrides ===== */

.row {
  row-gap: var(--grid-gap);
}

.home-grid {
  margin-bottom: var(--grid-gap);
}

/* =====

.home-grid {
  margin-bottom: 0;
}

===== */

.row.home-info-row {
  --bs-gutter-y: 0;
}

.page-extra-bottom {
  padding-bottom: var(--grid-gap);
}

/* this selector applies only when the class is on a .container | on container-level */
.container.page-extra-bottom {
  padding-bottom: var(--grid-gap) !important;
}



/* ===== Home Page | Begin ===== */


/* subtle backing shape behind each home page module | this ensures the card inside can stretch to fill the available vertical space */
.home-col {
  display: flex;
}

/* subtle backing shape behind each home page module | this replaces the .info-box | home card component */

.home-card,
.home-info-block {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.home-card {
  background: rgba(255, 250, 240, 0.05); /* subtle panel | warm parchment | lower = more transparent */
  backdrop-filter: blur(2px);
  padding: 1.25rem 1rem; /* was 1.75rem 1.5rem */
  border-radius: 8px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);

  /* equal-height behavior | this tells the card to grow to match the tallest sibling */
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  min-height: 100%;
}

.home-card img {
  display: block; 
  margin: 0 auto 0.75rem auto;  /* top right bottom left | bottom was 1rem */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* subtle lift */
  border-radius: 4px; /* optional, but helps soften the shadow */
  width: 182px;
  height: auto;
}

.home-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem; /* was 0.5rem */
  text-transform: none; /* matches your aesthetic */
}

.home-card p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  margin-bottom: 0.5rem; /* was 0.75rem */
}

.home-card .btn-link {
  font-family: var(--nav-font-family);
  font-weight: 600;
  padding: 0;
  margin-top: auto; /* only pushes the link, not all text */
}

/* subtle backing shape behind each home page module | this keeps the image, title, and the text at the top and the link pinned to the bottom */
.home-card p:last-child {
  margin-top: auto; /* pushes the link to the bottom */
}


/* this is the .home-card with a small modifer | this is what will be used to format the top block of copy that sits above and/or below the grid of modules... */


/* divider replacing the ASCII lines */
.home-divider {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 0.75rem auto 1rem auto;
}


/* this is the .home-card with a small modifer | this is what will be used to format the top block of copy that sits above and/or below the grid of modules... */

.home-info-wrapper {
  max-width: 650px; /* match your grid’s natural width */
  margin: 0 auto;
}


/* top info block typography */
.home-info-block h2 {
  font-size: 1.75rem;      /* matches menu section titles */
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.home-info-block h3 {
  font-size: 1.35rem;      /* matches menu item names */
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.home-info-block p {
  font-size: 1.15rem;      /* matches menu descriptive text */
  margin: 0.25rem 0;
  color: #333;
}

.home-info-large {
  font-size: 1.35rem;      /* quiet emphasis, not h1-heavy */
  font-weight: 600;
  line-height: 1.4;
}



/* ===== Home Page Typography System ===== */

/* Divider | this adds a full-width horizontal line it also adds vertiocal spacing above and below... */
.home-divider {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 0.75rem auto 1rem auto;
}

/* ===== Home Page | Module Title  (parallel to menu-section-alt2) */
.home-title {
  font-size: 1.6rem;      /* slightly softer than menu 1.5rem */
  font-weight: 600;
  color: #3f3f3f;         /* warm dark grey */
  margin: 0.25rem 0;
  text-transform: none;
}

/* ===== Home Page Module Title Accent (color emphasis) ===== */

.home-title-accent {     /* this is the color override of .home-title block */ 
  font-weight: 600;      /* semibold, same as .menu-name */   
  color: #ff8c00;        /* same orange accent as menu-name */
  margin: 0.25rem 0;     /* optional, matches home-title rhythm */
}

/* home-title-accent | Color variant */
.home-title-accent-alt1 { color: #e67600; }   /* more "burnt orange" */


/* Home Lead Text (parallel to menu-desc-alt3) */
.home-lead {              /* this is the lead paragraph geometry | the home-page equivalent of .menu-desc-alt3 */
  font-size: 1.25rem;     /* larger than menu descriptions */
  font-weight: 500;
  color: #555;
  margin: 0.25rem 0;
  line-height: 1.45;
}

/* Home Quiet Note (parallel to h7-italic) */
.home-note {
  font-size: 0.95rem;
  font-style: italic;
  color: #666;
  margin: 0.25rem 0;
}

/* home module copy/content */
.home-module-copy {
  font-weight: 400; /* normal */ /* mirrors .menu-desc */
  color: #000;   /* default color | black  */
}

/* home module copy/content | Color variants */ 
.home-module-copy-alt1 { color: #333; }   /* deep charcoal grey */
.home-module-copy-alt2 { color: #444; }   /* dark grey/Goshawk grey */
.home-module-copy-alt3 { color: #555; }   /* Medium-dark grey */

/* ===== Home Page Link Roles ===== */
/*
a.phone-link {
  color: #ff8c00;
  font-weight: 600;
  text-decoration: none;
  display: inline-block; /* Required for transform/translate to work 
  transition: all 0.2s ease-in-out;
}
*/

/* Fused Phone Link Styling */
a.phone-link {
  /* 1. Base Branding */
  color: #e67600 !important; /* Your 'burnt orange' base color */
  font-weight: 600;
  text-decoration: none !important;
	
  /* 2. Layout & Centering */
	
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 10px;
	
  /* 3. Transition */
  transition: all 0.2s ease-in-out;
}

/*
a.phone-link:hover {
  color: #e67600;
  text-decoration: none;
  transform: translateY(-2px); /* Matches the button lift 
  
  /* Adds the signature orange glow to the text itself
  text-shadow: 0 0 8px var(--nav-glow-color);
}

*/

/* The Hover 'Ignition'
a.phone-link:hover {
  transform: translateY(-2px);
  color: var(--nav-text-hover) !important;
  text-shadow: 0 0 10px var(--nav-glow-color);
}
 */

/* Hover State: Shifts to the lighter orange + Glow */
a.phone-link:hover {
  color: #ff8c00 !important; /* Shifts to the brighter orange on hover */
  transform: translateY(-2px);
  text-shadow: 0 0 10px var(--nav-glow-color);
}

a.phone-link:active {
  transform: translateY(0);
  text-shadow: 0 0 4px var(--nav-glow-active);
}

/*
.phone-icon {
  margin-right: 0.35rem;
  font-size: 0.9em; /* slightly smaller than the number
  vertical-align: middle;
}
*/

/* The Icon Specific Pop */
.phone-icon {
  display: flex;
  align-items: center;
  /* Use your 5px nudge here if the SVG sits too high */
  transform: translateY(2px); 
  transition: transform 0.2s ease;
}

/*
a.phone-link:hover .phone-icon {
  transform: translateY(2px) scale(1.2);
}
*/

a.phone-link:hover .phone-icon {
  transform: translateY(5px) scale(1.15);
}


/* ===== Home Module Button Links ===== */
.home-card .btn-link {
  color: #ff8c00 !important; /* Base orange */
  font-weight: 600;
  text-decoration: none !important; /* removes underline */
  padding-left: 0; /* optional: removes Bootstrap’s left padding */
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.home-card .btn-link:hover {
  color: #e67600 !important; /* Burnt orange shift */
  text-decoration: none;
  /* Soft glow that matches your branding */
  text-shadow: 0 0 8px var(--nav-glow-color);
}

/* The 'Arrow' specific logic */
.home-card .btn-link .koyo-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Slight 'spring' feel */
}

/* On hover, slide the arrow 4px to the right */
.home-card .btn-link:hover .koyo-arrow {
  transform: translateX(4px);
}


/* Google Reviews Badge | home page implementation */

/* Google Reviews Badge | this iteration targets a class 

.google-reviews-badge { 
	margin-top: 1.5rem; 
	text-align: center; 
}

*/

/* Google Reviews Badge | this iteration targets an ID */
/* Base badge styling */
#google-reviews-badge {
  text-align: center;
	/*
  margin-top: 1.5rem;
	*/
  /* 1. Tighten the gap: Reduced from 1.75rem to 1rem (16px) */
	/*
  margin-top: 1rem !important;
	*/
  margin-top: 0.75rem !important;
}

/* Card-specific refinement */
.home-card #google-reviews-badge {
  margin-top: 1.75rem; /* overrides base */
  /*
  padding-top: 1.25rem;
  */
  padding-top: 0.5rem;	
  /*
  border-top: 1px solid rgba(0,0,0,0.00);
  */
  /* Keep the border transparent unless you want a subtle separator */
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Reviews Badge Styling | shadow on hover | controlled via external Javascript\ */
/*
.google-reviews-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
*/

/* The Injected Card Animation */
.google-reviews-card {
  transition: all 0.25s ease-in-out;
  display: inline-block;
  border-radius: 8px; /* Matches your button aesthetic */
  background: transparent;
}

/* Interactive hover effect for the injected card | controlled via external JavaScript */
/*
.google-reviews-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
*/

/* Interactive hover with Orange Glow */
.google-reviews-card:hover {
  transform: translateY(-2px);
  /* Uses your nav tokens for perfect cohesion */
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.12), 
    0 0 10px var(--nav-glow-color) !important;
  
  /* If the badge has a border, we can highlight it too */
  border-color: var(--nav-border) !important;
}



/* ===== Home Page | End ===== */



/* ===== Menu Pages | Begin ===== */

.main-sushi {         
  --page-bottom-padding: 86px;   /* vertical spacing on bottom | new updates to body (min-height: 100vh) may have made thia override unnecessary */
}

.main-wine-and-spirits {         
  --page-bottom-padding: 422px;   /* vertical spacing on bottom | new updates to body (min-height: 100vh) may have made thia override unnecessary */
}

.menu-container,
.menu-container-top, 
.menu-container-bottom {
  max-width: 750px;
  margin: 0 auto;        /* centers the menu block */
  text-align: left;      /* aligns all text inside to the left */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.menu-container-top {     
  padding-top: 0rem;     /* vertical spacing */
  padding-bottom: 1rem;
}

.menu-container {
  padding-top: 1rem;     /* vertical spacing */
  padding-bottom: 1rem;
}

.menu-container-bottom {
  padding-top: 1rem;     /* vertical spacing */
  /* this "padding-bottom: 0rem;" seems to be overriding the .page-extra-bottom rule... I left the padding-top aspect alone as I don't want that disrupted... if the page-extra-bottom rule is on the container-level, this line must be greyed ou to avoid cionflict... in teh case of applying the .page-extra-bottom rule on the section-level then this must be reinstated otehrwise there may be another gap to contend with */
  padding-bottom: 0rem;
}

h3.menu-section,
h3.menu-section-alt1,
h3.menu-section-alt2,
h3.menu-section-alt3 {
  display: inline;
  font-size: 1.5rem;  /* optional: tighter than Bootstrap's default */
  font-weight: 600;   /* semibold, clean, readable */
  margin: 0;
}

/* menu-section | Color variants */ 
.menu-section-alt1 { color: #333; }   /* deep charcoal grey */
.menu-section-alt2 { color: #444; }   /* dark grey/Goshawk grey */
.menu-section-alt3 { color: #555; }   /* Medium-dark grey */

/* menu item names */
.menu-name {
  font-weight: 600; /* semibold, clean, readable */
  color: #ff8c00;   /* closely matches previous live site iteration */

}

/* menu-name | Color variant */
.menu-name-alt1 { color: #e67600; }   /* more "burnt orange" */

/* menu descriptions */
.menu-desc {
  font-weight: 400; /* normal */
  color: #000;   /* default color | black  */
}

/* menu-desc | Color variants */ 
.menu-desc-alt1 { color: #333; }   /* deep charcoal grey */
.menu-desc-alt2 { color: #444; }   /* dark grey/Goshawk grey */
.menu-desc-alt3 { color: #555; }   /* Medium-dark grey */


/* ===== Menu Pages | End ===== */



/* ===== Photos Page | Begin ===== */

/* Thumbnail hover behavior */
.gallery-thumb {
  transition: transform 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}

.gallery-thumb:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Centered + cropped thumbnails (Muse-style landscape) */
.gallery-item {
  position: relative;
  overflow: hidden;

  /* Match Muse thumbnail ratio: 220px × 165px = 4:3 */
  aspect-ratio: 4 / 3;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image fills the box, centered, no warping */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fills the box without distortion */
  object-position: center; /* centers the crop */
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Muse‑style subtle overlay */
.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.25); /* soft dark wash */
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Hover zoom + fade */
.gallery-item:hover img {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Overlay fade‑in on hover */
.gallery-item:hover .overlay {
  opacity: 1;
}

/* ===== Photos Page | End ===== */



/* ===== Location Page | Begin ===== */

/* ==========================================
   LOCATION PAGE & MAP STYLES
   ========================================== */

/* General page background and typography */
.location-page {
  background-color: #f9f9f9;
}

.location-page h3 {
  color: #333;
  margin-bottom: 20px;
}

.location-page .lead {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.8;
}

/* Theme-colored links */
.location-page a {
  color: #ff8c00;
  text-decoration: none;
  transition: color 0.3s ease;
}

.location-page a:hover {
  color: #cc7000;
}

/* ==========================================
   KOYO LOCATION MAP STYLES
   ========================================== */

/* 1. Row‑level spacing */
/* controls the external spacing between the map block and the card below it. | this governs the row-level layout */
.location-map-row {
  margin-bottom: var(--grid-gap);
}

/* 2. Block wrapper (map frame) */
/* map.wrapper controls the internal geometry of the map block (border, shadow, padding, background). | it is the next layer inwards */
/* 1. MAP WRAPPER 
   The "Frame" around the map. Handles border, shadow, and 
   prevents white-flashing by using a dark background.
*/
.map-wrapper {
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden; /* Clips map to the border radius */
  border-radius: 8px;
  background-color: #242f3e; /* Matches Google Dark Mode slate */
  position: relative;        /* Required for the "Pro" toggle placement | new component */
  padding-bottom: 0.5rem; /* or 0.75rem */ /* small internal breathing room */
}


/* 3. Map container */
/* 2. MAP CONTAINER 
   The actual div where the JS API renders the map.
*/
#map {
  width: 100%;
  height: 500px; /* Default desktop height */
  display: block;
  /*
  display: flex; /* Centers the "Loading" text */
  /* this part of the block was part of te previous implemntation - pre-toggle... may need to refer/revert back to some of this... TBD 	
  align-items: center;
  justify-content: center;
  position: relative;
  */
}

/* 4. Loading state */
/* Loading state text (visible only until map tiles load) */
#map::before {
  content: "Loading Map...";
  color: #999;
  font-family: sans-serif;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Ensures the Google Map canvas sits on top of the loading text */

/*

#map div { 
  z-index: 1; 
}
*/

/*
#map::before {
  z-index: 0;        this is accounted for in the block above ^^^ will crosscheck to see how this was handled pre-toggle
}

*/

#map .gm-style {
  position: relative;
  z-index: 1;
}

/* 3. TOGGLE BUTTON (Pro Implementation)
   Styled to look like a native Google Maps control.
   Note: No "top/left/absolute" positioning here; JS handles that. | this part is all new
*/
.map-control-btn {
  background-color: #fff;
  color: #565656;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  
  margin: 10px; /* Air around the button inside the map */
  padding: 0 12px;
  height: 40px;
  cursor: pointer;
  
  transition: background-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Ensure it's above the loading text */
}

.map-control-btn:hover {
  background-color: #f1f1f1;
  color: #000;
}


/* RESPONSIVE ADJUSTMENTS
   Shrinks the map height on smaller screens for better UX.
*/
@media (max-width: 768px) {
  #map {
    height: 350px; 
  }
}

@media (max-width: 480px) {
  #map {
    height: 300px;
  }
	.map-control-btn {
    height: 32px;
    font-size: 12px;
    margin: 5px;
  }
}


/* ==========================================
   LOCATION PAGE INFO BLOCK
   ========================================== */


/* Row wrapper for spacing and layout rhythm */
.location-info-row {
  margin-top: 40px; /* optional */
  margin-bottom: 40px; /* optional */
}

/* Wrapper for alignment and future layout tweaks */
.location-info-wrapper {
  /* reserved for future overrides */
  max-width: 650px; /* match your grid’s natural width */
  margin: 0 auto;
}

/* The card itself (inherits geometry from .home-card) */
.location-info-block {
  /* optional: location-specific padding, background, or accents */
}

/* Typography roles */
.location-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.location-title-accent {
  color: #ff8c00; /* parallel to home-title-accent but page-specific */
}

.location-lead {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.location-module-copy-alt2 {
  color: #555;
}

/* ==========================================
   LOCATION PAGE | DIRECTIONS BUTTON
   ========================================== */
/* here is the formatting for the "directions" button | located at bottom of info block | may be another block for google maps vs apple maps */

.koyo-directions-btn {
  background-color: transparent !important;
  color: #555 !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  border-radius: 6px;

  /* 1. Geometry & Width */
  display: inline-flex !important;
  align-items: center !important; 
  justify-content: center !important;
  
  /* Setting a min-width ensures both buttons are the same size */
  /* 220px is usually safe for these labels, adjust if needed | had it at 260px with the icons witin the buttons */
  /* 
  min-width: 260px !important; 
  */
  min-width: 260px !important;
  width: auto !important;
  
  margin: 8px auto !important; /* Proper spacing between buttons */
  padding: 0.5rem 1rem !important;

  /* 2. Typograph | Text & Vertical Alignment */
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  line-height: 1 !important; /* Forces text to sit in the vertical middle */
  gap: 12px;
  text-decoration: none !important;
}

/* 3. Animation Base */
.koyo-directions-btn {
  transition: all 0.2s ease-in-out;
}

/* Hover State: Lifting + Orange Glow */
.koyo-directions-btn:hover {
  transform: translateY(-2px);
  color: var(--nav-text-hover) !important;
  border-color: var(--nav-border) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1), 
    0 0 10px var(--nav-glow-color); /* Uses your existing nav variable! */
}

/* Clicked State */
.koyo-directions-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 6px var(--nav-glow-active);
}

.koyo-directions-btn .koyo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match icon height to text height for perfect centering */
  height: 1.1rem; 
  width: 1.1rem;
  flex-shrink: 0;
	
  /* MANUALLY NUDGE DOWN: This counters the 'lowercase' visual bias | original nudge 1.5px */
  transform: translateY(5px);
  transition: transform 0.2s ease;
}

  /* Make the icon pop a bit more on hover */
.koyo-directions-btn:hover .koyo-icon {
  transform: translateY(5px) scale(1.1);
}

.koyo-icon img,
.koyo-icon svg {
  /* This ensures the image fills the 1.1rem container and stays centered */
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}


/* ===== Location Page | End ===== */



/* ===== Hours Page | Begin ===== */

/* ==========================================
   HOURS PAGE INFO BLOCK
   ========================================== */

.main-hours {         
  --page-bottom-padding: 40px;   /* vertical spacing on bottom */
}

/* internal spacing inside rows (same as Home) */
.row {
  row-gap: var(--grid-gap);
}

/* Row wrapper for spacing and layout rhythm */
/* external spacing between the two Hours cards */
.hours-info-row {
  margin-top: 0;
  margin-bottom: var(--grid-gap);   /* this controls card-to-card spacing */
}

/* ensure the second card doesn't add extra top margin */
.main-hours .home-info-row {
  margin-top: 0;               /* this controls the gap between the bottom of the first card and the top of the second wihin a shared conatiner | card-to-card spacing */
}



/* Wrapper for alignment and future layout tweaks */
.hours-info-wrapper {
  /* reserved for future overrides */
}

/* The card itself (inherits geometry from .home-card) */
.hours-info-block {
  /* optional: hours-specific padding, background, or accents */
	
  /* this margin pertains to the card, itself, not what is happening within the card */
  margin-bottom: 0rem; /* reducing this from 1.5rem, as this may be that extra space that won't let the gap between cards behave as intended */ 
  line-height: 1.4;
  font-size: 1rem;
  max-width: 650px; /* or whatever .home-card uses */
  margin-left: auto;
  margin-right: auto;
}

.hours-info-block p strong.day {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--koyo-orange);
}

.hours-info-block p strong.service {
  font-weight: 700;
  color: var(--koyo-charcoal);
}

/* Typography roles */
.hours-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.hours-title-accent {
  color: #ff8c00; /* parallel accent color */
}

.hours-lead {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.hours-module-copy-alt2 {
  color: #555;
}

/* Optional: hours table styling */
.hours-table {
  width: 100%;
  margin-top: 20px;
  font-size: 1.1rem;
  color: #444;
}

.hours-table td {
  padding: 6px 0;
}

/* as of now, this is redundant... so greying out... will leave here until dust settles...
.home-hours-block p {
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.home-hours-block p br:first-of-type + * {
  /* optional: spacing tuning */
/*
}
/*
.home-hours-block p {
  font-size: 1rem;
}

.home-hours-block p strong.day {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--koyo-orange);
}

.home-hours-block p strong.service {
  font-weight: 700;
  color: var(--koyo-charcoal);
}

*/




/* ===== Hours Page | End ===== */



/* ===== Contact Page | Begin ===== */

/* ==========================================
   CONTACT PAGE INFO BLOCK
   ========================================== */

/* Row wrapper for spacing and layout rhythm */
.contact-info-row {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Wrapper for alignment and future layout tweaks */
.contact-info-wrapper {
  /* reserved for future overrides */
}

/* The card itself (inherits geometry from .home-card) */
.contact-info-block {
  /* optional: contact-specific padding, background, or accents */
}

/* Typography roles */
.contact-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact-title-accent {
  color: #ff8c00; /* parallel accent color */
}

.contact-lead {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.contact-module-copy-alt2 {
  color: #555;
}

/* ===== Contatc Page | End ===== */


/* 1. Reset / Global Styles */
/* 2. Nav Styles */
/* 3. Button Styles (.koyo-directions-btn base styles) */
/* 4. Home/Location Page Content */

/* ==========================================
   RESPONSIVE OVERRIDES (The Last Section)
   ========================================== */

/* RESPONSIVE ADJUSTMENTS
   Shrinks the "directions" button on smaller screens for better UX. If i was only showing up on the location page, I would place this block at the bottom of the Location page section... however, since it will appear on a few pages, this is a good place to ensure the cascade isn't missed on one or more pages
*/
/* Universal Safety Check */

/* Media Query for small mobile devices */
@media (max-width: 320px) {
  .koyo-directions-btn {
    width: 95% !important; /* Switch from fixed 260px to fluid width */
    min-width: auto !important;
    font-size: 0.85rem; /* Slightly smaller text for cramped space */
    gap: 8px;
	  
   /*  an alt iteration of the rules were listed as these two that are greyed out...
	width: 240px !important; /* Shave off 20px for tiny screens */
	  
   /*  
    font-size: 0.9rem;
	*/
  }
	
   .phone-link {
    font-size: 1.1rem !important;
  }
}


/* ===== General Font Customization | Begin ===== */

.h7 {
  font-size: 0.9rem;   /* ~14.4px */
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

.h7-italic {
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.h7-italic-bold {
  font-size: 0.9rem;
  font-weight: 600;
  font-style: italic;
  margin: 0;
}

.h7,
.h7-italic,
.h7-italic-bold{
  display: inline;
  margin-left: 0.5rem;
}

.h8,
.h8-italic {
  display: inline;
  margin-left: 0.5rem;
}

.h8 {
  font-size: 0.8rem;   /* ~12.8px */
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

.h8-italic {
  font-size: 0.8rem;
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.h8-italic-bold {
  font-size: 0.8rem;
  font-weight: 600;
  font-style: italic;
  margin: 0;
}

.h8,
.h8-italic,
.h8-italic-bold{
  display: inline;
  margin-left: 0.5rem;
}

.h9 {
  font-size: 0.7rem;   /* ~11.2px */
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

.h9-italic {
  font-size: 0.7rem;
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

.h9-italic-bold {
  font-size: 0.7rem;
  font-weight: 600;
  font-style: italic;
  margin: 0;
}

.h9,
.h9-italic,
.h9-italic-bold{
  display: inline;
  margin-left: 0.5rem;
}

/* ===== General Font Customization | End ===== */










/* ========================================= */
/* GLOBAL LAYOUT */
/* ========================================= */

/* ========================================= */
/* TYPOGRAPHY */
/* ========================================= */

/* ========================================= */
/* COMPONENTS */
/* ========================================= */

/* ========================================= */
/* PAGE: SUSHI MENU */
/* ========================================= */

/* ========================================= */
/* PAGE: GALLERY */
/* ========================================= */