/* ================================================================
   SHOAIBBB'S CAFÉ — style.css
   ================================================================
   
   HOW CSS WORKS:
   CSS = Cascading Style Sheets. It "styles" the HTML elements.
   
   Basic syntax:
   selector {
     property: value;   ← this is called a "declaration"
   }
   
   The selector targets HTML elements (tags, classes, IDs).
   Then properties control: color, size, spacing, layout, etc.
   
   ================================================================ */


/* ================================================================
   1. CSS CUSTOM PROPERTIES (Variables)
   ================================================================
   
   Variables let you define values ONCE and reuse them everywhere.
   If you change the primary color here, it changes on the WHOLE site.
   
   --variable-name: value;   ← how to define
   var(--variable-name)      ← how to use
   
   :root means these variables are available EVERYWHERE in the CSS.
================================================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #156874;        /* Deep teal — main brand color */
  --color-primary-dark: #0d4a53;   /* Darker teal for hover states */
  --color-primary-light: #1a8596;  /* Lighter teal for accents */
  --color-secondary: #EDE6E6;      /* Soft off-white — backgrounds */
  --color-accent: #c9a84c;         /* Gold — for Turkish elegance details */

  /* ---- Text Colors ---- */
  --color-text-dark: #1a1a1a;      /* Near-black for headings */
  --color-text-body: #4a4a4a;      /* Dark grey for body text */
  --color-text-muted: #888;        /* Light grey for captions/hints */
  --color-text-white: #ffffff;     /* White text on dark backgrounds */

  /* ---- Background Colors ---- */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f5f5;       /* Very light warm background */
  --color-bg-dark: #0f2f35;        /* Dark teal for footer */

  /* ---- Typography ---- */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  /* 
    Cormorant Garamond = elegant, classical serif (perfect for luxury/Turkish theme).
    Georgia = fallback if Google Fonts fails to load.
    serif = last resort system font.
  */
  --font-body: 'Jost', sans-serif;
  /* 
    Jost = clean, geometric sans-serif (modern, readable).
    sans-serif = fallback.
  */

  /* ---- Spacing Scale ---- */
  /* 
    Consistent spacing prevents random numbers all over the CSS.
    Everything is a multiple of 8px (common design system practice).
  */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 5rem;     /* 80px */

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px; /* Makes elements pill-shaped */

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-teal: 0 4px 20px rgba(21, 104, 116, 0.25);
  /*
    Box shadow format: x-offset y-offset blur-radius color
    rgba(0,0,0, 0.10) = black at 10% opacity = soft, subtle shadow
  */

  /* ---- Transitions ---- */
  --transition: all 0.3s ease;
  /* 
    Shorthand for: all properties, 0.3 seconds, ease timing.
    Used for hover effects — makes them feel smooth, not abrupt.
  */
}


/* ================================================================
   2. CSS RESET / BASE STYLES
   ================================================================
   
   Different browsers have different default styles.
   A reset removes those defaults so our design looks the same everywhere.
================================================================ */

*, *::before, *::after {
  /*
    * = selects EVERY element.
    ::before and ::after = pseudo-elements (decorative generated content).
    We apply box-sizing to all of them.
  */
  box-sizing: border-box;
  /*
    box-sizing: border-box means:
    When you set width: 300px, the padding and border are INCLUDED in that 300px.
    Without this, padding ADDS to the width (confusing and problematic).
    This is the single most important CSS reset rule.
  */
  margin: 0;
  padding: 0;
  /* Remove all default margins and padding. We'll add our own intentionally. */
}

html {
  scroll-behavior: smooth;
  /*
    Makes all anchor link (#) navigations animate smoothly instead of jumping.
    Works with our smooth-scroll JS, but also as a CSS-only fallback.
  */
  font-size: 16px;
  /* Base font size. 1rem = 16px. All our rem values calculate from this. */
}

body {
  font-family: var(--font-body);
  /* Use our body font variable defined in :root */
  font-size: 1rem;          /* 16px */
  line-height: 1.7;
  /* 
    line-height controls spacing between lines of text.
    1.7 = 170% of font size = comfortable reading spacing.
    No unit needed here — it's a multiplier.
  */
  color: var(--color-text-body);
  background-color: var(--color-bg-white);
  overflow-x: hidden;
  /* Prevents horizontal scroll from slightly overflowing elements */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  /* All headings use our elegant Cormorant Garamond font */
  line-height: 1.2;
  /* Tighter line height for headings looks more elegant */
  color: var(--color-text-dark);
  font-weight: 400;
  /* 
    Cormorant Garamond looks best at regular weight (400).
    Its letterforms are already beautiful — bold would overdo it.
  */
}

