/* ============================================================
   La Isla Cuisine — Isla Color-Block theme
   Evolved from the 2017-2022 Newave one-page parallax design:
   sky-blue nav, deep-red welcome, sand menu blocks, charcoal bar
   ============================================================ */

:root {
  /* Brand colors (from original theme, refined) */
  --isla-blue: #2aace2;
  --isla-blue-dark: #1283b8;
  --isla-blue-deep: #0d6c9a;
  --isla-blue-pale: #b1e0f4;
  --isla-blue-wash: #eaf7fd;
  --isla-red: #980b11;
  --isla-red-dark: #7c090e;
  --isla-cyan: #00aeef;
  --isla-cyan-hover: #369ebb;
  --isla-green: #0a9601;
  --isla-sand: #f0ece4;
  --isla-sand-deep: #e6dfd2;
  --isla-charcoal: #1f1e1b;
  --isla-charcoal-2: #181714;
  --isla-warmgray: #d5d0ca;

  /* Text */
  --text-primary: #33312d;
  --text-secondary: #6e6a63;
  --text-faint: #999999;

  /* Type */
  --font-head: "Montserrat", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --font-accent: "Lora", Georgia, serif;

  --nav-height: 74px;
  --radius-pill: 22px;
}

html { background: #ffffff; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-primary);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  line-height: 1.25;
  color: inherit;
}

a { color: var(--isla-blue-dark); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--isla-cyan); }

/* ------------------------------------------------------------
   Fixed top navigation — sky blue with white logo block
   ------------------------------------------------------------ */
.isla-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--isla-blue);
  box-shadow: 0 2px 14px rgba(13, 108, 154, .28);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.brand { display: inline-flex; align-items: center; }

.brand-box {
  background: #ffffff;
  color: var(--isla-blue-deep);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: .45rem 1rem .5rem;
  line-height: 1.05;
  border-bottom: 4px solid var(--isla-red);
}

.brand-top {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.brand-bottom {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .82rem;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--isla-red);
}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
}

.nav-menu > li { position: relative; }

.nav-menu a {
  display: block;
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: .55rem .7rem;
  border-bottom: 2px solid transparent;
}

.nav-menu a:hover,
.nav-menu a.is-current { color: #ffffff; border-bottom-color: #ffffff; }

.nav-menu a.is-active-spy { border-bottom-color: var(--isla-blue-pale); }

.nav-menu .nav-cta {
  background: var(--isla-blue-pale);
  color: var(--isla-blue-deep);
  border-radius: var(--radius-pill);
  border-bottom: none;
  padding: .55rem 1.15rem;
  margin-left: .35rem;
}

.nav-menu .nav-cta:hover { background: #ffffff; color: var(--isla-blue-deep); border-bottom: none; }

/* Dropdown */
.has-dropdown .dropdown {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  position: absolute;
  top: 100%; left: 0;
  min-width: 200px;
  background: #ffffff;
  border-top: 3px solid var(--isla-cyan);
  box-shadow: 0 12px 28px rgba(31, 30, 27, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  color: var(--text-primary);
  font-size: .72rem;
  padding: .5rem 1.1rem;
  border-bottom: none;
}

.dropdown a:hover { color: var(--isla-blue-dark); background: var(--isla-blue-wash); border-bottom: none; }

.has-dropdown > a .fa-chevron-down { font-size: .55rem; margin-left: .3rem; vertical-align: middle; }

/* Burger */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: .5rem;
}

.nav-burger span {
  display: block;
  width: 26px; height: 3px;
  background: #ffffff;
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2) { opacity: 0; }
.nav-burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------------------
   Homepage hero slider
   ------------------------------------------------------------ */
.hero-slider {
  position: relative;
  min-height: 100vh;
  background: var(--isla-charcoal);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 35, 48, .42) 0%, rgba(13, 35, 48, .18) 45%, rgba(13, 35, 48, .62) 100%);
}

.hero-copy {
  position: relative;
  z-index: 5;
  text-align: center;
  color: #ffffff;
  padding: calc(var(--nav-height) + 2rem) 1.25rem 4rem;
  max-width: 1000px;
}

.hero-site-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
  color: var(--isla-blue-pale);
}

.hero-kicker {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  display: block;
  margin-bottom: .45rem;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.hero-caption {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .5);
}

.hero-caption-wrap { display: none; }
.hero-caption-wrap.is-active { display: block; animation: heroRise 1s ease both; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-dots {
  position: absolute;
  bottom: 2.2rem;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: .6rem;
  z-index: 6;
}

.hero-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}

.hero-dot.is-active { background: #ffffff; }

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: 2.2rem;
  z-index: 6;
  color: #ffffff;
  font-size: 1.3rem;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ------------------------------------------------------------
   One-page color-blocked sections (homepage)
   ------------------------------------------------------------ */
main { display: block; }

.page-offset { padding-top: var(--nav-height); }

main > section, .home-sections > section {
  padding: 4.5rem 1.5rem;
  scroll-margin-top: var(--nav-height);
}

main > section > *, .home-sections > section > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Section headings */
.home-sections h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 auto 1rem;
}

