/* ============================================================
   Caffeine Express'O — main stylesheet
   Mobile-first: these styles are written for phone screens.
   Desktop layout comes later (phase 3).
   ============================================================ */


/* ===== BRAND COLORS =====
   Picked from images/logo.png. Change a color here and it
   updates everywhere on the site. */
:root {
  --espresso: #381702;   /* darkest brown: logo lettering, main text */
  --roast:    #974b08;   /* copper brown: logo accents, headings */
  --amber:    #e8a637;   /* amber: sun rays */
  --gold:     #fac758;   /* gold: bright sun, buttons */
  --cream:    #fcf5e7;   /* cream: logo background, page background */
  --latte:    #f9e9c9;   /* darker cream: alternate section background */

  /* >>> HERO IMAGE <<< (see the HERO section below for the steps) */
  --hero-image: linear-gradient(to top, #381702 0%, #974b08 35%, #e8a637 70%, #fac758 100%); /* PLACEHOLDER sunrise gradient */
  /* --hero-image: url("../images/hero.jpg"); */                                                /* REAL PHOTO: use this line instead */

  /* Dark tint laid over the hero so its text stays readable
     (on the gradient now, and on a photo later). */
  --hero-overlay: rgba(56, 23, 2, 0.55);

  --max-width: 40rem;    /* keeps content in a readable column on wide screens */
  --page-width: 72rem;   /* tablet/desktop: widest the page content gets (about 1150px) */
  --gutter: 2rem;        /* tablet/desktop: smallest gap between content and screen edge */
  --order-bar-height: 4.5rem;
}


/* ===== BASICS ===== */
* {
  box-sizing: border-box; /* padding is counted inside widths, which makes sizing easier */
}

html {
  scroll-behavior: smooth; /* menu links glide to their section */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;  /* about 17px: comfortable to read on a phone */
  line-height: 1.6;
  color: var(--espresso);
  background: var(--cream);
  /* leave room at the bottom so the sticky order bar never covers the footer */
  padding-bottom: calc(var(--order-bar-height) + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif; /* serif headings echo the logo lettering */
  line-height: 1.2;
}

a {
  color: var(--roast);
}

img {
  max-width: 100%;
  height: auto;
}


/* ===== BUTTONS =====
   min-height 48px keeps every button easy to tap with a thumb. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;  /* pill shape */
  background: var(--gold);
  color: var(--espresso);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  border: 2px solid var(--gold);
}

.button:hover,
.button:focus-visible {
  background: var(--amber);
  border-color: var(--amber);
}

/* Clear outline when someone moves through the page with a keyboard */
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.button-large {
  width: 100%;
  min-height: 56px;
  font-size: 1.25rem;
}

/* Outline button for less important actions (Get Directions) */
.button-outline {
  background: transparent;
  color: var(--espresso);
  border-color: var(--roast);
}

.button-outline:hover,
.button-outline:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
}


/* ===== 1. HEADER ===== */
.site-header {
  background: var(--espresso);
  padding: 0.75rem 1rem 0.25rem;
  text-align: center;
}

.logo-link {
  display: inline-block;
}

.logo-link img {
  display: block;
  width: 72px;
  height: 72px;
}

.site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;  /* tap target */
  padding: 0 0.75rem;
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--gold);
}

/* Header Order Now button: hidden on phones (the sticky bar does
   this job there). Shown again in the TABLET section below.
   ".site-nav" is included so this beats the ".site-nav a" rule above. */
.site-nav .header-order {
  display: none;
}