a {
  text-decoration: none;
  /* Remove default underlines from all links */
  color: inherit;
  /* Inherit the color from the parent element instead of default blue */
  transition: var(--transition);
  /* All links animate smoothly on hover */
}

img {
  max-width: 100%;
  /* Images never overflow their container */
  display: block;
  /* Removes the small gap below inline images */
}

ul {
  list-style: none;
  /* Remove bullet points from all lists */
}

input, select, textarea, button {
  font-family: inherit;
  /* Form elements don't inherit font by default — this fixes that */
}


/* ================================================================
   3. UTILITY CLASSES
   ================================================================
   
   Reusable helper classes used across multiple sections.
   Think of them as shortcuts.
================================================================ */

.container {
  /*
    A centered wrapper with a maximum width.
    Prevents content from stretching too wide on large screens.
  */
  max-width: 1200px;
  /* Content never wider than 1200px */
  margin: 0 auto;
  /* 
    margin: 0 auto centers a block element horizontally.
    0 = no top/bottom margin, auto = browser calculates equal left/right.
  */
  padding: 0 var(--space-lg);
  /* 24px breathing room on left and right sides */
}

.section {
  padding: var(--space-2xl) 0;
  /* 80px of vertical padding above and below each section */
}

.section__header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto var(--space-2xl);
  /* Centered header, max 650px wide, 80px gap below */
}

.section__eyebrow {
  /*
    Small decorative text above section titles.
    "Eyebrow" is a design term for this pattern.
  */
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;      /* 12px */
  font-weight: 500;
  letter-spacing: 0.2em;
  /* 
    letter-spacing adds space between each letter.
    0.2em = 20% of font size.
    ALL CAPS + letter-spacing = classic elegant design treatment.
  */
  text-transform: uppercase;
  color: var(--color-accent);  /* Gold color for this decorative text */
  margin-bottom: var(--space-sm);
}

.section__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  /*
    clamp(min, preferred, max) — responsive font size!
    - Minimum: 2rem (32px) on very small screens
    - Preferred: 4vw (4% of viewport width — scales with screen)
    - Maximum: 3.2rem (51px) on large screens
    This is MUCH better than fixed px sizes.
  */
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
}

.section__subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.8;
}


/* ================================================================
   4. BUTTON STYLES
   ================================================================ */

.btn {
  /* Base button styles — shared by ALL buttons */
  display: inline-flex;
  /*
    inline-flex: the button only takes up as much width as needed,
    but allows flexbox inside (for centering text/icons).
  */
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;        /* Top/bottom: 14px, Left/right: 32px */
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);  /* Fully rounded (pill shape) */
  border: 2px solid transparent;
  cursor: pointer;
  /* cursor: pointer shows the hand icon on hover — signals "clickable" */
  transition: var(--transition);
  text-transform: uppercase;
}

.btn--primary {
  /* Solid teal button */
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  /* 
    :hover is a pseudo-class — applies styles when mouse is over the element.
    The transition property on .btn makes this change animate smoothly.
  */
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  /* Move button 2px UP on hover — subtle "lift" effect */
  box-shadow: var(--shadow-teal);
}

.btn--ghost {
  /* Transparent button with white border */
  background-color: transparent;
  color: var(--color-text-white);
  border-color: rgba(255, 255, 255, 0.5);
  /* rgba allows opacity: 50% white border */
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-text-white);
  transform: translateY(-2px);
}

.btn--nav {
  /* Smaller button version used in the navbar */
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn--nav:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--full {
  /* Makes button take full width of its container */
  width: 100%;
}


/* ================================================================
   5. NAVBAR
   ================================================================ */

.navbar {
  position: fixed;
  /*
    fixed: stays at the top even when you scroll.
    Positioned relative to the browser window, not the page.
  */
  top: 0;
  left: 0;
  right: 0;
  /* Stretches full width */
  z-index: 1000;
  /*
    z-index controls stacking order.
    1000 = very high number = navbar appears ON TOP of everything.
  */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Spreads logo and links to opposite ends */
  padding: 1.2rem var(--space-xl);
  background-color: rgba(21, 104, 116, 0.95);
  /* 
    rgba(21,104,116, 0.95) = our teal color at 95% opacity.
    The slight transparency lets you see content scroll behind it.
  */
  backdrop-filter: blur(10px);
  /* 
    backdrop-filter: blurs whatever is BEHIND the element.
    Creates a modern "frosted glass" effect.
    Only works when the background has some transparency.
  */
  transition: var(--transition);
}

.navbar--scrolled {
  /* This class is added by JavaScript when user scrolls down */
  box-shadow: var(--shadow-lg);
  background-color: rgba(21, 104, 116, 0.98);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* gap adds space between flex children (symbol and text) */
}

.logo__symbol {
  font-size: 1.4rem;
  color: var(--color-accent);  /* Gold crescent moon */
}

.logo__text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-white);
  letter-spacing: 0.02em;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  /* Horizontal row of links with 32px gap between each */
}

