/*
Theme Name: CHAR'D Divi Child
Template: Divi
Description: Brand layer for the CHAR'D Grill microsite. Content is edited in Divi; colours, type and layout live here.
Version: 0.3.1
Author: Worldxai
*/

/* ------------------------------------------------------------------ tokens */
:root {
  --chard-red: #B24734;   /* headlines, buttons (white text on it = 5.5:1) */
  --chard-navy: #0E1123;  /* body text (13.2:1 on beige) */
  --chard-beige: #E1D8C9; /* page background */
  --chard-sand: #EDE6DA;  /* lighter beige for alternate sections */
  --chard-ink-soft: rgba(14, 17, 35, .78);
  /* Brand fonts (HighVoltage Rough, American Typewriter) replace these once web licences arrive. */
  --chard-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --chard-body: "Courier Prime", "Courier New", Courier, monospace;
  --chard-header-h: 84px;
  --chard-gutter: clamp(20px, 4vw, 48px);
}

/* ------------------------------------------------------------------ base */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: calc(var(--chard-header-h) + 8px); }

body,
#page-container,
#et-main-area,
#main-content { background-color: var(--chard-beige); }

body {
  color: var(--chard-navy);
  font-family: var(--chard-body);
  font-size: 17px;
  line-height: 1.75;
}

.chard-section { font-family: var(--chard-body); color: var(--chard-navy); }

.chard-section h1,
.chard-section h2,
.chard-section h3 {
  font-family: var(--chard-display);
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--chard-red); /* red on beige is 3.9:1: headings only, never body copy */
  padding-bottom: .35em;
}
.chard-section h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); }
.chard-section h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.chard-section h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.chard-section p { font-size: 1.02rem; }
.chard-section a { color: var(--chard-red); text-decoration: underline; text-underline-offset: 3px; }
.chard-section a:hover,
.chard-section a:focus-visible { color: var(--chard-navy); }
.chard-section a[href^="mailto:"],
.chard-section a[href^="tel:"] { white-space: nowrap; }

.chard-eyebrow {
  font-family: var(--chard-body);
  font-weight: 700;
  font-size: .82rem !important;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--chard-navy);
  padding-bottom: .6em !important;
}
.chard-hours { font-weight: 700; letter-spacing: .04em; }
.chard-role { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-top: -.4em; }
.chard-small { font-size: .85rem !important; opacity: .8; }
.chard-center,
.chard-center .et_pb_text_inner,
.chard-center p,
.chard-center h1,
.chard-center h2,
.chard-center h3,
.chard-narrow .et_pb_text,
.chard-narrow .et_pb_text_inner,
.chard-hero .et_pb_text,
.chard-hero .et_pb_text_inner,
.chard-cards .et_pb_text_inner,
.chard-menu-cards .et_pb_text_inner { text-align: center !important; }
.chard-center h1, .chard-center h2, .chard-narrow h2 { margin-left: auto; margin-right: auto; }