.home-sections h2::after {
  content: "";
  display: block;
  width: 54px; height: 4px;
  margin: .9rem auto 0;
  background: var(--isla-cyan);
}

.home-sections h3 {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .5px;
  color: var(--isla-red);
  margin: 2.4rem auto 0.6rem;
  text-align: center;
}

/* Menu dish lines */
.home-sections h4, .menu-card h4, .page-content h4 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-primary);
  border-left: 3px solid var(--isla-cyan);
  padding-left: .8rem;
  margin: 1.7rem auto .35rem;
}

.home-sections h4 + p, .menu-card h4 + p { margin-top: 0; color: var(--text-secondary); }

/* Welcome — deep red block */
#welcome-section {
  background: linear-gradient(160deg, var(--isla-red) 0%, var(--isla-red-dark) 100%);
  color: #ffffff;
}

#welcome-section h2 { color: #ffffff; }
#welcome-section h2::after { background: var(--isla-blue-pale); }
#welcome-section a { color: var(--isla-blue-pale); text-decoration: underline; }
#welcome-section a:hover { color: #ffffff; }

#welcome-section blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.75;
  border: none;
  background: rgba(255, 255, 255, .07);
  padding: 1.6rem 2rem;
  margin: 1.6rem auto;
  border-left: 4px solid var(--isla-blue-pale);
}

#welcome-section blockquote p { margin: 0; }

/* Sand menu blocks */
#menu, #lunch-specials { background: var(--isla-sand); }
#menu h4, #lunch-specials h4 { background: transparent; }

/* Charcoal bar blocks */
#cocktails, #happy-hour, #gift-cards {
  background: var(--isla-charcoal);
  color: var(--isla-warmgray);
}

#happy-hour { background: var(--isla-charcoal-2); }

#cocktails h2, #happy-hour h2, #gift-cards h2,
#cocktails h4, #happy-hour h4 { color: #ffffff; }

#cocktails h3, #happy-hour h3 { color: var(--isla-blue-pale); }

#cocktails a, #happy-hour a, #gift-cards a { color: var(--isla-cyan); }
#cocktails a:hover, #happy-hour a:hover, #gift-cards a:hover { color: var(--isla-blue-pale); }

#happy-hour ul { padding-left: 1.1rem; }
#happy-hour li { margin-bottom: .45rem; }
#happy-hour li strong { color: #ffffff; }

/* News band — cyan */
#read-all-news {
  background: linear-gradient(135deg, var(--isla-cyan) 0%, var(--isla-blue) 100%);
  color: #ffffff;
  text-align: center;
}

#read-all-news h2 { color: #ffffff; }
#read-all-news h2::after { background: #ffffff; }
#read-all-news a { color: #ffffff; text-decoration: underline; font-weight: 700; }

/* Order online — pale blue wash */
#order-online { background: var(--isla-blue-wash); text-align: center; }

/* Contact */
#contact h3 {
  color: var(--isla-blue-dark);
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.05rem;
}

/* Gift cards */
#gift-cards { text-align: center; }

/* Lists in light sections */
.home-sections ul { padding-left: 1.2rem; }
.home-sections li { margin-bottom: .4rem; }

/* ------------------------------------------------------------
   Subpage banner (hero image) and color-band headers
   ------------------------------------------------------------ */
.page-banner {
  position: relative;
  min-height: 46vh;
  margin-top: var(--nav-height);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-banner .banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 35, 48, .14) 0%, rgba(13, 35, 48, .68) 100%);
  z-index: 1;
}

.page-banner .banner-copy {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 5rem 1.5rem 2.6rem;
  color: #ffffff;
}

.page-band {
  margin-top: var(--nav-height);
  background: linear-gradient(150deg, var(--isla-blue) 0%, var(--isla-blue-deep) 100%);
  color: #ffffff;
}

.page-band.band-charcoal { background: linear-gradient(150deg, #2c2a26 0%, var(--isla-charcoal-2) 100%); }
.page-band.band-red { background: linear-gradient(150deg, var(--isla-red) 0%, var(--isla-red-dark) 100%); }

.page-band .banner-copy {
  max-width: 980px;
  margin: 0 auto;
  padding: 4.2rem 1.5rem 3rem;
}

.banner-kicker {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  display: block;
  margin-bottom: .4rem;
  color: var(--isla-blue-pale);
}

.page-banner .banner-kicker { color: #ffffff; }

.banner-copy h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------
   Subpage content area
   ------------------------------------------------------------ */
.page-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.2rem 1.5rem 4.5rem;
}

.page-content h2 {
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--isla-blue-deep);
  margin: 2.6rem 0 .8rem;
}

.page-content h2::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin-top: .55rem;
  background: var(--isla-cyan);
}