.navbar__links li a {
  /*
    Selects <a> tags inside <li> inside .navbar__links.
    This is a descendant selector — very specific targeting.
  */
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  /* Slightly transparent white for non-active links */
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.navbar__links li a:hover {
  color: white;
  border-bottom-color: var(--color-accent);
  /* Gold underline appears on hover — elegant touch */
}

.navbar__hamburger {
  /* Mobile-only hamburger icon (hidden on desktop) */
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.navbar__hamburger span {
  /* The three horizontal lines of the hamburger icon */
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
  transition: var(--transition);
}


/* ================================================================
   6. HERO SECTION
   ================================================================ */

.hero {
  position: relative;
  /* 
    position: relative allows absolutely-positioned children
    (like .hero__overlay) to position relative to THIS element.
  */
  min-height: 100vh;
  /* 
    min-height: 100vh = at least 100% of the viewport height.
    vh = viewport height unit. 100vh = full screen height.
    min-height means it grows taller if content needs more space.
  */
  display: flex;
  align-items: center;
  /* Centers content vertically */
  background-color: var(--color-primary);
  /* Deep teal background */
  overflow: hidden;
  /* Clips decorative elements that extend beyond the hero */
  padding: 8rem var(--space-xl) var(--space-2xl);
  /* Extra top padding (8rem) to account for fixed navbar */
}

.hero__overlay {
  /*
    Decorative geometric pattern overlay.
    This is a CSS-only ornamental element.
  */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.02) 60px,
      rgba(255, 255, 255, 0.02) 61px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 60px,
      rgba(255, 255, 255, 0.02) 60px,
      rgba(255, 255, 255, 0.02) 61px
    );
  /*
    repeating-linear-gradient creates a pattern by repeating a gradient.
    This creates a subtle diagonal lattice (Turkish-inspired geometric pattern).
    rgba(255,255,255, 0.02) = 2% white = barely visible.
  */
  pointer-events: none;
  /* pointer-events: none means you can click THROUGH this element */
}

.hero__content {
  position: relative;
  z-index: 2;
  /* z-index: 2 makes content appear above the overlay (z-index: 0) */
  max-width: 700px;
}

.hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  font-weight: 500;
}

.hero__title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  /* Very large responsive heading */
  color: var(--color-text-white);
  line-height: 1.1;
  margin-bottom: var(--space-md);
  font-weight: 300;
  /* Thin weight for Cormorant — maximally elegant */
}

.hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
  max-width: 500px;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  /* flex-wrap: wrap allows buttons to stack on small screens */
}

.hero__ornament {
  /* Decorative circular element in the hero — right side */
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  /* 
    transform: translateY(-50%) moves element up by 50% of its own height.
    Combined with top: 50%, this perfectly centers it vertically.
  */
  width: 600px;
  height: 600px;
  pointer-events: none;
}

.ornament__circle {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  /* border-radius: 50% makes it a perfect circle */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Centers within its parent */
}

.ornament__ring {
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.15);
  /* Very subtle gold ring */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ================================================================
   7. ABOUT SECTION
   ================================================================ */

.about {
  background-color: var(--color-bg-white);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*
    grid-template-columns defines how many columns and their widths.
    1fr 1fr = two equal columns (fr = fractional unit).
    1fr takes up 1 "fraction" of available space.
  */
  gap: var(--space-2xl);
  align-items: center;
}

.about__visual {
  position: relative;
}

.about__img-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Clips image/placeholder to the rounded corners */
  aspect-ratio: 4/5;
  /*
    aspect-ratio maintains proportions regardless of width.
    4/5 = slightly taller than wide (portrait orientation).
  */
  box-shadow: var(--shadow-lg);
  position: relative;
}

