/* The Flavor School: site-wide styles.
   Most layout lives inline in the page files (copied from the design canvas).
   This file holds the page basics plus the adjustments for small screens. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FBF5EC;
  color: #4A2C21;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
}
img { max-width: 100%; }
a { color: #1E4D5C; }
a:hover { color: #9C2257; }
a[style*="background: #9C2257"]:hover { background: #7E1B46 !important; color: #FFFFFF !important; }
a[style*="border: 2px solid #1E4D5C"]:hover { background: #1E4D5C !important; color: #FFFFFF !important; }
a[style*="border: 2px solid #FFFFFF"]:hover { background: #FFFFFF !important; color: #1E4D5C !important; }
a[style*="background: #FBF5EC; color: #4A2C21"]:hover { background: #FFFFFF !important; }
button[type="submit"]:hover { background: #7E1B46 !important; }
:focus-visible { outline: 3px solid #E9B44C; outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: #1E4D5C; color: #FFFFFF; padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Current page in the header */
.site-header nav a[aria-current="page"] { color: #9C2257 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px; }
.site-header nav a:not([style*="background"]):hover { color: #9C2257 !important; }

summary { list-style-position: outside; }
summary::marker { color: #E9B44C; }
input:focus, select:focus, textarea:focus { outline: 3px solid #E9B44C; outline-offset: 1px; border-color: #1E4D5C !important; }

/* Tablets and phones */
@media (max-width: 760px) {
  h1 { font-size: 42px !important; }
  h2 { font-size: 34px !important; }
  section[style*="padding: 80px 0"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  section[style*="padding: 80px 32px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  section[style*="padding: 64px 32px 80px"] { padding-top: 40px !important; padding-bottom: 60px !important; }
  section[style*="padding: 88px 32px 104px"] { padding-top: 56px !important; padding-bottom: 72px !important; }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  h1 { font-size: 36px !important; }
  h2 { font-size: 30px !important; }
  [style*="padding: 0 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .site-header > div { padding: 12px 20px 6px !important; row-gap: 4px !important; }
  .site-header img { height: 30px !important; }
  .site-header nav { width: 100%; justify-content: space-between; gap: 4px 12px !important; font-size: 14px !important; }
  /* The hero on every page already has a booking button, so the header keeps just the three links on phones. */
  .site-header nav a[style*="background: #9C2257"] { display: none !important; }
  [style*="aspect-ratio: 4 / 5"] { max-width: 290px !important; }
  footer > div { padding: 0 20px !important; }
  form[action] { padding: 24px 20px !important; }
  article[style*="border-radius: 28px"] { padding: 26px 22px !important; }
  p[style*="font-size: 27px"] { font-size: 22px !important; }
  p[style*="font-size: 21px"], div[style*="font-size: 21px"] { font-size: 19px !important; }
}