.page-content h3 {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--isla-red);
  margin: 1.9rem 0 .5rem;
}

.page-content h3 a { color: inherit; }
.page-content h3 a:hover { color: var(--isla-cyan); }

.page-content ul { padding-left: 1.2rem; }
.page-content li { margin-bottom: .45rem; }

.page-content a { font-weight: 600; }

/* Menus page: white card on sand */
.menus-bg { background: var(--isla-sand); }

.menu-card {
  background: #ffffff;
  max-width: 880px;
  margin: -3.2rem auto 4.5rem;
  position: relative;
  z-index: 3;
  padding: 3rem clamp(1.25rem, 5vw, 3.5rem) 3.5rem;
  box-shadow: 0 18px 44px rgba(31, 30, 27, .14);
  border-top: 5px solid var(--isla-cyan);
}

.menu-card h2 {
  font-weight: 800;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--isla-red);
  text-align: center;
  margin: 3rem 0 .6rem;
}

.menu-card h2::after {
  content: "";
  display: block;
  width: 50px; height: 3px;
  margin: .7rem auto 0;
  background: var(--isla-cyan);
}

.menu-card h2:first-of-type { margin-top: .5rem; }

.menu-card h3 {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--isla-blue-dark);
  text-align: center;
  margin: 1.9rem 0 .4rem;
}

.inline-figure { margin: 2.6rem 0; }

.inline-figure img { width: 100%; box-shadow: 0 14px 34px rgba(31, 30, 27, .18); }

.inline-figure figcaption {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .92rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: .7rem;
}

/* Blog article */
.article-meta em { color: var(--text-secondary); }

/* ------------------------------------------------------------
   Footer — charcoal with brand block
   ------------------------------------------------------------ */
.isla-footer {
  background: var(--isla-charcoal);
  color: var(--isla-warmgray);
  padding: 4rem 1.5rem 0;
}

.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-brand .brand-box { border-bottom-color: var(--isla-cyan); }

.footer-tagline {
  font-family: var(--font-accent);
  font-style: italic;
  margin-top: 1.1rem;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--isla-warmgray);
}

.isla-footer h4 {
  color: #ffffff;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 1rem;
}

.isla-footer ul { list-style: none; margin: 0; padding: 0; }
.isla-footer li { margin-bottom: .55rem; }

.isla-footer a { color: var(--isla-warmgray); font-size: .95rem; }
.isla-footer a:hover { color: var(--isla-cyan); }

.footer-bottom {
  border-top: 1px solid rgba(213, 208, 202, .18);
  text-align: center;
  padding: 1.4rem 0 1.6rem;
  font-size: .85rem;
  color: var(--text-faint);
}

/* Back to top pill */
.back-to-top {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 900;
  background: var(--isla-cyan);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  padding: .65rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(0, 174, 239, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s;
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--isla-cyan-hover); }

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */
.error-hero {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--isla-charcoal) 0%, var(--isla-charcoal-2) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem;
}

.error-hero .error-code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(5rem, 16vw, 9rem);
  letter-spacing: 6px;
  color: var(--isla-cyan);
  line-height: 1;
  margin: 0;
}

.error-hero h1 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  margin: 1rem 0 .6rem;
}

.error-hero p { color: var(--isla-warmgray); max-width: 520px; margin: 0 auto 1.8rem; }

.error-links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.btn-isla {
  display: inline-block;
  background: var(--isla-cyan);
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: .8rem 1.6rem;
  transition: background .2s ease;
}

.btn-isla:hover { background: var(--isla-cyan-hover); color: #ffffff; }

.btn-isla.btn-outline {
  background: transparent;
  border: 2px solid var(--isla-green);
  color: #ffffff;
}

.btn-isla.btn-outline:hover { background: var(--isla-green); }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .nav-menu a { font-size: .7rem; padding: .5rem .5rem; }
}

@media (max-width: 900px) {
  .nav-burger { display: block; }

  .nav-menu {
    position: absolute;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--isla-blue-dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem 0 1rem;
    display: none;
    box-shadow: 0 16px 30px rgba(13, 108, 154, .35);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }

  .nav-menu.is-active { display: flex; }

  .nav-menu a { font-size: .85rem; padding: .8rem 1.5rem; border-bottom: none; }

  .nav-menu .nav-cta { margin: .6rem 1.5rem 0; text-align: center; }

  .has-dropdown .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: none;
    background: rgba(255, 255, 255, .08);
    display: none;
  }

  .has-dropdown.is-open .dropdown { display: block; }

  .dropdown a { color: var(--isla-blue-pale); padding-left: 2.6rem; }
  .dropdown a:hover { background: transparent; color: #ffffff; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

  .hero-scroll { display: none; }
}

@media (max-width: 600px) {
  main > section, .home-sections > section { padding: 3.2rem 1.15rem; }
  .menu-card { margin-top: -2rem; }
  .page-banner { min-height: 38vh; }
  .back-to-top { bottom: 1rem; right: 1rem; }
}