/* Sub-theme specific styling that overrides the base bon theme. */

/* Fonts: Lora (headings) + Inter (body/UI).
   Brandbook alternatives, swap together with customFonts in theme-variables.js:
   @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..700&family=Source+Sans+3:ital,wght@0,400..700;1,400..700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500..700&family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap');

/* Brand colors without a token of their own in the base theme. */
:root {
  --color-accent: #F1B194;
  --color-sand: #E8D2AE;
  --color-highlight: #F4B942;
}

html{
  font-family: var(--font-sans, Inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Main menu item styles */
@media (min-width: 1024px){
  .main-menu li a{
    font-size: 1rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-primary);
  }
  .main-menu li a:hover{
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}
.main-menu li a {
  text-decoration-color: var(--color-accent);
}

/* Header menu item styles: small and quiet above the main menu */
@media (min-width: 1024px){
  .header-menu li a{
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }
  .header-menu li a:hover{
    color: var(--color-primary);
    text-decoration-line: underline;
  }
}

/* Desktop search on a white bar. The search box partial is made for a colored
   bar (white text and icon); the ids win from its utility classes. */
#search-toggle{
  color: var(--color-primary);
}
#search-toggle:hover{
  color: var(--color-primary-darker);
}

#search-input{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

#search-input::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

#search-input::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

/* Open, the field lies over the main menu: opaque from the first frame, not
   only once it has focus. */
#search-container.w-80 #search-input{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

/* Focus ring in the brand color, like the mobile search input. */
#search-container.w-80 #search-input:focus{
  border-color: var(--color-primary);
  --tw-ring-color: var(--color-primary);
}

/* Headers — font-family handled by base via --font-display */
h1, h2, h3, h4{
  color: var(--color-primary);
}

/* Primary is a dark green, so headings on a white-text panel (dark, primary
   or secondary section backgrounds) follow the panel's text color. */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4{
  color: inherit;
}