.about__img-frame::before {
  /*
    ::before is a pseudo-element — creates a decorative element
    that doesn't need HTML markup.
    content: '' is required (even if empty) to display it.
  */
  content: '';
  position: absolute;
  inset: 0;
  /* inset: 0 = top:0, right:0, bottom:0, left:0 — fills parent */
  background: linear-gradient(
    135deg,
    rgba(21, 104, 116, 0.1) 0%,
    transparent 100%
  );
  z-index: 1;
  /* Subtle teal gradient overlay on the image */
}

.about__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: white;
}

.placeholder__icon {
  font-size: 4rem;
  /* Large emoji as placeholder visual */
}

.about__img {
  /* Real café/food photo filling the frame */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.placeholder__text {
  font-size: 0.9rem;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

.about__badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  /* Positioned partially OUTSIDE the image frame — overlapping effect */
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: var(--color-accent);
  /* Gold badge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
  padding: var(--space-sm);
}

.badge__number {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  line-height: 1;
}

.badge__label {
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  margin-top: 4px;
}

.about__text {
  padding-left: var(--space-lg);
  /* Extra breathing room between image and text columns */
}

.about__description {
  color: var(--color-text-body);
  line-height: 1.9;
  margin-bottom: var(--space-md);
}

.about__stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  /* Thin separator line above stats */
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat__number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
}

.stat__label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ================================================================
   8. MENU SECTION
   ================================================================ */

.menu {
  background-color: var(--color-secondary);
  /* Soft off-white background for the menu section */
}

.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  /*
    repeat(auto-fill, minmax(320px, 1fr)):
    - auto-fill: create as many columns as fit
    - minmax(320px, 1fr): each column is minimum 320px, max 1 fraction
    
    This is RESPONSIVE GRID without media queries!
    On a wide screen: 3 columns. Medium: 2 columns. Mobile: 1 column.
    The grid figures it out automatically.
  */
  gap: var(--space-lg);
}

.menu__card {
  background-color: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  /* Aligns emoji and content at the top */
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid transparent;
  /* Invisible border — becomes visible on hover without shifting layout */
}

.menu__card:hover {
  transform: translateY(-4px);
  /* Card lifts up 4px on hover */
  box-shadow: var(--shadow-md);
  border-color: rgba(21, 104, 116, 0.15);
  /* Subtle teal border appears on hover */
}

.menu__card--featured {
  /* Special style for the "Chef's Pick" card */
  border-color: var(--color-accent);
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.04) 0%,
    white 100%
  );
  /* Very subtle gold tint */
}

.card__emoji {
  font-size: 2.5rem;
  flex-shrink: 0;
  /*
    flex-shrink: 0 prevents the emoji from shrinking
    even if the card is narrow. Without this, flexbox
    might squish the emoji to give more space to the text.
  */
  line-height: 1;
}

.card__img {
  /* Real dish photo, replacing the emoji placeholder */
  width: 84px;
  height: 84px;
  border-radius: var(--radius-md);
  object-fit: cover;
  /* object-fit: cover crops the photo to fill the box without distorting it */
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.card__content {
  flex: 1;
  /* flex: 1 makes this column take ALL remaining space after the emoji */
}

.card__header {
  display: flex;
  justify-content: space-between;
  /* Name on left, price on right */
  align-items: baseline;
  /* 
    align-items: baseline aligns text by their text baseline.
    Looks better than center when text sizes differ.
  */
  margin-bottom: 0.4rem;
  gap: var(--space-sm);
}

.card__name {
  font-size: 1.15rem;
  color: var(--color-text-dark);
  font-weight: 400;
}

.card__price {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  /* Prevents price from wrapping to a second line */
}

.card__desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

.card__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: rgba(21, 104, 116, 0.08);
  color: var(--color-primary);
}

.card__tag--featured {
  background-color: rgba(201, 168, 76, 0.15);
  color: #8a6f1e;
  /* Darker gold for text on gold background (readability) */
}


/* ================================================================
   9. GALLERY SECTION
   ================================================================ */

.gallery {
  background-color: var(--color-bg-white);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Exactly 3 equal columns */
  grid-template-rows: 250px 300px;
  /* Two rows with different heights */
  gap: var(--space-sm);
}

.gallery__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.gallery__item--tall {
  grid-row: span 2;
  /* 
    grid-row: span 2 makes this item span TWO rows.
    Creates a tall item that breaks the grid uniformity (interesting!).
  */
}

