input,
textarea,
select,
keygen,
button {
    font-family: inherit;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

h1, h2 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--desktop-title-size);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-primary-light);
}

h3, h4 {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--desktop-subtitle-size);
    letter-spacing: var(--letter-spacing-default);
    color: var(--color-primary-light);
}

p {
    font-size: var(--desktop-paragraph-size);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-default);
    color: var(--color-secondary);
    font-family: var(--font-primary);
    margin: 0;
}

/* anchor styling  */
a {
  text-decoration: none;
  color: white;
  transition: opacity 0.5s ease;
}

.active {
  text-decoration: underline;
}

/* Base contaniner style */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    width: 100%;
    position: relative;
}

.container--full-width {
    max-width: none;
    width: 100vw;
}

/* Base grid and flex layout */
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

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

/* image container */
.image-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* base button */
body .btn {
    display: flex;
    justify-content: center;
    align-items: stretch;
    font-family: var(--font-secondary), var(--font-primary),  serif; 
    /* font-size: var(--desktop-paragraph-size); */
    letter-spacing: 0.1em;
    border-radius: var(--border-radius, 50px);
    border: 1px solid;
    padding: 5px 20px;
    text-decoration: none;
    transition: all var(--transition-default, 0.5s);
    cursor: pointer;
    height: 38px;
    width: 150px;
    background-color: transparent;
    white-space: nowrap;
    text-align: center;
}

/* Primary button: Bright to Dark Green*/
.btn--primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

.btn--primary:hover {
    background-color: var(--color-primary, #144738);
    color: var(--color-text-light, #fff);
    border-color: var(--color-primary, #144738);
}

/* Secondary button: Dark Green to Bright */
.btn.btn--secondary {
    background-color: var(--color-primary, #144738);
    color: var(--color-text-light, #fff);
}

.btn.btn--secondary:hover {
    background-color: white;
    color: var(--color-primary, #144738);
    border-color: var(--color-primary, #144738);
}

.dark-green-washi .btn--secondary {
    border-color:  white;
}

.btn--center {
    align-self: center;
    justify-self: center;
    margin: auto;
    /* margin-top: 10px; */
    margin: 4em auto;
}

.hide--on--desktop {
    display: none !important;
}

/* Restaurant theme */
.theme--restaurant {
    --color-primary: var(--color-restaurant);
    --color-primary-light: var(--color-restaurant);
    font-family:  var(--font-secondary), var(--font-primary), serif;
}

.theme--restaurant h1,
.theme--restaurant h2,
.theme--restaurant h3 {
    color: var(--color-restaurant);
}

.theme--restaurant .btn--primary {
    background-color: var(--color-restaurant);
    border-color: var(--color-restaurant);
}

.theme--restaurant .btn--outline {
    color: var(--color-restaurant);
    border-color: var(--color-restaurant);
}

.theme--restaurant .btn--outline:hover {
    background-color: var(--color-restaurant);
}

/* GLOBAL WASHI CAPABILITIES: simply add (colour-identifier)-washi to class of element */
.dark-green-washi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  /* Pull left edge to viewport edge */
  margin-right: -50vw;
  /* Pull right edge to viewport edge  */
  /* width: 100%; */
  height: 100%;
  background-image: url('../images/Green\ Washi\ for\ Senshin.webp');
  /* background-size: contain; */
  z-index: -1;
}

.light-green-washi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  /* Pull left edge to viewport edge */
  margin-right: -50vw;
  /* Pull right edge to viewport edge */
  width: 100vw;
  height: 100%;
  background-image: url('../images/Light\ green\ Washi\ for\ Senshin.webp');
  background-size: contain;
  z-index: -1;
}

.gray-washi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  /* Pull left edge to viewport edge */
  margin-right: -50vw;
  /* Pull right edge to viewport edge */
  width: 100vw;
  height: 100%;
  background-image: url('../images/beige\ washi\ 3.webp');
  background-size: contain;
  z-index: -1;
}

/* Responsive desige */
@media (max-width: 1024px) {
    :root {
        --desktop-title-size: var(--tablet-title-size);
        --desktop-subtitle-size: var(--tablet-subtitle-size);
        --desktop-paragraph-size: var(--tablet-font-size);
    }
    
    .container {
        padding: 50px var(--spacing-md);
    }
    .hide--on--desktop {
        display: block !important;
    }
}

@media (max-width: 768px) {
    :root {
        --desktop-title-size: var(--mobile-title-size);
        --desktop-subtitle-size: var(--mobile-subtitle-size);
        --desktop-paragraph-size: var(--mobile-font-size);
    }
    
    .container {
        padding: 10vw 4vw;
        width: 100vw;
    }
    .btn--primary--reserve{
        padding: 3vw 8vw;
        width: auto;
        font-size: 2.5vh;
    }
    .grid-2col {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .btn {
        min-width: 120px;
        height: 35px;
        font-size: var(--mobile-subtitle-size);
    }

    .mobile-btn--center {
        align-self: center;
        justify-self: center;
        margin: 10px auto;
    }

}