:root {

    /* Global Variable Colors */
    --col-nn-brown: hsl(18, 100%, 13%); /* #421400 */ 
    --col-nn-green: hsl(170, 100%, 32%);  /* #00A389 */
    --col-nn-red: hsl(6, 69%, 37%); /* #A02A1D */
    --col-nn-beige: hsl(40, 33%, 95%); /*  #F6F3ED */
    --col-nn-olive: hsl(52, 27%, 22%); /* #474329 */
    --col-nn-tan: hsl(38, 44%, 68%); /* #D2B88B */
    --col-nn-text: hsl(18, 36%, 21%); /* #492E22 */
    --col-nn-yellow: hsl(53, 100%, 45%); /* #E3C800 */
    --col-nn-sand: hsl(44.2, 32%, 88%); /* #EBE6DB */

    /* Body Text Size Scale(https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=500&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.25&steps=xs%2Cs%2Cm%2Cl%2Cxl&baseStep=m&prefix=text&useContainerWidth=undefined&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Averia+Libre&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280) */
    --text-xs: clamp(0.79rem, -0.14vi + 0.84rem, 0.72rem);
    --text-s: clamp(0.89rem, 0.02vi + 0.88rem, 0.9rem);
    --text-m: clamp(1rem, 0.26vi + 0.92rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.58vi + 0.94rem, 1.41rem);
    --text-xl: clamp(1.27rem, 1.01vi + 0.95rem, 1.76rem);

    /* [Heading Text Size Scale (https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=500&minRatio=1.2&maxFontSize=22&maxWidth=1280&maxRatio=1.414&steps=6%2C5%2C4%2C3%2C2%2C1%2Ctitle&baseStep=4&prefix=h&useContainerWidth=undefined&includeFallbacks=undefined&useRems=true&remValue=16&decimals=2&previewFont=Roboto&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280) */
    --h6: clamp(0.87rem, -0.37vi + 0.98rem, 0.69rem);
    --h5: clamp(1.04rem, -0.14vi + 1.09rem, 0.97rem);
    --h4: clamp(1.25rem, 0.26vi + 1.17rem, 1.38rem);
    --h3: clamp(1.5rem, 0.91vi + 1.22rem, 1.94rem);
    --h2: clamp(1.8rem, 1.95vi + 1.19rem, 2.75rem);
    --h1: clamp(2.16rem, 3.54vi + 1.05rem, 3.89rem);
    --h-title: clamp(2.59rem, 5.96vi + 0.73rem, 5.5rem);

    
    /* Paddings and Margins */
    /* Define spacing using clamp() for fluidity */
  /* clamp(MIN, PREFERRED (often calc(fixed + vw)), MAX) */

  --space-none: 0;
  --space-xxs: clamp(3px, calc(2px + 0.25vw), 4px);   /* Scales minimally */
  --space-xs: clamp(6px, calc(4px + 0.5vw), 8px);    /* Scales between 6px and 8px */
  --space-s: clamp(8px, calc(6px + 0.75vw), 12px);   /* Scales between 8px and 12px */
  --space-m: clamp(12px, calc(8px + 1.25vw), 20px);  /* Scales between 12px and 20px */
  --space-l: clamp(20px, calc(10px + 2.5vw), 40px);  /* Scales between 20px and 40px */
  --space-xl: clamp(32px, calc(18px + 3vw), 60px);   /* Scales between 32px and 60px */
  --space-xxl: clamp(44px, calc(24px + 4vw), 80px);  /* Scales between 44px and 80px */
  --space-xxxl: clamp(60px, calc(28px + 4.5vw), 100px); /* Scales between 60px and 100px */

  /* Explanation for --space-l: clamp(20px, calc(10px + 2.5vw), 40px);
     - Minimum padding/margin will be 20px.
     - Maximum padding/margin will be 40px.
     - In between, it calculates based on viewport width (vw).
       - e.g., at 1200px wide (1200 * 2.5 / 100 = 30): calc(10px + 30px) = 40px (hits max)
       - e.g., at 800px wide (800 * 2.5 / 100 = 20): calc(10px + 20px) = 30px (fluid value)
       - e.g., at 360px wide (360 * 2.5 / 100 = 9): calc(10px + 9px) = 19px (hits min, so uses 20px)
  */
}


/* Text Wrap */
h1, h2, h3, h4 {
    text-wrap: balance;
    font-family: veneer-two;
}

p {
    /*text-wrap: pretty; */
    font-family: proxima-soft-condensed;
    font-size: var(--text-m);
    max-width: 65ch;
}

h1 {
    font-size: var(--h1);
}
h2 {
    font-size: var(--h2);
}
h3 {
    font-size: var(--h3);
}
h4 {
    font-size: var(--h4);
}