.gallery__item--wide {
  grid-column: span 2;
  /* Spans TWO columns — creates a wide panoramic item */
}

.gallery__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: white;
  font-size: 0.85rem;
  opacity: 0.85;
}

.gallery__placeholder span {
  font-size: 3rem;
}

.gallery__placeholder p {
  opacity: 0.7;
  letter-spacing: 0.05em;
}

.gallery__item img {
  /* Real photo filling the gallery box */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gallery__item:hover img {
  transform: scale(1.05);
  /* Slight zoom on hover, matches the placeholder hover effect */
}

.gallery__overlay {
  /*
    The text that appears when you hover over a gallery item.
    Hidden by default (opacity: 0), shown on hover.
  */
  position: absolute;
  inset: 0;
  background: rgba(21, 104, 116, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  opacity: 0;
  /* Hidden by default */
  transition: var(--transition);
}

.gallery__item:hover .gallery__overlay {
  /*
    This selector means:
    "When .gallery__item is hovered, style the .gallery__overlay inside it."
    This is the key technique for hover-reveal effects.
  */
  opacity: 1;
}

.gallery__item:hover .gallery__placeholder {
  transform: scale(1.05);
  /* Slight zoom on hover — the overflow: hidden clips the excess */
  transition: transform 0.4s ease;
}


/* ================================================================
   10. CONTACT SECTION
   ================================================================ */

.contact {
  background-color: var(--color-secondary);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  /* Info column: 1 part, Form column: 1.3 parts (slightly wider) */
  gap: var(--space-2xl);
  align-items: start;
  /* Align columns to the top (not center) */
}

.contact__info {
  padding-top: var(--space-sm);
}

.contact__info .section__title {
  text-align: left;
  /* Override the centered title for this section */
  margin-bottom: var(--space-xl);
}

.info__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.info__item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.info__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(21, 104, 116, 0.08);
  border-radius: var(--radius-md);
  /* Icon in a soft teal square */
}

.info__item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text-dark);
  font-weight: 600;
  margin-bottom: 4px;
}

.info__item p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ---- Form Styles ---- */

.contact__form-wrap {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.form__title {
  font-size: 1.6rem;
  color: var(--color-text-dark);
  margin-bottom: var(--space-lg);
  font-weight: 400;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two inputs side by side */
  gap: var(--space-md);
}

.form__group {
  margin-bottom: var(--space-md);
  /* Space between each input group */
}

.form__group label {
  display: block;
  /* block makes label take full width, forcing input below it */
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-body);
  margin-bottom: 0.5rem;
}

.form__group input,
.form__group select,
.form__group textarea {
  /*
    This rule applies to all three input types.
    Comma-separated selectors → same styles for all.
  */
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--color-text-dark);
  background-color: var(--color-bg-light);
  transition: var(--transition);
  appearance: none;
  /* appearance: none removes browser's default styling on select/inputs */
}

.form__group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  /* Custom dropdown arrow (inline SVG as background image) */
}

.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  /*
    :focus → applies when the user clicks into/tabs to the input.
    Always style :focus for keyboard accessibility.
  */
  outline: none;
  /* Remove browser's default blue outline */
  border-color: var(--color-primary);
  /* Replace with our teal color */
  background-color: white;
  box-shadow: 0 0 0 3px rgba(21, 104, 116, 0.1);
  /* Subtle teal glow — gives user feedback that field is active */
}

.form__group textarea {
  resize: vertical;
  /* Only allow resizing in height direction, not horizontal */
  min-height: 120px;
}

.form__success {
  display: none;
  /* Hidden by default — shown by JavaScript */
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: rgba(21, 104, 116, 0.08);
  border: 1px solid rgba(21, 104, 116, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}


/* ================================================================
   11. FOOTER
   ================================================================ */

.footer {
  background-color: var(--color-bg-dark);
  /* Dark teal background */
  color: rgba(255, 255, 255, 0.7);
  /* Default footer text is 70% white */
  padding: var(--space-2xl) 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  /* 
    Brand column gets 2 fractions (double width).
    Three link/info columns get 1 fraction each.
  */
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-md);
}

.footer__tagline {
  font-size: 0.9rem;
  line-height: 1.8;
  max-width: 280px;
  margin-bottom: var(--space-lg);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0;
  transition: var(--transition);
}

.social__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  /* Gold social icons on hover */
}

.footer__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  /* Gold headings */
  margin-bottom: var(--space-md);
}

