/* defining menu nav bar height */
:root {
  --nav-height: 4rem;
}

/*
using border-box so that adding padding and borders
won't make elements larger than their containers
*/
html {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 100%; /* use browser default sizing */
}

/*
Ensure border-box setting is inherited by all children
including boxes generated by CSS (covered by *::before
and *::after)
*/
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* 
Adding ruleset to ensure all buttons/inputs/select/
textarea elements inherit the same font instead of
using the browser default
*/
button,
input,
select,
textarea {
  font: inherit;
}

body {
  background-color: #fafbf3; /* white-grey background */
  color: #000; /* black font color */
  margin: 0; /* set margin to 0 to remove white space around nav bar*/
  /*making body elements flex items with min-height
    set to dvh to format the page so footer is pushed
    to the bottom of the window */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/*Nav bar is persistent as you scroll down the page */
header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.menu {
  background-color: #2e2e2e; /* set nav bar color to black-grey */
  font-size: 0.9rem;
  padding: 1.5em;
}

.menu ul {
  list-style: none; /* remove bulleted points */
  margin: 0; /* set margin to 0 to remove white space around nav bar */
  padding: 0; /* remove default left indent */
  display: flex; /* display the nav bar content in a row */
  flex-wrap: wrap; /* remove overflow */
  gap: 3rem; /* add space between the nav bar items */
  justify-content: center;
}

.menu a {
  color: #fff; /* nav bar font color set to white */
  text-transform: uppercase;
  text-decoration: none; /* removing underline from the nav bar links */
}

/* bold and underline the current page on nav bar */
.menu a[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/*resetting :focus-visible to ensure focus ring is visible against 
nav bar for keyboard users*/
.menu a:focus-visible {
  outline: 2px solid #fff;
}

h1 {
  font-size: 2rem;
  color: #000;
  text-align: center;
}

h2 {
  font-size: 1.5rem;
  color: #353131;
}

h3 {
  font-size: 1.25rem;
  color: #595959;
}

main {
  flex: 1; /*main grows to fill remaining available space
        so footer is pushed to the bottom*/
}

.page-layout {
  margin: 0 auto;
  padding: 0 2rem 2rem 2rem;
  max-width: 1200px;
}

.intro {
  display: flex; /* have profile pic be next to the text */
  align-items: flex-start; /* align items to the top instead
        of stretching them to equal height */
  gap: 2.5rem; /* gap between text and image */
}

.intro-text {
  flex: 2; /* text grows/shrinks 2/3 of available space */
}

.profile-pic {
  flex: 1; /* text grows/shrinks to fill 1/3 of available space */
  min-width: 0;
  max-width: 240px;
  height: auto;
}

.intro-text > section:first-child > h3 {
  margin-top: 0; /* remove extra spacing between "about-me" & "background"*/
}

/*Using CSS grid to place sidebar next to content*/
.sidebar-layout {
  display: grid;
  /*sidebar column width: 14 rem; content column takes remaining space,
     min 0 and max 1fr (remaining leftover space) */
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2.5rem; /* gap between the columns*/
  align-items: start; /* align items in both cols to top of row to enable sticky sidebar */
}

.sidebar {
  position: sticky; /*make the sidebar sticky*/
  top: calc(
    var(--nav-height) + 2rem
  ); /*set sidebar position to 2rem below the top nav bar*/
  margin-top: 1.25rem;
  /*add a divider between sidebar & content */
  border-right: 1px solid #e0e0e0;
}

.sidebar li {
  padding: 0.75em 0 0 1em; /*add indentation to each line*/
  text-indent: -1em; /*remove indentation from spillover lines */
}

.sidebar ul {
  list-style: none; /*remove bullets*/
  padding: 1em;
  font-size: 0.95em;
}

.sidebar nav a {
  color: inherit; /*match page text color (black)*/
  text-decoration: none;
}

/* turn text grey when hovering/using keyboard*/
.sidebar nav a:hover,
.sidebar nav a:focus-visible {
  color: #595959;
}

/* bold the text for the cafe currently in view */
.sidebar nav a[aria-current="true"] {
  font-weight: bold;
}

.page-content > article {
  scroll-margin-top: calc(
    var(--nav-height) + 1.75rem
  ); /*prevent heading from being cut off from view by nav bar
        when using anchor jump */
  margin-bottom: 2rem;
}

.carousel {
  display: flex; /*position button and image ina row*/
  align-items: center; /* center vertically */
  gap: 0.75em;
  max-width: 35rem;
  margin: 2rem auto;
}

.carousel-photo {
  flex: 1; /*photo fills space between buttons*/
  min-width: 0; /*allow shrinking below image's natural width*/
}

.carousel-photo img {
  width: 100%; /*fill photo area */
  height: auto;
  aspect-ratio: 1 / 1; /* fix square shape for all photos*/
  object-fit: cover; /*crop photo to fill shape*/
  vertical-align: bottom;
}

.carousel button {
  flex: none; /*maintain size of buttons*/
  cursor: pointer;
}

/*outline current button for keyboard*/
.carousel button:focus-visible {
  outline: 2px solid #2e2e2e;
  outline-offset: 2px;
}

/*teacup icons for rating */
.teacups {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/*singular empty teacup icon*/
.teacup {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("../images/teacup-empty.svg");
  background-repeat: no-repeat; /*keep css from repeating the image*/
  background-position: center;
  background-size: contain;
  flex: 0 0 auto; /*prevent icon from being resized*/
}

/* singular filled teacup icon */
.teacup-filled {
  background-image: url("../images/teacup-filled.svg");
}

/* ratings layout*/
.ratings {
  display: grid;
  grid-template-columns: max-content auto; /*label col size = longest label */
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}

.ratings dd {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0;
}

/*Hide ratings text */
.hide-text {
  position: absolute; /*remove the text from the flow*/
  /*shrink */
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px; /*shift the box up & to the left to prevent overflow*/
  /*hide the box*/
  overflow: hidden; /* clip the text*/
  clip-path: inset(50%); /*clip the box by 50% from each side*/
  white-space: nowrap; /*keep text in one line for screen readers*/
}

/* ===== Boston Spots page — append to style.css ===== */
/* Generated by Claude */
/* Make sure the hidden attribute always wins over any display rule */
[hidden] {
  display: none !important;
}

/* Short intro under the page title */
.page-lede {
  max-width: 40rem;
  margin: 0 auto 2rem;
  text-align: center;
  color: #353131;
}

/* Neighborhood filter: one row of toggle buttons, wraps on narrow screens */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 2rem;
}

.filter-label {
  font-weight: bold;
  margin-right: 0.25rem;
}

.filter-bar button {
  padding: 0.4em 1em;
  border: 1px solid #2e2e2e;
  border-radius: 999px;
  background-color: transparent;
  color: #2e2e2e;
  cursor: pointer;
}

.filter-bar button:hover {
  background-color: #e9eae2;
}

/* Selected filter mirrors the nav bar colors */
.filter-bar button[aria-pressed="true"] {
  background-color: #2e2e2e;
  color: #fff;
}

.filter-bar button:focus-visible {
  outline: 2px solid #2e2e2e;
  outline-offset: 2px;
}

/* Spot cards (scroll offset comes from .page-content > article) */
.spot-card {
  padding-bottom: 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.spot-card h2 {
  margin-bottom: 0.25rem;
}

.spot-neighborhood {
  margin: 0 0 1rem;
  color: #595959;
  font-size: 0.95rem;
}

/* One photo per spot, cropped to a consistent shape */
.spot-photo {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.spot-card p,
.spot-card ul {
  max-width: 65ch;
  line-height: 1.6;
}

/* Narrow screens: stack the sidebar above the content (also affects coffee.html) */
@media (max-width: 48rem) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
}

footer {
  text-align: center;
  font-size: 0.75rem;
  color: #707070;
  padding: 1rem 1rem;
  border-top: 1px solid #e0e0e0; /*add a line to divide the footer from main content*/
}