/* Keyboard focus that is always visible */
.chard-section a:focus-visible,
.chard-section button:focus-visible {
  outline: 3px solid var(--chard-red);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ section rhythm */
.chard-section { padding: clamp(64px, 9vw, 120px) 0 !important; position: relative; }
.chard-section .chard-row { width: min(1140px, 100% - 2 * var(--chard-gutter)); max-width: none; padding: 0; }
.chard-section .chard-row + .chard-row { margin-top: clamp(28px, 4vw, 48px); }
.chard-narrow { width: min(760px, 100% - 2 * var(--chard-gutter)) !important; text-align: center; }
.chard-narrow.chard-wide { width: min(980px, 100% - 2 * var(--chard-gutter)) !important; }

.chard-bg-beige { background-color: var(--chard-beige) !important; }
.chard-bg-sand { background-color: var(--chard-sand) !important; }
.chard-bg-navy { background-color: var(--chard-navy) !important; color: var(--chard-beige); }
.chard-bg-navy p,
.chard-bg-navy .chard-eyebrow { color: var(--chard-beige); }
.chard-bg-navy a { color: var(--chard-beige); }
/* red on navy is 3.4:1, fine for large display headings */

/* Gastronomy Experience: photo background with a dark wash for legibility */
.chard-bg-photo {
  background: linear-gradient(rgba(14, 17, 35, .82), rgba(14, 17, 35, .9)),
              url("/wp-content/uploads/2026/10/gastronomy-experience-bg-chard-hq.jpg") center / cover no-repeat !important;
}
.chard-bg-photo p,
.chard-bg-photo .chard-eyebrow,
.chard-bg-photo h3 { color: var(--chard-beige); }

/* ------------------------------------------------------------------ buttons */
.chard-btn.et_pb_button,
.chard-btn .et_pb_button,
a.chard-btn {
  display: inline-block;
  background: var(--chard-red) !important;
  color: #fff !important;
  border: 2px solid var(--chard-red) !important;
  border-radius: 0 !important;
  font-family: var(--chard-display) !important;
  font-size: 1.25rem !important;
  letter-spacing: .08em;
  line-height: 1.2 !important;
  padding: .7em 1.6em !important;
  text-decoration: none !important;
  transition: background-color .2s, color .2s;
}
.chard-btn.et_pb_button:hover,
.chard-btn .et_pb_button:hover,
.chard-btn.et_pb_button:focus-visible,
.chard-btn .et_pb_button:focus-visible {
  background: var(--chard-navy) !important;
  border-color: var(--chard-navy) !important;
  padding: .7em 1.6em !important;
}
.chard-btn.et_pb_button::after,
.chard-btn .et_pb_button::after { display: none !important; }
.chard-bg-navy .chard-btn.et_pb_button:hover,
.chard-bg-navy .chard-btn .et_pb_button:hover,
.chard-bg-photo .chard-btn.et_pb_button:hover,
.chard-bg-photo .chard-btn .et_pb_button:hover { background: transparent !important; border-color: var(--chard-beige) !important; }

.chard-btn-outline.et_pb_button,
.chard-btn-outline .et_pb_button {
  background: transparent !important;
  color: var(--chard-beige) !important;
  border-color: var(--chard-beige) !important;
}
.chard-btn-outline.et_pb_button:hover,
.chard-btn-outline .et_pb_button:hover { background: var(--chard-red) !important; border-color: var(--chard-red) !important; }

.chard-section .et_pb_button_module_wrapper,
.chard-section .et_pb_button_wrapper { text-align: center; margin-top: 1.4em; }
.chard-feature .et_pb_button_module_wrapper,
.chard-contact .et_pb_button_module_wrapper { text-align: left; }

/* ------------------------------------------------------------------ header */
.chard-header {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: 10px 0 !important;
  background: rgba(14, 17, 35, .92) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}
body.admin-bar .chard-header { top: 32px; }
.chard-header .chard-header-row {
  display: flex !important;
  align-items: center;
  gap: 16px;
  width: min(1280px, 100% - 2 * var(--chard-gutter)) !important;
}
.chard-header .chard-header-row > .et_pb_column { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.chard-header .chard-header-row > .et_pb_column:nth-child(2) { flex: 1 1 auto; }
.chard-header .chard-logo img { height: 56px; width: auto; max-width: none; }
.chard-nav { list-style: none !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 0 !important; }
.chard-nav li { padding: 0; margin: 0; }
.chard-nav a {
  color: var(--chard-beige) !important;
  font-family: var(--chard-display);
  font-size: 1.15rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.chard-nav a:hover,
.chard-nav a:focus-visible { border-bottom-color: var(--chard-red); }
.chard-header .et_pb_button_module_wrapper { margin: 0; text-align: right; }
.chard-btn-header.et_pb_button,
.chard-btn-header .et_pb_button { font-size: 1.05rem !important; padding: .55em 1.2em !important; }

/* ------------------------------------------------------------------ hero */
.chard-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--chard-header-h) + 40px) 0 80px !important;
  background: var(--chard-navy) url("/wp-content/uploads/2026/10/hero-poster-hq.jpg") center / cover no-repeat !important;
  text-align: center;
}
.chard-hero .chard-hero-row,
.chard-hero .et_pb_row,
.chard-hero .et_pb_column,
.chard-hero .et_pb_code,
.chard-hero .et_pb_code_inner { position: static !important; }
.chard-hero .et_pb_code { margin: 0 !important; }
.chard-hero-video,
.chard-hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.chard-hero-video video { object-fit: cover; }
.chard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 35, .55) 0%, rgba(14, 17, 35, .35) 45%, rgba(14, 17, 35, .7) 100%);
  pointer-events: none;
  z-index: 1;
}
.chard-hero .et_pb_text,
.chard-hero .et_pb_button_module_wrapper { position: relative; z-index: 2; }
.chard-hero h1 { color: #fff !important; max-width: 14ch; margin: 0 auto; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.chard-hero .chard-eyebrow { color: var(--chard-beige) !important; }
@media (prefers-reduced-motion: reduce) { .chard-hero-video { display: none; } }

/* ------------------------------------------------------------------ about */
.chard-badge img { width: 150px; height: auto; margin: 8px auto 0; display: block; }
.chard-badge { text-align: center; }

/* ------------------------------------------------------------------ cards and splits */
.chard-cards,
.chard-split {
  display: grid !important;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}
.chard-cards { grid-template-columns: repeat(3, 1fr); align-items: start; }
.chard-split { grid-template-columns: 1fr 1fr; }
.chard-menu-cards { align-items: start; }
.chard-cards > .et_pb_column,
.chard-split > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; }