.footer__links li {
  margin-bottom: 0.7rem;
}

.footer__links a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  transition: var(--transition);
}

.footer__links a:hover {
  color: white;
  padding-left: 4px;
  /* Link slides right slightly on hover — micro-interaction */
}

.footer__hours {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.hours__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  flex-wrap: wrap;
  gap: var(--space-sm);
}


/* ================================================================
   12. RESPONSIVE DESIGN (Media Queries)
   ================================================================
   
   Media queries apply styles ONLY when certain conditions are true.
   
   Syntax: @media (max-width: Xpx) { ... }
   
   This means: "If the screen is X pixels wide or LESS, apply these styles."
   
   We use a mobile-first approach with 3 breakpoints:
   - Tablet: 992px
   - Mobile: 768px  
   - Small mobile: 480px
================================================================ */

/* ---- TABLET (992px and below) ---- */
@media (max-width: 992px) {

  .about__grid {
    grid-template-columns: 1fr;
    /* Stack image and text vertically instead of side by side */
  }

  .about__text {
    padding-left: 0;
  }

  .about__badge {
    bottom: var(--space-sm);
    right: var(--space-sm);
  }

  .contact__grid {
    grid-template-columns: 1fr;
    /* Stack contact info and form vertically */
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    /* Footer: 2 columns instead of 4 */
  }

  .footer__brand {
    grid-column: span 2;
    /* Brand takes full width on tablet */
  }
}

/* ---- MOBILE (768px and below) ---- */
@media (max-width: 768px) {

  /* Navbar mobile behavior */
  .navbar {
    padding: 1rem var(--space-md);
    flex-wrap: wrap;
  }

  .navbar__hamburger {
    display: flex;
    /* Show hamburger icon on mobile */
  }

  .navbar__links {
    display: none;
    /* HIDE the nav links by default on mobile */
    width: 100%;
    flex-direction: column;
    /* Stack links vertically */
    align-items: flex-start;
    gap: 0;
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: var(--space-sm);
  }

  .navbar__links--open {
    display: flex;
    /* Show links when hamburger is clicked (JS adds this class) */
  }

  .navbar__links li {
    width: 100%;
    padding: 0.6rem 0;
  }

  .navbar__links li a {
    font-size: 1rem;
    border-bottom: none;
  }

  /* Hero mobile */
  .hero {
    padding: 7rem var(--space-md) var(--space-xl);
    text-align: center;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__ornament {
    display: none;
    /* Hide decorative circle on mobile — saves space */
  }

  /* Gallery mobile: single column */
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gallery__item--tall,
  .gallery__item--wide {
    grid-column: 1;
    grid-row: auto;
    /* Reset spanning — all items single column */
    height: 220px;
  }

  .gallery__item {
    height: 200px;
  }

  /* Form mobile: single column */
  .form__row {
    grid-template-columns: 1fr;
  }

  /* Footer mobile */
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__brand {
    grid-column: 1;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Adjust stats for mobile */
  .about__stats {
    flex-wrap: wrap;
    gap: var(--space-md);
  }
}

/* ---- SMALL MOBILE (480px and below) ---- */
@media (max-width: 480px) {

  .container {
    padding: 0 var(--space-md);
    /* Less horizontal padding on very small screens */
  }

  .menu__grid {
    grid-template-columns: 1fr;
    /* Single column menu on small phones */
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    /* Full-width buttons on very small screens */
    justify-content: center;
  }

  .hero__actions .btn {
    max-width: 280px;
  }
}


/* ================================================================
   13. SUBTLE ANIMATIONS
   ================================================================ */

@keyframes fadeInUp {
  /*
    @keyframes defines an animation sequence.
    "fadeInUp" is our custom animation name.
    from = starting state, to = ending state.
  */
  from {
    opacity: 0;
    transform: translateY(30px);
    /* Start invisible, 30px below */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    /* End fully visible, at normal position */
  }
}

.hero__content {
  animation: fadeInUp 0.8s ease 0.2s both;
  /*
    animation: name duration timing-function delay fill-mode
    - fadeInUp: our keyframe animation
    - 0.8s: takes 0.8 seconds
    - ease: starts fast, slows down
    - 0.2s: waits 0.2s before starting
    - both: applies animation state before AND after it runs
  */
}

/* Scroll-triggered animation class (added by JS) */
.fade-in {
  animation: fadeInUp 0.6s ease both;
}

/* ================================================================
   END OF STYLE.CSS
   ================================================================ */