/* Hangout FAQ Accordion — front-end styles.
   Styled to continue the Hangout Pizza & Pub catering page: cream section
   background, Permanent Marker brush heading, navy/black text, gold accent,
   white rounded cards with a thin border.
   All selectors are scoped under .hfaq- and key properties use !important so
   theme styles cannot override the accordion. */

.hfaq-section {
  --hfaq-navy: #14101F;
  --hfaq-cream: #F3EEE4;
  --hfaq-gold: #D9A441;
  --hfaq-closed-height: 112px;
  position: relative;
  background: var(--hfaq-bg-color, var(--hfaq-cream)) !important;
  background-color: var(--hfaq-bg-color, var(--hfaq-cream)) !important;
  padding: 90px 24px 96px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #54525c !important;
  margin: 0 !important;
  text-align: left !important;
  letter-spacing: normal !important;
}
.hfaq-section * { box-sizing: border-box; }

.hfaq-container {
  max-width: 1200px;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.hfaq-head {
  text-align: center !important;
  margin: 0 auto 48px !important;
  padding: 0 !important;
}
.hfaq-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #4a4952 !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.hfaq-rule {
  width: 34px !important;
  height: 2px !important;
  background: #C4122F !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hfaq-head .hfaq-title,
.hfaq-head h2.hfaq-title,
.hfaq-head > h2 {
  font-family: var(--hfaq-heading-font, 'Permanent Marker', cursive) !important;
  text-transform: uppercase !important;
  font-size: clamp(2.3rem, 5.2vw, 3.1rem) !important;
  font-weight: 400 !important;
  color: #100e18 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-align: center !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-shadow: none !important;
}

.hfaq-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--hfaq-columns, 2), minmax(0, 1fr)) !important;
  gap: 16px 22px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: stretch !important;
}
@media (max-width: 820px) {
  .hfaq-grid {
    grid-template-columns: 1fr !important;
  }
  .hfaq-section {
    --hfaq-closed-height: 152px;
  }
}

.hfaq-row {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 17px !important;
  border: 1px solid rgba(20, 16, 31, 0.08) !important;
  box-shadow: 0 6px 18px rgba(20, 16, 31, 0.05) !important;
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--hfaq-closed-height, 112px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hfaq-row.open {
  height: auto !important;
}
.hfaq-row.hfaq-twin {
  height: auto !important;
}

button.hfaq-row-top,
.hfaq-row-top {
  width: 100% !important;
  flex: 0 0 auto !important;
  height: var(--hfaq-closed-height, 112px) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  float: none !important;
  position: static !important;
}
.hfaq-row-top:focus,
.hfaq-row-top:hover,
.hfaq-row-top:active {
  background: transparent !important;
  outline: none !important;
  color: inherit !important;
  transform: none !important;
}
.hfaq-row-top:focus-visible {
  outline: 2px solid var(--hfaq-gold) !important;
  outline-offset: -2px !important;
  border-radius: 16px !important;
}
.hfaq-row-q {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--hfaq-navy) !important;
  flex: 1 1 auto !important;
  line-height: 1.45 !important;
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.hfaq-row-icon {
  flex-shrink: 0 !important;
  color: var(--hfaq-navy) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(20, 16, 31, 0.22) !important;
}
.hfaq-row-icon .fa-minus { display: none !important; }
.hfaq-row.open .hfaq-row-icon .fa-plus { display: none !important; }
.hfaq-row.open .hfaq-row-icon .fa-minus { display: inline-block !important; }

.hfaq-row-a {
  flex: 0 0 auto !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: max-height;
}
.hfaq-row-a-inner {
  padding: 2px 20px 20px !important;
  border-top: 1px solid rgba(20, 16, 31, 0.06) !important;
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  font-size: 0.88rem !important;
  color: #54525c !important;
  line-height: 1.65 !important;
  letter-spacing: normal !important;
  text-align: left !important;
}
.hfaq-row-a-inner p,
.hfaq-row-a-inner ul,
.hfaq-row-a-inner ol,
.hfaq-row-a-inner li,
.hfaq-row-a-inner div {
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  color: #54525c !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  font-weight: 400 !important;
}
.hfaq-row-a-inner p { margin: 0 0 8px !important; padding: 0 !important; }
.hfaq-row-a-inner p:first-child { margin-top: 12px !important; }
.hfaq-row-a-inner p:last-child { margin-bottom: 0 !important; }
.hfaq-row-a-inner ul { margin: 4px 0 0 !important; padding: 0 0 0 20px !important; list-style: disc !important; }
.hfaq-row-a-inner ol { margin: 4px 0 0 !important; padding: 0 0 0 20px !important; list-style: decimal !important; }
.hfaq-row-a-inner li { padding: 3px 0 !important; margin: 0 !important; background: transparent !important; }
.hfaq-row-a-inner li:first-child { padding-top: 0 !important; }
.hfaq-row-a-inner strong { color: var(--hfaq-navy) !important; font-weight: 700 !important; }
.hfaq-row-a-inner a { color: var(--hfaq-gold) !important; text-decoration: underline !important; }
.hfaq-row-a-inner h1,
.hfaq-row-a-inner h2,
.hfaq-row-a-inner h3,
.hfaq-row-a-inner h4,
.hfaq-row-a-inner h5,
.hfaq-row-a-inner h6 {
  font-family: var(--hfaq-body-font, 'Poppins', sans-serif) !important;
  color: var(--hfaq-navy) !important;
  margin: 10px 0 6px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}