.icon-text {
    font-size: var(--text-s);
    text-align: center;
    font-family: proxima-soft-condensed;
    font-weight: bold;
    color: var(--col-nn-beige);
    padding-top:0.5em;
    text-transform: uppercase;
    
}

.icon-menu {
    height: 50px;
    width: 50px;
    border-radius: 8px;
    background-color: var(--col-nn-beige);
    transition: background var(--background-transition,.3s),border var(--border-transition,.3s),box-shadow var(--border-transition,.3s),transform var(--e-con-transform-transition-duration,.4s);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 0px;
}
.icon-menu:hover {
    background-color: var(--col-nn-tan);
    color: var(--col-nn-tan);
}

/* Box Sizing */
box-sizing: border-box;
 
/* ==========================================================================
   Spacing Utility Classes 
   We'll use p for padding, m for margin, 
   and directional indicators (t, r, b, l, x, y).
   ========================================================================== */

/* --- Padding --- */

/* All Sides */
.u-p-none { padding: var(--space-none) !important; }
.u-p-xxs { padding: var(--space-xxs) !important; }
.u-p-xs { padding: var(--space-xs) !important; }
.u-p-s { padding: var(--space-s) !important; }
.u-p-m { padding: var(--space-m) !important; } /* Example: .u-p-m -> padding: 20px */
.u-p-l { padding: var(--space-l) !important; } /* Example: .u-p-l -> padding: 40px */
.u-p-xl { padding: var(--space-xl) !important; }
.u-p-xxl { padding: var(--space-xxl) !important; }
.u-p-xxxl { padding: var(--space-xxxl) !important; }