.chard-card-img img,
.chard-feature-img img { width: 100%; object-fit: cover; display: block; }
.chard-card-img img { aspect-ratio: 4 / 3; }
.chard-feature-img img { aspect-ratio: 4 / 5; }
.chard-menu-cards .chard-card-img img { aspect-ratio: 16 / 10; }
.chard-card-text { margin-top: 18px; }
.chard-card-text h3 { padding-bottom: .2em; }
.chard-cards .chard-card-text { text-align: center; }

.chard-promo-row { align-items: start; width: min(860px, 100% - 2 * var(--chard-gutter)) !important; }
.chard-promo-img img { width: 100%; height: auto; box-shadow: 0 18px 40px -20px rgba(14, 17, 35, .55); }

/* ------------------------------------------------------------------ gallery */
.chard-gallery .et_pb_gallery_items {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px;
}
.chard-gallery .et_pb_gallery_item {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}
.chard-gallery .et_pb_gallery_image img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.chard-gallery .et_pb_gallery_pagination { display: none; }

/* ------------------------------------------------------------------ reservations and map */
.chard-reserve {
  background: linear-gradient(rgba(14, 17, 35, .72), rgba(14, 17, 35, .88)),
              url("/wp-content/uploads/2026/10/gallery-chard-14-hq.jpg") center / cover no-repeat !important;
}
.chard-reserve h2 { color: #fff; }
.chard-reserve p,
.chard-reserve .chard-eyebrow { color: var(--chard-beige); }
.chard-reserve a { color: #fff; }
.chard-wide-card { width: min(1040px, 100% - 2 * var(--chard-gutter)) !important; }
.chard-booking-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6);
  border-top: 6px solid var(--chard-red);
}
.chard-sevenrooms { width: 100%; height: 760px; border: 0; background: #fff; display: block; }
.chard-booking-fallback { text-align: center; margin-top: 14px; font-size: .9rem !important; }
.chard-map { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; filter: grayscale(.2); }
.chard-contact .chard-split { align-items: stretch; }

/* ------------------------------------------------------------------ awards */
.chard-awards {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.chard-awards li { padding: 0; margin: 0; }
.chard-awards img {
  width: clamp(96px, 12vw, 150px);
  height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
}

/* ------------------------------------------------------------------ footer */
.chard-footer { background: #090b17 !important; color: var(--chard-beige); padding: 56px 0 40px !important; }
.chard-footer p { color: var(--chard-beige); }
.chard-footer a { color: var(--chard-beige) !important; }
.chard-footer-logo img { width: 180px; height: auto; margin: 0 auto 12px; display: block; }
.chard-footer-logo { text-align: center; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 980px) {
  :root { --chard-header-h: 120px; }
  .chard-header .chard-header-row { flex-wrap: wrap; justify-content: space-between; }
  .chard-header .chard-header-row > .et_pb_column:nth-child(2) { order: 3; flex: 1 0 100%; }
  .chard-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px !important; scrollbar-width: none; }
  .chard-nav a { font-size: 1rem; white-space: nowrap; }
  .chard-header .chard-logo img { height: 44px; }
  .chard-cards { grid-template-columns: 1fr; }
  .chard-split { grid-template-columns: 1fr; }
  .chard-reverse .chard-split > .et_pb_column:first-child { order: 2; }
  .chard-gallery .et_pb_gallery_items { grid-template-columns: repeat(3, 1fr) !important; }
  .chard-sevenrooms { height: 820px; }
  .chard-feature .et_pb_button_module_wrapper,
  .chard-contact .et_pb_button_module_wrapper { text-align: center; }
  .chard-feature .et_pb_text,
  .chard-contact .et_pb_text { text-align: center; }
}
@media (max-width: 782px) { body.admin-bar .chard-header { top: 46px; } }
@media (max-width: 600px) {
  .chard-gallery .et_pb_gallery_items { grid-template-columns: repeat(2, 1fr) !important; }
  .chard-header .chard-header-row > .et_pb_column:nth-child(3) .et_pb_button { font-size: .95rem !important; padding: .5em .9em !important; }
}