/* ==========================================================================
   Base Styles — West Street Cafe
   CSS reset, global typography, and mobile-first foundation.
   All base styles target mobile viewports (no media query).
   Enhancements use min-width queries only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Global Typography — Mobile-First Base
   -------------------------------------------------------------------------- */

body {
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
}

/* Headings — modular scale ratio ~1.25 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

h5 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-xs);
}

h6 {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Block-Level Spacing — Vertical Rhythm
   -------------------------------------------------------------------------- */

p,
ul,
ol,
blockquote,
pre,
table,
figure,
dl {
  margin-bottom: var(--space-sm);
}

/* Consecutive block-level siblings get consistent spacing */
p + p,
p + ul,
p + ol,
ul + p,
ol + p {
  margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
  color: var(--color-secondary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

ul,
ol {
  padding-left: var(--space-sm);
}

li + li {
  margin-top: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Images and Media
   -------------------------------------------------------------------------- */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Form Elements Base
   -------------------------------------------------------------------------- */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Utility: Max Line Length for Readability
   -------------------------------------------------------------------------- */

.prose {
  max-width: 65ch;
}

/* Body text containers: constrain line length to ~75 characters max */
p,
li,
blockquote,
.info-item-mainmenu,
.breakfast-item-desc,
.breakfast-category-subtitle {
  max-width: 75ch;
}

/* --------------------------------------------------------------------------
   Responsive Enhancements — Tablet (min-width: 768px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-md);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  body {
    font-size: var(--font-size-base);
  }
}

/* --------------------------------------------------------------------------
   Responsive Enhancements — Desktop (min-width: 1024px)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  body {
    font-size: var(--font-size-base);
  }
}

/* --------------------------------------------------------------------------
   Responsive Enhancements — Large (min-width: 1440px)
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  body {
    font-size: var(--font-size-base);
  }
}

/* --------------------------------------------------------------------------
   Mobile Experience Enforcement
   Ensures minimum 16px text and 44×44px touch targets on mobile (≤768px).
   All content constrained within viewport width; no horizontal scrolling.
   Requirements: 5.2, 5.3, 5.4
   -------------------------------------------------------------------------- */

/* Prevent horizontal overflow on all elements */
section,
div,
main,
article,
aside,
table,
img,
figure,
pre,
blockquote,
iframe {
  max-width: 100%;
}

/* Minimum font size: 16px for all text on mobile viewports.
   --font-size-sm (14px) and --font-size-xs (12px) must only be used 
   inside min-width media queries for non-essential text.
   This rule enforces 1rem (16px) minimum on base mobile styles. */
.form-error,
.menu-category-subtitle,
.breakfast-category-subtitle,
.menu-size-label,
.menu-size-values,
.menu-item-price,
.menu-price-hot,
.menu-price-iced,
.breakfast-item-price,
.breakfast-item-variant-name,
.breakfast-item-variant-price,
.breakfast-item-desc,
.coffee-size-header,
.sand-sub-menu,
.info-card-hours,
.price-item-mainmenu,
.coffee-price-group,
.coffee-price-hot,
.coffee-price-iced,
.item-mainmenu .txt9,
.section-mainmenu h6.tit-mainmenu,
.section-lunch h6.tit-mainmenu {
  font-size: var(--font-size-base);
}

/* Form labels — ensure 16px minimum on mobile */
.contact-form .form-group label {
  font-size: var(--font-size-base);
}

/* Interactive elements: minimum 44×44px touch target on mobile.
   Applied to standalone interactive elements; inline text links are exempt. */
button,
input,
textarea,
select,
[role="button"] {
  min-height: 44px;
}

/* Standalone link touch targets (nav, footer, social, cards) */
.nav-social a,
.footer-social a,
.mobile-nav-social a,
.mobile-overlay-close,
.btn-back-to-top,
#myBtn,
.site-logo {
  min-width: 44px;
  min-height: 44px;
}

/* Exempt inline links from min-height so body text flow isn't broken */
p a,
li a,
span a,
.menu-item a,
.breakfast-item a,
.nav-links a,
.mobile-nav-links a {
  min-height: auto;
}

/* Ensure buttons and form controls meet touch target requirements */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn-submit,
.btn3 {
  min-height: 44px;
  min-width: 44px;
}

/* Back-to-top button: enforce touch target size */
.btn-back-to-top,
#myBtn {
  min-width: 44px;
  min-height: 44px;
}

/* At tablet+ (768px), relax the minimum font-size enforcement
   since these sizes are acceptable for larger screens */
@media (min-width: 768px) {
  .form-error,
  .menu-category-subtitle,
  .breakfast-category-subtitle,
  .menu-size-label,
  .menu-size-values,
  .menu-item-price,
  .menu-price-hot,
  .menu-price-iced,
  .breakfast-item-price,
  .breakfast-item-variant-name,
  .breakfast-item-variant-price,
  .breakfast-item-desc,
  .coffee-size-header,
  .sand-sub-menu,
  .info-card-hours,
  .price-item-mainmenu,
  .coffee-price-group,
  .coffee-price-hot,
  .coffee-price-iced,
  .item-mainmenu .txt9,
  .section-mainmenu h6.tit-mainmenu,
  .section-lunch h6.tit-mainmenu {
    font-size: var(--font-size-sm);
  }

  .contact-form .form-group label {
    font-size: var(--font-size-sm);
  }
}