.elementor-kit-8{--e-global-color-primary:#673534;--e-global-color-secondary:#1A1A1A;--e-global-color-text:#1A1A1A;--e-global-color-accent:#E78C56;--e-global-color-cream:#F8E7C7;--e-global-color-creamsoft:#FDF6E9;--e-global-color-bark:#4E423C;--e-global-color-fire:#DC4E34;--e-global-color-white:#FFFFFF;--e-global-color-muted:#6B5F58;--e-global-color-hairline:#E2CFAC;--e-global-typography-primary-font-family:"Empera";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.06em;--e-global-typography-primary-letter-spacing:0.5px;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.72em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:1.6px;color:#1A1A1A;font-family:"Montserrat", Sans-serif;font-size:17px;font-weight:400;line-height:1.72em;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#673534;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:#F8E7C7;border-radius:4px 4px 4px 4px;padding:18px 34px 18px 34px;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#673534;}.elementor-kit-8 a:hover{color:#DC4E34;}.elementor-kit-8 h1{font-family:"Empera", Sans-serif;font-size:72px;font-weight:400;line-height:1.04em;}.elementor-kit-8 h2{font-family:"Empera", Sans-serif;font-size:46px;font-weight:400;line-height:1.1em;}.elementor-kit-8 h3{font-family:"Empera", Sans-serif;font-size:28px;font-weight:400;line-height:1.18em;}.elementor-kit-8 h4{font-family:"Montserrat", Sans-serif;font-size:19px;font-weight:600;line-height:1.4em;}.elementor-kit-8 h5{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;}.elementor-kit-8 h6{font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{color:#1A1A1A;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-8{font-size:16.5px;}.elementor-kit-8 h1{font-size:52px;}.elementor-kit-8 h2{font-size:38px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{font-size:16px;}.elementor-kit-8 h1{font-size:38px;}.elementor-kit-8 h2{font-size:30px;}.elementor-kit-8 h3{font-size:23px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== Charcoda site CSS =====
   Only what Elementor controls cannot do natively.
   1) eyebrow rule   2) prose rhythm   3) anchor scroll offset
   4) sticky header  5) Gravity Forms brand skin  6) focus states
   plus small fixes for logo sizing and the accordion. */

/* 3) In-page anchor navigation.
   Elementor core ships `html { scroll-behavior: smooth }` in frontend.min.css.
   On this page that fights whatever handles the nav-menu anchor clicks and the
   page stops scrolling altogether, so it is forced back to `auto`. Anchors then
   jump instantly and land 84px down, clearing the sticky header. */
html { scroll-behavior: auto !important; }
.ch-sec, #top { scroll-margin-top: 84px; }