/* ===== 2. HERO =====

   >>> HERO IMAGE: HOW TO REPLACE THE PLACEHOLDER GRADIENT <<<
   Right now the background is a sunrise gradient (dark at the
   bottom, amber and gold at the top). To use a real photo:
     1. Put your photo in the images folder, named hero.jpg
        (full path: images/hero.jpg).
     2. At the top of this file, in :root, find "HERO IMAGE".
        Delete the --hero-image line marked PLACEHOLDER, then
        remove the comment marks (slash-star and star-slash)
        around the line marked REAL PHOTO.
     3. Leave --hero-overlay alone. It darkens the photo so the
        light text stays readable. If the text is still hard to
        read on your photo, raise 0.55 to 0.65.
   The path starts with ../ because this CSS file lives inside
   the css folder, one level below images.
*/
.hero {
  background-image:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)), /* dark overlay on top */
    var(--hero-image);                                           /* gradient now, photo later */
  background-size: cover;      /* photo fills the area without stretching */
  background-position: center;
  color: var(--cream);
  text-align: center;
  padding: 3rem 1.25rem 2.5rem;
}

/* Keeps hero content in a neat column on wide screens */
.hero > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.hero h1 {
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.tagline {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  margin-top: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-intro {
  font-size: 1.125rem;
  margin-bottom: 1.75rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.order-note {
  font-size: 0.95rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}


/* ===== 3. STICKY ORDER BAR ===== */
.order-bar {
  position: fixed;   /* stays put while the page scrolls */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;       /* sits on top of everything else */
  background: var(--espresso);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); /* clears the iPhone home bar */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}

.order-bar .button {
  display: flex;
  width: 100%;
  max-width: var(--max-width);
  min-height: 52px;
  margin: 0 auto;
}


/* ===== 4 & 5. CONTENT SECTIONS ===== */
.section {
  padding: 2.5rem 1.25rem;
  scroll-margin-top: 1rem;  /* small gap above the heading when jumped to from the menu */
}

/* Keeps section content in a neat column on wide screens */
.section > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.section-alt {
  background: var(--latte);
}

.section h2 {
  font-size: 1.75rem;
  color: var(--roast);
  margin-top: 0;
}

.section h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.small {
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
}

/* About: closing tagline set apart from the paragraphs */
.closing-tagline {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--amber);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.25rem;
  text-align: center;
  color: var(--roast);
}

/* Hours: day on the left, time on the right */
.hours-list {
  list-style: none;
  padding: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(56, 23, 2, 0.15);
}

.hours-list li span:first-child {
  font-weight: 700;
}

address {
  font-style: normal;  /* browsers italicize addresses by default */
  margin-bottom: 1.25rem;
}

/* Phone number: a bigger, easy-to-tap link */
address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.125rem;
}

/* Google map below the directions button */
.map {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 12px;  /* soft corners to match the buttons */
  margin-top: 1.5rem;
}

/* Small note under the map for when it's blocked */
.map-fallback {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}


/* ===== 6. FOOTER ===== */
.site-footer {
  background: var(--espresso);
  color: var(--cream);
  text-align: center;
  padding: 2rem 1.25rem;
  font-size: 0.95rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

.footer-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: var(--gold);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
  font-weight: 700;
}


/* ============================================================
   TABLET AND DESKTOP (phase 3)
   Everything above is the phone design and stays the default.
   The blocks below only switch on when the screen is at least
   a certain width, so phones never see them.
   ============================================================ */


/* ===== TABLET: screens 768px and wider ===== */
@media (min-width: 768px) {

  /* --- Page width ---
     Each full-width band (header, hero, sections, footer) keeps
     its background edge to edge, but its content is padded in so
     it lines up in one centered column no wider than --page-width.
     max() picks whichever is bigger: the small gutter, or the
     space left over on each side of the column. */
  .site-header,
  .hero,
  .section,
  .site-footer {
    padding-left: max(var(--gutter), calc((100% - var(--page-width)) / 2));
    padding-right: max(var(--gutter), calc((100% - var(--page-width)) / 2));
  }

  /* No sticky bar here, so the page no longer needs room for it */
  body {
    padding-bottom: 0;
  }

  /* --- 1. Header: logo on the left, menu and Order Now on the right --- */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .logo-link img {
    width: 64px;
    height: 64px;
  }

  .site-nav {
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
  }

  /* Gold underline slides in under menu links on hover or keyboard focus */
  .site-nav a:not(.button) {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: color 0.15s;
  }

  .site-nav a:not(.button):hover,
  .site-nav a:not(.button):focus-visible {
    color: var(--gold);
    text-decoration-color: var(--gold);
  }

  /* Header Order Now button. ".site-nav" is repeated in these
     selectors so they win over the plain menu-link styles above. */
  .site-nav .header-order {
    display: inline-flex;
    min-height: 44px;
    margin-left: 0.75rem;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    color: var(--espresso);
  }

  .site-nav .header-order:hover,
  .site-nav .header-order:focus-visible {
    color: var(--espresso);
  }

  /* --- 2. Sticky order bar: phones only --- */
  .order-bar {
    display: none;
  }

  /* --- Buttons and links: smooth color change on hover --- */
  .button {
    transition: background-color 0.15s, border-color 0.15s;
  }

  /* Keyboard focus ring: dark brown on the light sections so it
     shows up clearly (gold would be hard to see on cream). */
  .section a:focus-visible {
    outline-color: var(--espresso);
  }

  /* --- 3. Hero: full width, text and button on the left --- */
  .hero {
    text-align: left;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  /* Undo the phone centering; keep lines a comfortable length */
  .hero > * {
    max-width: 36rem;
    margin-left: 0;
    margin-right: 0;
  }

  .hero h1 {
    max-width: none;
    font-size: 3rem;
  }

  .tagline {
    font-size: 1.5rem;
  }

  .hero-intro {
    font-size: 1.1875rem;
  }

  /* Button sized to its text instead of stretching full width */
  .button-large {
    width: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  /* --- 4 & 5. Sections: line up with the page column --- */
  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* About: about 65-70 characters per line, easy to read.
     rem (not ch) so the closing tagline lines up with the paragraphs. */
  #about p {
    max-width: 36rem;
  }

  .section h2 {
    font-size: 2.25rem;
  }

  /* --- 5. Hours & Location: two columns side by side ---
     A grid places each piece without changing the HTML:
     left column  = Hours heading + hours list
     right column = Find us heading + address + directions
     map          = full width underneath both

     The four tracks are: left column | 4rem gap | right column | leftover space.
     The gap is its own track (instead of column-gap) so the leftover
     space on the right doesn't add a second gap and squeeze the columns.
     The leftover track lets the map stretch to the full page width. */
  #hours {
    display: grid;
    grid-template-columns: minmax(0, 26rem) 4rem minmax(0, 26rem) minmax(0, 1fr);
    align-items: start;
  }

  #hours h2 {
    grid-column: 1 / -1;  /* main heading spans both columns */
  }

  #hours h3 {
    margin-top: 0;
  }

  #hours h3:first-of-type { grid-column: 1; grid-row: 2; }
  #hours .hours-list      { grid-column: 1; grid-row: 3 / span 2; margin-top: 0; }
  #hours h3:last-of-type  { grid-column: 3; grid-row: 2; }
  #hours address          { grid-column: 3; grid-row: 3; }
  #hours address + p      { grid-column: 3; grid-row: 4; margin-top: 0; }
  #hours .map             { grid-column: 1 / -1; grid-row: 5; height: 380px; margin-top: 2rem; }
  #hours .map-fallback    { grid-column: 1 / -1; grid-row: 6; }

  /* --- 6. Footer: stays centered, just a little more breathing room --- */
  .site-footer {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}


/* ===== DESKTOP: screens 1100px and wider ===== */
@media (min-width: 1100px) {

  :root {
    --gutter: 3rem;
  }

  .site-nav {
    gap: 0.75rem;
  }

  .logo-link img {
    width: 72px;
    height: 72px;
  }

  /* Hero: taller, with bigger text for a large screen */
  .hero {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .hero > * {
    max-width: 40rem;
  }

  .hero h1 {
    font-size: 4rem;
  }

  .tagline {
    font-size: 1.75rem;
  }

  .hero-intro {
    font-size: 1.25rem;
  }

  .section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}