/* contact.css — 888 Taste Show Contact Page Styles */
/* Upload to public_html alongside style.css */

/* ── CONTACT PAGE SPECIFIC STYLES ── */
.contact-page-hero {
  min-height: 55vh;
  padding-top: 50px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: url('images/cont-img1.jpg') center center / cover no-repeat;
}
.contact-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.8) 100%);
  pointer-events: none;
}
.contact-page-hero-inner { max-width: 720px; padding: 0 30px; position: relative; z-index: 1; }
.contact-page-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}
.contact-page-hero h1 em { font-style: italic; color: var(--gold); }
.contact-page-hero p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
}

/* MAIN GRID */
.contact-main {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* INFO SIDE */
.contact-info-section { display: flex; flex-direction: column; gap: 36px; }

.contact-info-card {
  background: var(--dark2);
  border-radius: 18px;
  padding: 32px 36px;
  border: 1px solid rgba(201,151,58,0.12);
}
.contact-info-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-info-card h2 .card-icon { font-size: 1.1rem; }
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}
.contact-info-row:last-child { margin-bottom: 0; }
.contact-info-icon { color: var(--gold); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.contact-info-row strong { color: var(--text); display: block; margin-bottom: 2px; font-size: 0.9rem; }
.contact-info-row a { color: var(--gold); text-decoration: none; }
.contact-info-row a:hover { text-decoration: underline; }

/* NDK badge */
.ndk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,151,58,0.1);
  border: 1px solid rgba(201,151,58,0.25);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 0.76rem;
  color: var(--gold);
  margin-top: 10px;
  width: fit-content;
}

/* WHY VISIT */
.why-visit-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.why-visit-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.why-visit-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(201,151,58,0.1);
  border: 1px solid rgba(201,151,58,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.why-visit-text strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 3px;
}
.why-visit-text span { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }

/* FORM SIDE */
.contact-form-section {}
.contact-form-box {
  background: var(--dark2);
  border-radius: 18px;
  padding: 40px 36px;
  border: 1px solid rgba(201,151,58,0.15);
  position: sticky;
  top: 90px;
}
.contact-form-box .section-label { margin-bottom: 8px; }
.contact-form-box .form-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 28px;
}
.contact-form-box .form-title em { font-style: italic; color: var(--gold); }

/* MAP */
.contact-map-section {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 60px;
}
.contact-map-section .section-header { margin-bottom: 24px; }
.contact-map-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(201,151,58,0.15);
  line-height: 0;
}
.contact-map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }

/* HOURS BADGE */
.hours-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(40,160,80,0.12);
  border: 1px solid rgba(40,160,80,0.3);
  border-radius: 50px;
  padding: 5px 16px;
  font-size: 0.76rem;
  color: #6fdb9a;
  font-weight: 600;
  margin-top: 8px;
}
.hours-badge::before { content: '●'; font-size: 0.5rem; }

/* ABOUT TEXT SECTION */
.contact-about-text { max-width:1200px;margin:0 auto 60px;padding:0 60px; }
.contact-about-inner { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start; }
.contact-about-copy .section-label { margin-bottom:10px; }
.contact-about-copy .section-title { margin-bottom:24px; }
.contact-about-para { font-size:0.92rem;color:rgba(232,224,208,0.8);line-height:1.85;margin-bottom:16px; }
.contact-about-badges { display:flex;flex-direction:column;gap:12px;padding-top:8px; }
.contact-badge { display:flex;align-items:flex-start;gap:14px;background:var(--dark2);border:1px solid rgba(201,151,58,0.12);border-radius:12px;padding:14px 18px; }
.cb-icon { font-size:1.2rem;flex-shrink:0;margin-top:1px; }
.cb-text { font-size:0.84rem;color:var(--text);line-height:1.5; }

/* FAQ SECTION */
.contact-faq-section { max-width:1200px;margin:0 auto 70px;padding:0 60px; }
.contact-faq-inner {}
.faq-list { display:flex;flex-direction:column;gap:0; }
.faq-item { border-bottom:1px solid rgba(255,255,255,0.07); }
.faq-item:first-child { border-top:1px solid rgba(255,255,255,0.07); }
.faq-q { width:100%;background:none;border:none;color:var(--text);padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:500;text-align:left;transition:color .2s; }
.faq-q:hover { color:var(--gold); }
.faq-q[aria-expanded="true"] { color:var(--gold); }
.faq-arrow { font-size:1.3rem;color:var(--gold);transition:transform .25s;flex-shrink:0; }
.faq-q[aria-expanded="true"] .faq-arrow { transform:rotate(90deg); }
.faq-a { display:none;padding-bottom:20px; }
.faq-a p { font-size:0.88rem;color:var(--muted);line-height:1.8; }
.faq-a.open { display:block; }

@media(max-width:1100px) {
  .contact-about-text,.contact-faq-section { padding-left:30px;padding-right:30px; }
}
@media(max-width:860px) {
  .contact-about-text { padding:0 20px;margin-bottom:40px; }
  .contact-about-inner { grid-template-columns:1fr;gap:28px; }
  .contact-faq-section { padding:0 20px;margin-bottom:50px; }
  .faq-q { font-size:0.88rem;padding:16px 0; }
}

/* CONTACT PHOTO STRIP */
.contact-photos-section {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 60px;
}
.contact-photos-header { margin-bottom: 28px; }
.contact-photos-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 14px;
}
.cp-img {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.cp-img-wide { grid-row: span 2; }
.cp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.82);
  transition: transform .35s, filter .3s;
}
.cp-img:hover img { transform: scale(1.05); filter: brightness(1); }
.cp-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
@media(max-width: 1100px) {
  .contact-photos-section { padding-left: 30px; padding-right: 30px; }
}
@media(max-width: 860px) {
  .contact-photos-section { padding: 0 20px; margin-bottom: 50px; }
  .contact-photos-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
  }
  .cp-img-wide { grid-column: span 2; grid-row: span 1; }
}
@media(max-width: 480px) {
  .contact-photos-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cp-img { aspect-ratio: 4/3; }
  .cp-img-wide { grid-column: span 1; }
}

/* BREADCRUMB */

/* LANG SWITCHER BUTTON */
.lang-switcher-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 50px; padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; color: var(--text); font-family: 'DM Sans',sans-serif; transition: all .2s; }
.lang-switcher-btn:hover { background: rgba(201,151,58,0.15); border-color: var(--gold); }

/* RESPONSIVE */

/* Tablet */
@media(max-width: 1100px) {
  .contact-main { padding-left: 30px; padding-right: 30px; gap: 40px; }
  .contact-map-section { padding-left: 30px; padding-right: 30px; }
  .contact-page-hero { padding-left: 30px; padding-right: 30px; }
  .contact-info-card { padding: 26px 28px; }
  .contact-form-box { padding: 36px 30px; }
}

/* Mobile */
@media(max-width: 860px) {
  /* Hero */
  .contact-page-hero { padding-top: 80px; padding-bottom: 36px; padding-left: 20px; padding-right: 20px; min-height: auto; }
  .contact-page-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  
  

  /* Nav adjustments — cookie bar below nav */
  body.cookie-visible nav { top: 0; }

  /* Main grid stacks */
  .contact-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 20px;
    margin-bottom: 50px;
  }

  /* Info cards */
  .contact-info-section { gap: 20px; }
  .contact-info-card { padding: 22px 20px; border-radius: 14px; }
  .contact-info-card h2 { font-size: 1.05rem; margin-bottom: 16px; }
  .contact-info-row { gap: 10px; margin-bottom: 14px; font-size: 0.84rem; }
  .why-visit-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
  .why-visit-list { gap: 14px; }

  /* Form */
  .contact-form-section { order: -1; } /* form appears ABOVE info on mobile */
  .contact-form-box {
    position: static;
    padding: 26px 20px;
    border-radius: 14px;
  }
  .contact-form-box .form-title { font-size: 1.4rem; margin-bottom: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .form-group input,
  .form-group select { height: 48px; font-size: 0.85rem; }
  .btn-confirm { padding: 14px; font-size: 0.88rem; }

  /* Map */
  .contact-map-section { padding: 0 20px; margin-bottom: 50px; }
  .contact-map-wrap iframe { height: 300px; }

  /* Footer */
  footer { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px 24px; }
  .footer-bottom { padding: 16px 20px; }
}

/* Small mobile */
@media(max-width: 480px) {
  .contact-page-hero h1 { font-size: 1.6rem; }
  .contact-page-hero p { font-size: 0.85rem; }
  .ndk-badge { font-size: 0.7rem; }
  .hours-badge { font-size: 0.7rem; }
  .contact-info-row a { word-break: break-all; }
  .why-visit-item { gap: 10px; }
  .contact-map-wrap iframe { height: 260px; }
  .contact-form-box { padding: 22px 16px; }
  .consent-text { font-size: 0.74rem; }
}
/* CARD IMAGES */
.contact-card-img {
  width: calc(100% + 72px);
  margin: -32px -36px 24px -36px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  aspect-ratio: 16/7;
}
.contact-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.88);
  transition: transform .3s;
}
.contact-card-img:hover img { transform: scale(1.03); filter: brightness(1); }
@media(max-width: 860px) {
  .contact-card-img { width: calc(100% + 40px); margin: -22px -20px 18px -20px; border-radius: 14px 14px 0 0; }
}

/* ── SITETOP SYSTEM (shared rule — do not override per page) ── */
/* These rules are referenced here for contact pages.
   The canonical version lives in style.css for all pages.     */

/* BREADCRUMB — compact strip below siteTop */
#breadcrumbNav {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,151,58,0.15);
  /* top is set dynamically by site.js recalcSiteTop() */
}
.breadcrumb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 60px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.breadcrumb-inner a, #breadcrumbInner a {
  color: var(--gold);
  text-decoration: none;
  transition: opacity .2s;
}
.breadcrumb-inner a:hover, #breadcrumbInner a:hover { opacity: 0.75; }
.bc-sep { color: var(--muted); opacity: 0.45; font-size: 0.8rem; }
.bc-current { color: var(--text); }

/* Responsive breadcrumb */
@media(max-width: 860px) {
  .breadcrumb-inner { padding: 5px 20px; font-size: 0.68rem; gap: 5px; }
}
@media(max-width: 480px) {
  .breadcrumb-inner { padding: 4px 14px; font-size: 0.64rem; }
}