/* 1) Eyebrow label with ember tick, echoing the brand guide section headers */
.ch-eyebrow {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 1.7px; text-transform: uppercase; color: #673534;
  margin: 0; display: flex; align-items: center; gap: 12px;
}
.ch-eyebrow::before { content: ''; width: 22px; height: 3px; background: #E78C56; flex: none; }
.ch-eyebrow--light { color: #E2CFAC; }

/* 2) Prose rhythm */
.ch-lead p { font-size: 19px; line-height: 1.68; color: #4E423C; margin: 0 0 1em; max-width: 62ch; }
.ch-lead p:last-child { margin-bottom: 0; }
.ch-lead--light p { color: #C9BCAE; }
.ch-body p { font-size: 16px; line-height: 1.75; color: #4E423C; margin: 0 0 1em; max-width: 66ch; }
.ch-body p:last-child { margin-bottom: 0; }
.ch-body--light p { color: #B8AA9B; }
.ch-statement { font-size: 19px; line-height: 1.66; color: #F0E2CC; margin: 0; max-width: 52ch; }
.ch-pull__text { font-size: 17px; line-height: 1.66; color: #1A1A1A; margin: 0; }
.ch-addr { font-size: 16px; line-height: 1.85; color: #4E423C; margin: 0 0 1em; }
.ch-addr:last-child { margin-bottom: 0; }
.ch-addr a { color: #673534; text-decoration: none; border-bottom: 1px solid #E2CFAC; }
.ch-addr a:hover { color: #DC4E34; border-bottom-color: #DC4E34; }

/* Pull quotes inside the pillar cards */
.ch-quote { margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid #EFE3CC; }
.ch-quote p { font-size: 15.5px; line-height: 1.62; font-style: italic; color: #1A1A1A; margin: 0 0 8px; }
.ch-quote cite { font-style: normal; font-size: 13px; letter-spacing: .4px; color: #6B5F58; }

/* Cards lift very slightly on hover */
.ch-card, .ch-pillar, .ch-dish { transition: transform .25s ease, box-shadow .25s ease; }
.ch-card:hover, .ch-pillar:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,26,26,.07); }
.ch-dish:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .ch-card, .ch-pillar, .ch-dish { transition: none; }
  .ch-card:hover, .ch-pillar:hover, .ch-dish:hover { transform: none; }
}

/* 4) Sticky header.
   Native position:sticky rather than Elementor's sticky option, which clones the
   element into a spacer and would duplicate the id and every nav link in the DOM. */
header.elementor-location-header { position: sticky; top: 0; z-index: 200; }
.ch-header { box-shadow: 0 1px 0 rgba(248, 231, 199, .08); }

/* Hero headline: tighten the optical gap Empera leaves above caps */
.ch-hero__title { margin-top: -.08em; }

/* 5) Gravity Forms - brand skin.
   GF 2.10 ships the "orbital" theme and defines its tokens on .gform-theme--framework,
   so the overrides below are doubled up on the wrapper class to win on specificity. */
.gform_wrapper.gform-theme--framework,
.gform_wrapper.gform-theme--orbital,
.gform_wrapper.gform_wrapper {
  --gf-color-primary: #673534;
  --gf-color-primary-rgb: 103, 53, 52;
  --gf-color-primary-contrast: #F8E7C7;
  --gf-color-in-ctrl-primary: #673534;
  --gf-color-in-ctrl-primary-rgb: 103, 53, 52;
  --gf-ctrl-accent-color: #673534;
  --gf-ctrl-bg-color: #FFFDF8;
  --gf-ctrl-color: #1A1A1A;
  --gf-ctrl-border-color: #DFD3BC;
  --gf-ctrl-border-color-focus: #673534;
  --gf-ctrl-border-color-hover: #C9B896;
  --gf-ctrl-outline-color-focus: rgba(103, 53, 52, .35);
  --gf-ctrl-radius: 4px;
  --gf-ctrl-label-color-primary: #1A1A1A;
  --gf-ctrl-desc-color: #6B5F58;
  --gf-ctrl-choice-check-color: #673534;
  --gf-ctrl-btn-radius: 4px;
  --gf-ctrl-btn-bg-color-primary: #673534;
  --gf-ctrl-btn-bg-color-hover-primary: #E78C56;
  --gf-ctrl-btn-bg-color-focus-primary: #673534;
  --gf-ctrl-btn-color-primary: #F8E7C7;
  --gf-ctrl-btn-color-hover-primary: #1A1A1A;
  --gf-ctrl-btn-color-focus-primary: #F8E7C7;
  --gf-ctrl-btn-border-color-focus-primary: #E78C56;
  --gf-ctrl-btn-bg-color-ctrl: #673534;
  --gf-ctrl-btn-bg-color-hover-ctrl: #E78C56;
  --gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #E78C56;
  --gf-form-spinner-fg-color: #673534;
  --gf-form-spinner-bg-color: rgba(103, 53, 52, .1);
  font-family: 'Montserrat', sans-serif;
}
#contact .gform_wrapper .gfield_label {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: 1.1px; text-transform: uppercase; color: #1A1A1A; margin-bottom: 8px;
}
/* Form is rendered with GF's lighter legacy theme (theme="gravity-theme" on the
   shortcode) rather than orbital: it saves ~500KB of framework CSS for a 5-field
   form. These rules restore the spacing orbital gave us for free. */
#contact .gform_wrapper .gfield { margin-bottom: 22px; }
#contact .gform_wrapper .gfield:last-child { margin-bottom: 6px; }
#contact .gform_wrapper .gfield_description,
#contact .gform_wrapper .instruction { font-size: 13px; color: #6B5F58; margin-top: 6px; padding-top: 0; }
#contact .gform_wrapper .gform_footer { margin-top: 6px; padding-top: 0; }
#contact .gform_wrapper .gfield_required {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-style: normal;
  color: #A8543F; margin-left: 6px;
}
#contact .gform_wrapper input[type=text],
#contact .gform_wrapper input[type=email],
#contact .gform_wrapper input[type=tel],
#contact .gform_wrapper select,
#contact .gform_wrapper textarea {
  font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.5;
  background: #FFFDF8; border: 1px solid #DFD3BC; border-radius: 4px;
  color: #1A1A1A; padding: 14px 15px; box-shadow: none;
}
#contact .gform_wrapper textarea { min-height: 150px; }
/* The select needs its own height: GF's fixed control height clipped the option text. */
#contact .gform_wrapper select {
  height: auto; min-height: 52px; line-height: 1.4; padding: 14px 42px 14px 15px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23673534' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 13px 8px;
}
#contact .gform_wrapper input::placeholder,
#contact .gform_wrapper textarea::placeholder { color: #A2968C; }
#contact .gform_wrapper input:focus,
#contact .gform_wrapper select:focus,
#contact .gform_wrapper textarea:focus {
  border-color: #673534; outline: 3px solid rgba(103, 53, 52, .3); outline-offset: 1px;
}
/* GF 3.0 switched the submit control from <input> to <button>, so both are targeted. */
#contact .gform_wrapper .gform_footer input[type=submit],
#contact .gform_wrapper .gform_footer button[type=submit],
#contact .gform_wrapper .gform_button {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 1.4px;
  background: #673534; color: #F8E7C7; border: 1px solid transparent; border-radius: 4px;
  padding: 18px 34px; height: auto; width: auto; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
#contact .gform_wrapper .gform_footer input[type=submit]:hover,
#contact .gform_wrapper .gform_footer button[type=submit]:hover,
#contact .gform_wrapper .gform_button:hover { background: #E78C56; color: #1A1A1A; }
#contact .gform_wrapper .gfield_validation_message,
#contact .gform_wrapper .validation_message {
  background: #FDEDE9; border: 1px solid #DC4E34; color: #8E2A17;
  font-size: 14px; border-radius: 4px; padding: 9px 12px;
}
#contact .gform_wrapper .gform_validation_errors { border-radius: 4px; }
#contact .gform_confirmation_message {
  font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 1.7; color: #1A1A1A;
  background: #FFFDF8; border-left: 3px solid #E78C56; padding: 22px 24px; border-radius: 4px;
}
#contact .gform_confirmation_message a { color: #673534; }
/* 6) Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
.gform_wrapper input:focus-visible, .gform_wrapper select:focus-visible, .gform_wrapper textarea:focus-visible,
.elementor-accordion .elementor-tab-title:focus-visible {
  outline: 3px solid #E78C56; outline-offset: 2px; border-radius: 2px;
}

/* Accordion polish. Titles forced back to Montserrat - the h3 tag otherwise
   picks up the Empera heading style, which is too loud for a question. */
.ch-acc .elementor-accordion-item { margin-bottom: 10px; border-radius: 5px; overflow: hidden; }
.ch-acc .elementor-tab-title { transition: background .2s ease; }
.ch-acc .elementor-tab-title:hover { background: #FFFBF1 !important; }
.ch-acc .elementor-accordion-title { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ch-acc .elementor-accordion-icon, .ch-acc .elementor-accordion-icon svg { width: 14px !important; height: 14px !important; }
.ch-acc .elementor-accordion-icon { margin-right: 14px; }

/* Images never overflow their container */
.ch-img img, .elementor-widget-image img { display: block; width: 100%; height: auto; }

/* Tablet + mobile refinements */
@media (max-width: 1024px) {
  .ch-hero__copy { min-height: auto !important; }
  .ch-sec, #top { scroll-margin-top: 74px; }
}
@media (max-width: 767px) {
  .ch-lead p { font-size: 17px; }
  .ch-statement { font-size: 17px; }
  .ch-hero .elementor-widget-button { width: 100%; }
  .ch-hero .elementor-button { width: 100%; justify-content: center; }
  .ch-sec, #top { scroll-margin-top: 66px; }
}

/* Never allow sideways scroll.
   Uses `clip` rather than `hidden`: `hidden` turns the element into a scroll
   container, which breaks in-page anchor jumps and smooth scrolling. */
html, body { overflow-x: clip; }
/* Equalise the three photo tiles - source images have mixed aspect ratios */
#menu .elementor-widget-image img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Logo sizing. The SVGs carry no intrinsic width, so pin it explicitly
   rather than relying on the image widget's responsive width control. */
.ch-logo img { width: 206px; height: auto; }
@media (max-width: 1024px) { .ch-logo img { width: 178px; } }
@media (max-width: 767px)  { .ch-logo img { width: 148px; } }
.ch-header .elementor-widget-image { width: auto; flex: 0 0 auto; }
.ch-header > .e-con, .ch-header > .e-con-full { flex: 0 0 auto; width: auto; }

/* Campfire mark tucked into the bottom-right of the white cards.
   Decorative only, so it is a background on ::after rather than an <img>
   and stays out of the accessibility tree. Card bottom padding was raised
   to 64px in the layout to reserve the space. */
.ch-card, .ch-pillar { position: relative; }
.ch-card::after, .ch-pillar::after {
  content: ''; position: absolute; right: 24px; bottom: 22px;
  width: 25px; height: 33px; pointer-events: none; opacity: .9;
  background: url('https://charcodabbq.com/wp-content/uploads/charcoda-brand/charcoda-mark-dark.svg') no-repeat center center;
  background-size: contain;
}
@media (max-width: 767px) {
  .ch-card::after, .ch-pillar::after { right: 18px; bottom: 18px; width: 21px; height: 27px; }
}

/* Hero fade direction. Elementor's gradient-angle control is not responsive,
   so once the hero stacks the charcoal-to-photo fade is redirected downward. */
@media (max-width: 1024px) {
  .ch-hero__media::before { background-image: linear-gradient(180deg, #1A1A1A 0%, rgba(26, 26, 26, 0) 48%) !important; }
}
@media (max-width: 767px) {
  .ch-hero__media::before { background-image: linear-gradient(180deg, #1A1A1A 0%, rgba(26, 26, 26, 0) 42%) !important; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Empera';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://charcodabbq.com/wp-content/uploads/charcoda-brand/empera-regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */