/* ============================================================
   HICKORY HOLLOW BAPTIST CHURCH — Additional CSS
   Paste into: Appearance → Customize → Additional CSS
   (or Site Editor → Styles → Additional CSS on the block theme path)

   HOW THIS WORKS
   The mockup used custom class names that don't exist in WordPress.
   Native blocks emit their own classes (.wp-block-*). To connect the
   two, tag each block using its Advanced → "Additional CSS class(es)"
   field with the hhbc-* class noted in each section below. This CSS
   then styles that block to match the mockup.

   IMPORTANT: The @import line MUST stay first, or the fonts won't load.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   1. DESIGN TOKENS (from the mockup :root)
   ------------------------------------------------------------ */
:root {
  --hhbc-bg:            #ffffff;
  --hhbc-bg-alt:        #f7f5f0;
  --hhbc-text:          #1a1a1a;
  --hhbc-text-muted:    #5a5a5a;
  --hhbc-text-light:    #8a8a8a;
  --hhbc-border:        #e5e0d6;
  --hhbc-border-strong: #d4cebf;
  --hhbc-navy:          #1e3a8a;
  --hhbc-navy-dark:     #1e3170;
  --hhbc-serif: 'Fraunces', Georgia, serif;
  --hhbc-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ------------------------------------------------------------
   2. BASE TYPOGRAPHY
   Scoped to .entry-content so it only touches page/post body,
   not the theme's own header/footer/nav. !important is used on
   font-family because Lovecraft hard-sets these on headings.
   ------------------------------------------------------------ */
.entry-content {
  font-family: var(--hhbc-sans) !important;
  color: var(--hhbc-text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--hhbc-serif) !important;
  color: var(--hhbc-text);
  line-height: 1.15;
  font-weight: 500;
}
.entry-content h1 { font-size: 48px; letter-spacing: -0.5px; }
.entry-content h2 { font-size: 30px; }
.entry-content h3 { font-size: 21px; }
.entry-content p { color: var(--hhbc-text); }
.entry-content a { color: var(--hhbc-navy); }

/* ------------------------------------------------------------
   3. CTA BUTTON  →  class: hhbc-cta   (put on the Button block)
   ------------------------------------------------------------ */
.wp-block-button.hhbc-cta .wp-block-button__link {
  background-color: var(--hhbc-navy);
  color: #ffffff;
  font-family: var(--hhbc-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 14px 30px;
  border-radius: 4px;
  border: none;
  transition: background-color 0.15s ease;
}
.wp-block-button.hhbc-cta .wp-block-button__link:hover {
  background-color: var(--hhbc-navy-dark);
  text-decoration: none;
}
/* Outline variant  →  class: hhbc-cta-outline */
.wp-block-button.hhbc-cta-outline .wp-block-button__link {
  background: transparent;
  color: var(--hhbc-navy);
  border: 1.5px solid var(--hhbc-navy);
  font-family: var(--hhbc-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 12.5px 28px;
  border-radius: 4px;
}
.wp-block-button.hhbc-cta-outline .wp-block-button__link:hover {
  background: var(--hhbc-navy);
  color: #fff;
}

/* ------------------------------------------------------------
   4. SERVICE-TIMES CARD  →  class: hhbc-card  (on the Group block)
   This is the card-style box from the right column.
   ------------------------------------------------------------ */
.wp-block-group.hhbc-card {
  background: var(--hhbc-bg-alt);
  border: 1px solid var(--hhbc-border);
  border-radius: 4px;
  padding: 36px 32px;
}
.wp-block-group.hhbc-card > * { margin-top: 0; }

/* ------------------------------------------------------------
   5. SERVICE-TIMES TABLE  →  class: hhbc-service-table (Table block)
   Removes the boxy default grid, keeps thin horizontal rules,
   right-aligns the time column.
   ------------------------------------------------------------ */
.wp-block-table.hhbc-service-table table {
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table.hhbc-service-table td {
  border: none;
  border-bottom: 1px solid var(--hhbc-border);
  padding: 12px 0;
  font-size: 16px;
}
.wp-block-table.hhbc-service-table tr:last-child td { border-bottom: none; }
.wp-block-table.hhbc-service-table td:first-child {
  color: var(--hhbc-text);
  font-weight: 500;
}
.wp-block-table.hhbc-service-table td:last-child {
  text-align: right;
  color: var(--hhbc-text-muted);
}

/* ------------------------------------------------------------
   6. EYEBROW LABEL  →  class: hhbc-eyebrow  (on a Paragraph block)
   The small uppercase "THIS WEEK" / "PLAN YOUR VISIT" kicker text.
   ------------------------------------------------------------ */
.hhbc-eyebrow {
  font-family: var(--hhbc-sans) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hhbc-text-light);
  margin-bottom: 8px;
}

/* ------------------------------------------------------------
   7. ALT-BACKGROUND SECTION  →  class: hhbc-section-alt (Group block)
   The warm-gray section break used between content bands.
   ------------------------------------------------------------ */
.wp-block-group.hhbc-section-alt {
  background: var(--hhbc-bg-alt);
  padding: 50px 0;
}

/* ------------------------------------------------------------
   8. SERMON / LINK ROW  →  class: hhbc-sermon (Group or Columns)
   Thin divider between stacked sermon items.
   ------------------------------------------------------------ */
.hhbc-sermon {
  border-bottom: 1px solid var(--hhbc-border);
  padding: 20px 0;
}

/* ------------------------------------------------------------
   9. LOVECRAFT MOBILE GUARD
   WordPress stacks columns under 782px, but Lovecraft's own
   floats can fight it. Force a clean single-column stack on the
   two-column homepage row  →  class: hhbc-stack (on Columns block)
   ------------------------------------------------------------ */
@media (max-width: 782px) {
  .wp-block-columns.hhbc-stack {
    display: block;
  }
  .wp-block-columns.hhbc-stack > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-bottom: 24px;
  }
  .entry-content h1 { font-size: 34px; }
  .entry-content h2 { font-size: 24px; }
	/* ARROW LINK  →  class: hhbc-arrow-link  (on the Paragraph holding the link) */
.hhbc-arrow-link a {
  font-family: var(--hhbc-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--hhbc-navy);
  text-decoration: none;
}
.hhbc-arrow-link a:hover { text-decoration: underline; }
	/* PASTOR QUOTE BODY  →  class: hhbc-pastor-quote  (on a Paragraph block) */
.hhbc-pastor-quote {
  font-family: var(--hhbc-serif) !important;
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--hhbc-text-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* PLAIN PADDED SECTION (white)  →  class: hhbc-section-plain  (on the Group block) */
.wp-block-group.hhbc-section-plain {
  padding: 60px 0;
}
}