/* Vertical (Top & Bottom) */
.u-py-none { padding-top: var(--space-none) !important; padding-bottom: var(--space-none) !important; }
.u-py-xxs { padding-top: var(--space-xxs) !important; padding-bottom: var(--space-xxs) !important; }
.u-py-xs { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.u-py-s { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; }
.u-py-m { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; }
.u-py-l { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; }
.u-py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.u-py-xxl { padding-top: var(--space-xxl) !important; padding-bottom: var(--space-xxl) !important; }
.u-py-xxxl { padding-top: var(--space-xxxl) !important; padding-bottom: var(--space-xxxl) !important; }

/* Horizontal (Left & Right) */
.u-px-none { padding-left: var(--space-none) !important; padding-right: var(--space-none) !important; }
.u-px-xxs { padding-left: var(--space-xxs) !important; padding-right: var(--space-xxs) !important; }
.u-px-xs { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.u-px-s { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; }
.u-px-m { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; }
.u-px-l { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; }
.u-px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.u-px-xxl { padding-left: var(--space-xxl) !important; padding-right: var(--space-xxl) !important; }
.u-px-xxxl { padding-left: var(--space-xxxl) !important; padding-right: var(--space-xxxl) !important; }

/* Top */
.u-pt-none { padding-top: var(--space-none) !important; }
.u-pt-xxs { padding-top: var(--space-xxs) !important; }
.u-pt-xs { padding-top: var(--space-xs) !important; }
.u-pt-s { padding-top: var(--space-s) !important; }
.u-pt-m { padding-top: var(--space-m) !important; }
.u-pt-l { padding-top: var(--space-l) !important; }
.u-pt-xl { padding-top: var(--space-xl) !important; }
.u-pt-xxl { padding-top: var(--space-xxl) !important; }
.u-pt-xxxl { padding-top: var(--space-xxxl) !important; }

/* Right */
.u-pr-none { padding-right: var(--space-none) !important; }
.u-pr-xxs { padding-right: var(--space-xxs) !important; }
.u-pr-xs { padding-right: var(--space-xs) !important; }
.u-pr-s { padding-right: var(--space-s) !important; }
.u-pr-m { padding-right: var(--space-m) !important; }
.u-pr-l { padding-right: var(--space-l) !important; }
.u-pr-xl { padding-right: var(--space-xl) !important; }
.u-pr-xxl { padding-right: var(--space-xxl) !important; }
.u-pr-xxxl { padding-right: var(--space-xxxl) !important; }

/* Bottom */
.u-pb-none { padding-bottom: var(--space-none) !important; }
.u-pb-xxs { padding-bottom: var(--space-xxs) !important; }
.u-pb-xs { padding-bottom: var(--space-xs) !important; }
.u-pb-s { padding-bottom: var(--space-s) !important; }
.u-pb-m { padding-bottom: var(--space-m) !important; }
.u-pb-l { padding-bottom: var(--space-l) !important; }
.u-pb-xl { padding-bottom: var(--space-xl) !important; }
.u-pb-xxl { padding-bottom: var(--space-xxl) !important; }
.u-pb-xxxl { padding-bottom: var(--space-xxxl) !important; }

/* Left */
.u-pl-none { padding-left: var(--space-none) !important; }
.u-pl-xxs { padding-left: var(--space-xxs) !important; }
.u-pl-xs { padding-left: var(--space-xs) !important; }
.u-pl-s { padding-left: var(--space-s) !important; }
.u-pl-m { padding-left: var(--space-m) !important; }
.u-pl-l { padding-left: var(--space-l) !important; }
.u-pl-xl { padding-left: var(--space-xl) !important; }
.u-pl-xxl { padding-left: var(--space-xxl) !important; }
.u-pl-xxxl { padding-left: var(--space-xxxl) !important; }


/* --- Margin --- */

/* All Sides */
.u-m-none { margin: var(--space-none) !important; }
.u-m-xxs { margin: var(--space-xxs) !important; }
.u-m-xs { margin: var(--space-xs) !important; }
.u-m-s { margin: var(--space-s) !important; }
.u-m-m { margin: var(--space-m) !important; } /* Example: .u-m-m -> margin: 20px */
.u-m-l { margin: var(--space-l) !important; } /* Example: .u-m-l -> margin: 40px */
.u-m-xl { margin: var(--space-xl) !important; }
.u-m-xxl { margin: var(--space-xxl) !important; }
.u-m-xxxl { margin: var(--space-xxxl) !important; }
.u-m-center {margin: 0px auto!important; }

/* Vertical (Top & Bottom) */
.u-my-none { margin-top: var(--space-none) !important; margin-bottom: var(--space-none) !important; }
.u-my-xxs { margin-top: var(--space-xxs) !important; margin-bottom: var(--space-xxs) !important; }
.u-my-xs { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.u-my-s { margin-top: var(--space-s) !important; margin-bottom: var(--space-s) !important; }
.u-my-m { margin-top: var(--space-m) !important; margin-bottom: var(--space-m) !important; }
.u-my-l { margin-top: var(--space-l) !important; margin-bottom: var(--space-l) !important; }
.u-my-xl { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.u-my-xxl { margin-top: var(--space-xxl) !important; margin-bottom: var(--space-xxl) !important; }
.u-my-xxxl { margin-top: var(--space-xxxl) !important; margin-bottom: var(--space-xxxl) !important; }

/* Horizontal (Left & Right) */
.u-mx-none { margin-left: var(--space-none) !important; margin-right: var(--space-none) !important; }
.u-mx-xxs { margin-left: var(--space-xxs) !important; margin-right: var(--space-xxs) !important; }
.u-mx-xs { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.u-mx-s { margin-left: var(--space-s) !important; margin-right: var(--space-s) !important; }
.u-mx-m { margin-left: var(--space-m) !important; margin-right: var(--space-m) !important; }
.u-mx-l { margin-left: var(--space-l) !important; margin-right: var(--space-l) !important; }
.u-mx-xl { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.u-mx-xxl { margin-left: var(--space-xxl) !important; margin-right: var(--space-xxl) !important; }
.u-mx-xxxl { margin-left: var(--space-xxxl) !important; margin-right: var(--space-xxxl) !important; }

/* Top */
.u-mt-none { margin-top: var(--space-none) !important; }
.u-mt-xxs { margin-top: var(--space-xxs) !important; }
.u-mt-xs { margin-top: var(--space-xs) !important; }
.u-mt-s { margin-top: var(--space-s) !important; }
.u-mt-m { margin-top: var(--space-m) !important; }
.u-mt-l { margin-top: var(--space-l) !important; }
.u-mt-xl { margin-top: var(--space-xl) !important; }
.u-mt-xxl { margin-top: var(--space-xxl) !important; }
.u-mt-xxxl { margin-top: var(--space-xxxl) !important; }

/* Right */
.u-mr-none { margin-right: var(--space-none) !important; }
.u-mr-xxs { margin-right: var(--space-xxs) !important; }
.u-mr-xs { margin-right: var(--space-xs) !important; }
.u-mr-s { margin-right: var(--space-s) !important; }
.u-mr-m { margin-right: var(--space-m) !important; }
.u-mr-l { margin-right: var(--space-l) !important; }
.u-mr-xl { margin-right: var(--space-xl) !important; }
.u-mr-xxl { margin-right: var(--space-xxl) !important; }
.u-mr-xxxl { margin-right: var(--space-xxxl) !important; }

/* Bottom */
.u-mb-none { margin-bottom: var(--space-none) !important; }
.u-mb-xxs { margin-bottom: var(--space-xxs) !important; }
.u-mb-xs { margin-bottom: var(--space-xs) !important; }
.u-mb-s { margin-bottom: var(--space-s) !important; }
.u-mb-m { margin-bottom: var(--space-m) !important; }
.u-mb-l { margin-bottom: var(--space-l) !important; }
.u-mb-xl { margin-bottom: var(--space-xl) !important; }
.u-mb-xxl { margin-bottom: var(--space-xxl) !important; }
.u-mb-xxxl { margin-bottom: var(--space-xxxl) !important; }

/* Left */
.u-ml-none { margin-left: var(--space-none) !important; }
.u-ml-xxs { margin-left: var(--space-xxs) !important; }
.u-ml-xs { margin-left: var(--space-xs) !important; }
.u-ml-s { margin-left: var(--space-s) !important; }
.u-ml-m { margin-left: var(--space-m) !important; }
.u-ml-l { margin-left: var(--space-l) !important; }
.u-ml-xl { margin-left: var(--space-xl) !important; }
.u-ml-xxl { margin-left: var(--space-xxl) !important; }
.u-ml-xxxl { margin-left: var(--space-xxxl) !important; }

/* Insert image into any text */
.image-logo {
   display: inline-block;
    background-image: url("../2020/02/NamNam-logo-website-nn-beige.svg.html");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}
.image-pho {
   display: inline-block;
    background-image: url("../Pho-Vietnamese-P5-Pho-Australian-Beef-Combination.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}
.image-banhmi {
   display: inline-block;
    background-image: url("../Sauteed-Lemongrass-Pork-Cream-Cheese.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}

.image-noodles {
   display: inline-block;
    background-image: url("../Dry-Spicy-Minced-Pork-Noodle-Onsen-Egg-Pig-Trotter-600px.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}
.image-smallplates {
   display: inline-block;
    background-image: url("../Crispy-chicken-bites-sriracha-mayonnaise.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 2em;
    height: 2em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}
.image-desserts {
   display: inline-block;
    background-image: url("../Warm-coconut-milk-pudding-of-root-fruits-tapioca-1.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 2em;
    height: 2em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}
.image-beverages {
   display: inline-block;
    background-image: url("../Beverage-OB2-%E2%80%93-Lemongrass-Ginger-Iced-Tea.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 2em;
    height: 2em;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
}

/* Global Hyperlinks CSS */

/* .menu-link a  {
    color:#F6F3ED!important;
} */
.menu-link a  {
    color:var(--col-nn-beige)!important;

    &:hover {
    background-color: var(--col-nn-tan)!important;
    }
}

.inner-link {
	color:var(--col-nn-brown)!important;
	    transition: box-shadow .4s ease-out;
    box-shadow: inset 0 -3px 0 0 rgba(73,46,34,0.3)!important;
}

.inner-link:hover {
	box-shadow: inset 0 -40px 0 0 rgba(73,46,34,0.3)!important;
}


.inner-link-light {
    color: var(--col-nn-beige )!important;
}
.inner-link-light a { 
	color: var(--col-nn-beige )!important;
    background-color: transparent;
	box-shadow: rgba(225, 225, 225, 0.7) 0px -2px 0px 0px inset;
	cursor: pointer;
	display: inline;
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.4s ease-out 0s;
}

.inner-link-light:active a  { 
	color: varvar(--col-nn-green);
}

.inner-link-light a:hover { 
	box-shadow: rgba(225, 225, 225, 0.5) 0px -25px 0px 0px inset !important;
}




/* Opens New Window Icon 

a[target="_blank"]:not(.no-open-new-window-icon)::after {
  content: url("../open-new-window.webp");
  display: inline-block;
  max-width: 1em; 
  max-height: 1em; 
  margin-left: 0.5em; 
	margin-top:-1.1em;
  vertical-align: middle; 
 }
*/


/* Default Content Wraper style (for desktop) */
.content-wrapper {
    display: flex;
    flex-direction: column;
    padding: var(--space-l) !important; /* p-s3 on desktop */
}

/* Media query for smaller screens (mobile) */
@media (max-width: 767px) { /* Adjust the breakpoint to be one pixel less than your desktop breakpoint */
  .content-wrapper {
    padding: var(--space-l); /* p-s0 on mobile */
  }
}

.bg-nn-brown {
    background-color: var(--col-nn-brown)!important;
}
.bg-nn-red {
    background-color: var(--col-nn-red)!important;
}
.bg-nn-beige {
    background-color: var(--col-nn-beige)!important;
}
.bg-text {
    background-color: var(--col-nn-text)!important;
}
.bg-nn-green {
    background-color: var(--col-nn-green)!important;
}
.bg-nn-olive {
    background-color: var(--col-nn-olive)!important;
}
.bg-nn-tan {
    background-color: var(--col-nn-tan)!important;
}
.bg-nn-yellow {
    background-color: var(--col-nn-yellow)!important;
}
.bg-nn-sand {
    background-color: var(--col-nn-sand)!important;
}