/*
Theme Name: Flourish
Theme URI: https://flourishworship.com/
Author: Flourish Worship
Author URI: https://flourishworship.com/
Description: A bright, welcoming block theme built for Flourish — an emerging community of Central District Conference in Hendersonville, North Carolina. Celebratory colour, generous type and a layout that works on every screen.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flourish
Tags: block-theme, full-site-editing, one-column, two-columns, accessibility-ready, custom-colors, custom-menu, featured-images, wide-blocks
*/

/* =========================================================
   1. Base
   ========================================================= */

:root {
  --fl-line: var(--wp--preset--color--line);
  --fl-ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }

/* Never let anything force a horizontal scrollbar on small screens */
img, video, iframe, svg, table { max-width: 100%; }

:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3, h4) { text-wrap: balance; }

/* Visible, on-brand focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link:focus {
  background: var(--wp--preset--color--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 8px 0;
  z-index: 9999;
}

/* =========================================================
   2. Header
   ========================================================= */

.fl-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--fl-line);
}
.admin-bar .fl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fl-header { top: 46px; } }

/* thin spectrum hairline across the very top of the site */
.fl-header::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: var(--wp--preset--gradient--spectrum);
}

.fl-header .wp-block-site-logo img { height: auto; }

/* Navigation */
.fl-nav .wp-block-navigation-item__content {
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--fl-ease), border-color .2s var(--fl-ease);
}
.fl-nav .wp-block-navigation-item__content:hover,
.fl-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--berry);
  border-bottom-color: var(--wp--preset--color--berry);
}
.fl-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--berry); }

/* Dropdown submenu */
.fl-nav .wp-block-navigation__submenu-container {
  border: 1px solid var(--fl-line) !important;
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--preset--shadow--lift);
  padding: .4rem;
  min-width: 15rem;
  background: #fff;
}
.fl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: .55rem .8rem !important;
  border-radius: 8px;
  border-bottom: 0;
  width: 100%;
}
.fl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--berry);
}

/* Mobile overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--cream) !important;
  padding: clamp(1.5rem, 6vw, 3rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.05rem;
  font-weight: 500;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }

/* =========================================================
   3. Layout utilities
   ========================================================= */

/* Auto-fitting responsive grid — no breakpoints needed, never overflows */
.fl-grid { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.fl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.fl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.fl-grid > * { margin-block: 0 !important; }

/* Constrain long-form reading measure */
.fl-measure { max-width: var(--wp--custom--measure); }
.fl-measure-center { max-width: var(--wp--custom--measure); margin-inline: auto; }

.fl-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--berry);
  margin-bottom: .35rem !important;
}
.fl-eyebrow--light { color: var(--wp--preset--color--sunshine); }

/* Spectrum rule (block style on core/separator) */
.wp-block-separator.is-style-fl-spectrum {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--gradient--spectrum);
  opacity: 1;
  max-width: 6.5rem;
  margin-inline: 0;
}
.wp-block-separator.is-style-fl-spectrum.aligncenter,
.has-text-align-center > .wp-block-separator.is-style-fl-spectrum { margin-inline: auto; }

/* =========================================================
   4. Cards
   ========================================================= */

.fl-card {
  background: #fff;
  border: 1px solid var(--fl-line);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: transform .28s var(--fl-ease), box-shadow .28s var(--fl-ease), border-color .28s var(--fl-ease);
}
.fl-card:hover, .fl-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--wp--preset--shadow--lift);
  border-color: transparent;
}
.fl-card > .wp-block-image { margin: 0 !important; }
.fl-card > .wp-block-image img {
  border-radius: 0 !important;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.fl-card__body {
  padding: var(--wp--preset--spacing--30) !important;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1 1 auto;
}
.fl-card__body > * { margin-block: 0 !important; }
.fl-card__body .fl-more { margin-top: auto !important; padding-top: .35rem; }

/* Text link with arrow */
.fl-more a, a.fl-more {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.fl-more a::after, a.fl-more::after { content: "\2192"; transition: transform .2s var(--fl-ease); }
.fl-more a:hover::after, a.fl-more:hover::after { transform: translateX(4px); }

/* Soft tinted info panel */
.fl-panel {
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--40) !important;
}
.fl-panel--outline { border: 1px solid var(--fl-line); background: #fff; }

/* =========================================================
   5. Hero
   ========================================================= */

.fl-hero { position: relative; overflow: hidden; }
.fl-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -14%;
  inset-block-start: -22%;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle at 50% 50%, rgba(246,185,59,.30), rgba(246,185,59,0) 62%);
  pointer-events: none;
  z-index: 0;
}
.fl-hero > * { position: relative; z-index: 1; }
.fl-hero-img img {
  border-radius: var(--wp--custom--radius--xl) !important;
  box-shadow: 0 30px 70px -30px rgba(32,28,46,.45);
}

/* Cover-based page banner */
.fl-banner { border-radius: 0; }
.fl-banner .wp-block-cover__inner-container { width: 100%; }

/* =========================================================
   6. Buttons
   ========================================================= */

.wp-block-button__link { transition: background-color .22s var(--fl-ease), color .22s var(--fl-ease), transform .22s var(--fl-ease), box-shadow .22s var(--fl-ease); }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(32,28,46,.5); }

.wp-block-button.is-style-fl-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--ink);
  box-shadow: inset 0 0 0 2px currentColor;
}
.wp-block-button.is-style-fl-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(32,28,46,.5);
}
.has-text-color-base .wp-block-button.is-style-fl-outline .wp-block-button__link,
.fl-on-dark .wp-block-button.is-style-fl-outline .wp-block-button__link { color: #fff; }
.fl-on-dark .wp-block-button.is-style-fl-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); }

/* =========================================================
   7. Content polish
   ========================================================= */

.wp-block-quote {
  border-left: 5px solid transparent;
  border-image: var(--wp--preset--gradient--spectrum) 1;
  padding-left: clamp(1rem, 3vw, 1.75rem);
}
.wp-block-quote cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-style: normal;
  font-weight: 600;
  color: var(--wp--preset--color--ink-soft);
}

.fl-lede { font-size: var(--wp--preset--font-size--lg); line-height: 1.55; color: var(--wp--preset--color--ink-soft); }

.fl-prose > * + * { margin-block-start: 1.1em; }
.fl-prose h2 { margin-block-start: 1.9em; }
.fl-prose h3 { margin-block-start: 1.6em; }

/* Definition-style contact rows */
.fl-facts { display: grid; gap: .85rem; }
.fl-facts p { margin: 0 !important; }
.fl-facts strong { display: block; font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); font-weight: 700; margin-bottom: .1rem; }

/* Responsive embeds (YouCanBook.me, maps) */
.fl-embed { position: relative; width: 100%; border-radius: var(--wp--custom--radius--lg); overflow: hidden; border: 1px solid var(--fl-line); background: #fff; }
.fl-embed iframe { display: block; width: 100%; min-height: 40rem; border: 0; }
@media (max-width: 600px) { .fl-embed iframe { min-height: 46rem; } }
.fl-map iframe { min-height: 20rem; }
@media (max-width: 600px) { .fl-map iframe { min-height: 15rem; } }

/* =========================================================
   8. Footer
   ========================================================= */

.fl-footer { border-top: 4px solid transparent; border-image: var(--wp--preset--gradient--spectrum) 1; }
.fl-footer a { color: inherit; text-decoration: none; }
.fl-footer a:hover { color: var(--wp--preset--color--sunshine); text-decoration: underline; }
.fl-footer .wp-block-heading { color: #fff; }
.fl-footnav { display: grid; gap: .55rem; }
.fl-footnav p { margin: 0 !important; }

/* =========================================================
   9. Dark sections
   ========================================================= */

.fl-on-dark, .fl-on-dark :where(h1,h2,h3,h4,h5,p,li) { color: #fff; }
.fl-on-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--sunshine); }

/* =========================================================
   10. Small-screen tuning
   ========================================================= */

@media (max-width: 781px) {
  .fl-hero::after { width: 24rem; height: 24rem; inset-block-start: -8%; }
  .wp-block-columns.fl-reverse-mobile { flex-direction: column-reverse !important; }
}

/* =========================================================
   11. Brand mark
   The library wordmark is a square-ish file with a lot of white
   margin baked in, so the header crops to the mark itself.
   ========================================================= */

.fl-brand .wp-block-site-logo { margin: 0; line-height: 0; }
.fl-brand .wp-block-site-logo a { display: block; }
.fl-brand .wp-block-site-logo img {
  width: 250px !important;
  height: 74px !important;
  max-width: 56vw;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0 !important;
  display: block;
}
@media (max-width: 781px) {
  .fl-brand .wp-block-site-logo img { width: 178px !important; height: 53px !important; }
}

/* Text fallback if no logo is set */
.fl-brand .wp-block-site-title { line-height: 1.1; }

/* Footer wordmark sits on a dark panel, so it gets a light card behind it */
.fl-footer-mark img {
  width: 230px !important;
  height: 68px !important;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 10px !important;
  background: #fff;
}

/* Hide the header CTA when space is tight (the mobile menu carries it instead) */
@media (max-width: 1000px) { .fl-hide-sm { display: none !important; } }