/* Fight Bladder Cancer theme styles.
   Desktop look follows the approved April 2025 design; mobile is a
   modernised, fully responsive, WCAG-minded implementation. */

:root {
  --fbc-orange: #EA5A0B;
  --fbc-orange-link: #B84604;   /* AA on white and cream */
  --fbc-orange-btn: #C24A04;    /* AA with white text */
  --fbc-charcoal: #3C3B3D;
  --fbc-body: #454345;
  --fbc-cream: #F5F0E4;
  --fbc-mustard: #E5B500;
  --fbc-grey-bar: #ACACAD;
  --fbc-light-grey: #EFEFEF;
}

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

body { -webkit-font-smoothing: antialiased; }

a { color: var(--fbc-orange-link); text-underline-offset: 2px; }
a:hover { color: var(--fbc-charcoal); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--fbc-orange-btn);
  outline-offset: 2px;
  border-radius: 2px;
}
.has-charcoal-background-color :focus-visible,
.has-brand-orange-background-color :focus-visible {
  outline-color: #fff;
}

/* headings: brand orange, sizes keep WCAG large-text thresholds */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h3.wp-block-heading { font-size: 1.5rem; }
h4.wp-block-heading, h5.wp-block-heading, h6.wp-block-heading { color: var(--fbc-charcoal); }

/* script display headings ("Welcome", "Get in touch") */
.fbc-script-heading {
  font-family: "Happy Cloud Heavy", "Museo Slab", sans-serif;
  font-weight: 400;
  color: var(--fbc-orange);
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  line-height: 1.1;
}

/* buttons */
.wp-block-button__link {
  background-color: var(--fbc-orange-btn);
  color: #fff;
  border-radius: 8px;
  padding: 0.5em 1.8em;
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 1px solid var(--fbc-orange-btn);
  transition: background-color .15s ease, color .15s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background-color: #fff;
  color: var(--fbc-orange-btn);
}
.has-charcoal-background-color .wp-block-button__link:hover,
.has-charcoal-background-color .wp-block-button__link:focus-visible {
  background-color: var(--fbc-charcoal);
  color: #fff;
  border-color: #fff;
}

/* ---------- header ---------- */
.fbc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.fbc-utility { padding: 0.45rem 1.25rem; background-color: var(--fbc-orange-btn) !important; }
.fbc-utility__links {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.fbc-utility__links a {
  color: #fff;
  text-decoration: none;
  padding: 0.25rem 0.25rem;
  display: inline-block;
}
.fbc-utility__links a:hover,
.fbc-utility__links a:focus-visible { text-decoration: underline; color: #fff; }

.fbc-masthead { padding: 0.65rem 1.25rem; }
.fbc-masthead__row { align-items: center; }
.fbc-logo img { max-height: 74px; width: auto; }

/* primary nav */
.fbc-nav { font-weight: 500; font-size: 1rem; }
.fbc-nav a { color: var(--fbc-charcoal); text-decoration: none; padding: 0.55rem 0.35rem; }
.fbc-nav a:hover, .fbc-nav a:focus-visible { color: var(--fbc-orange-link); }
.fbc-nav .current-menu-item > a,
.fbc-nav .current-menu-ancestor > a { color: var(--fbc-orange-link); }

/* dropdowns (desktop) */
.fbc-nav .wp-block-navigation__submenu-container {
  background-color: #fff;
  border: 1px solid var(--fbc-light-grey);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
  min-width: 240px;
  padding: 0.35rem 0;
}
.fbc-nav .wp-block-navigation__submenu-container a {
  padding: 0.5rem 1rem;
  font-weight: 300;
}
.fbc-nav .wp-block-navigation__submenu-container a:hover,
.fbc-nav .wp-block-navigation__submenu-container a:focus-visible {
  background-color: var(--fbc-cream);
  color: var(--fbc-orange-link);
}

.fbc-donate { margin-left: 0.75rem; }
.fbc-donate .wp-block-button__link { padding: 0.45em 1.6em; }

/* mobile nav overlay: modern, large touch targets */
@media (max-width: 781px) {
  .fbc-masthead { padding: 0.5rem 1rem; }
  .fbc-logo img { max-height: 56px; }
  .fbc-donate .wp-block-button__link { padding: 0.4em 1.1em; font-size: 0.95rem; }
  .fbc-utility__links { font-size: 0.72rem; letter-spacing: 0.04em; }
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding-top: 5rem;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open a {
  color: #fff;
  font-size: 1.15rem;
  padding: 0.8rem 0.5rem;
  display: block;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 1rem;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open a:hover,
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
  color: var(--fbc-mustard);
}
.fbc-nav .wp-block-navigation__responsive-container-open,
.fbc-nav .wp-block-navigation__responsive-container-close {
  padding: 0.6rem;
}
.fbc-nav .wp-block-navigation__responsive-container-open svg,
.fbc-nav .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
}

/* ---------- page hero ---------- */
.fbc-hero {
  margin-bottom: 0;
}
.fbc-hero .wp-block-post-title {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  padding: 1.5rem 0;
}

/* ---------- content sections ---------- */
.fbc-main > .entry-content { margin-top: 0; }
.entry-content .fbc-sec {
  padding: 2.75rem max(1.25rem, calc((100% - 1080px) / 2));
  margin: 0;
}
.entry-content .fbc-sec > * { max-width: 1080px; }

/* headings inside dark/coloured sections stay legible */
.fbc-sec.has-background:where(.has-text-color) h2,
.fbc-sec.has-background:where(.has-text-color) h3 { color: inherit; }
.fbc-sec.has-background a { color: inherit; text-decoration: underline; font-weight: 500; }

/* blurb cards (icon + heading + text) */
.fbc-blurb { text-align: center; }
.fbc-blurb .wp-block-image img { border-radius: 50%; }
.fbc-blurb h3 a { text-decoration: none; }
.fbc-blurb h3 a:hover { text-decoration: underline; }

/* cards in archives */
.fbc-card {
  border: 1px solid var(--fbc-light-grey);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  padding-bottom: 1rem;
}
.fbc-card .wp-block-post-title,
.fbc-card .wp-block-post-date,
.fbc-card .wp-block-post-excerpt { padding: 0 1rem; }
.fbc-card .wp-block-post-title a { text-decoration: none; color: var(--fbc-orange-link); }
.fbc-card .wp-block-post-title a:hover { text-decoration: underline; }

.fbc-archive-head { padding: 2rem 1.25rem; }
.fbc-archive-head h1 { color: #fff; }
.fbc-archive-body { padding: 2.5rem 1.25rem; }

.fbc-post-head { padding: 2rem 1.25rem; }
.fbc-post-head h1 { margin-bottom: 0.25rem; }
.fbc-post-meta { gap: 0.35rem; font-size: 0.95rem; }
.fbc-post-meta p { margin: 0; }
.fbc-post-body { padding: 2.5rem 1.25rem 1rem; }
.fbc-post-foot { padding: 0 1.25rem 2.5rem; }

/* tables: readable + responsive */
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { border: 1px solid #d8d4c8; padding: 0.6rem 0.8rem; text-align: left; }
.entry-content th { background: var(--fbc-cream); font-weight: 500; }
.wp-block-table { overflow-x: auto; }

/* images never overflow */
img { max-width: 100%; height: auto; }

/* iframes/embeds responsive */
.wp-block-embed__wrapper { position: relative; }
.entry-content iframe { max-width: 100%; }

/* separators */
hr.wp-block-separator {
  border: 0;
  border-top: 2px solid var(--fbc-cream);
  max-width: 1080px;
}

/* ---------- footer ---------- */
.fbc-footer { margin-top: 3rem; }
.fbc-footer__contact { padding: 2.5rem 1.25rem; }
.fbc-footer__social { padding: 2rem 1.25rem; }
.fbc-footer__social a { color: #fff; }
.fbc-footer__social .wp-block-search__button {
  background: var(--fbc-orange-btn);
  color: #fff;
  border: 0;
  border-radius: 6px;
}
.fbc-footer__legal { background: var(--fbc-grey-bar); padding: 0.7rem 1.25rem; }
.fbc-footer__legal a { color: var(--fbc-charcoal); margin-left: 1rem; }
.fbc-footer__disclaimer { padding: 1.2rem 1.25rem; }
.fbc-footer__disclaimer p { color: var(--fbc-charcoal); }

/* footer logo on charcoal */
.fbc-footer__logo img { max-width: 180px; }

/* ---------- forms (WPForms + search) ---------- */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container select,
.wpforms-container textarea,
.wp-block-search__input {
  background: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--fbc-charcoal);
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus,
.wp-block-search__input:focus {
  border-color: var(--fbc-orange-btn);
}
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
  background: var(--fbc-orange-btn) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: 0 !important;
  padding: 0.6rem 2rem !important;
  font-weight: 500 !important;
}

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--fbc-orange-link);
  font-size: 1.125rem;
  font-weight: 500;
}
.woocommerce ul.products li.product .price { color: var(--fbc-charcoal); }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button {
  background: var(--fbc-orange-btn);
  color: #fff;
  border-radius: 8px;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: var(--fbc-charcoal); color: #fff; }

/* ---------- utility content classes carried from the old site ---------- */
.entry-content .light,
.entry-content blockquote {
  border: 1px solid rgba(234, 90, 11, 0.5);
  border-radius: 20px;
  padding: 25px;
  margin: 1.5rem 0;
}
.entry-content blockquote { font-weight: 700; }
.entry-content blockquote p:first-child { margin-top: 0; }
.entry-content blockquote p:last-child { margin-bottom: 0; }

/* skip link (safety net in addition to core) */
.fbc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fbc-charcoal);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100000;
  border-radius: 0 0 8px 0;
}
.fbc-skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------- homepage ---------- */
.fbc-home-hero { margin: 0; }
.fbc-home-hero img { object-fit: cover; }
.fbc-home-band { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.fbc-home-band p, .fbc-home-band h2 { color: #fff; }
.fbc-home-band a { color: #fff; text-decoration: underline; }
.fbc-home-band a:hover, .fbc-home-band a:focus-visible { color: var(--fbc-mustard); }
.fbc-home-shadow { box-shadow: 0 12px 8px -6px rgba(0,0,0,.3); position: relative; z-index: 10; }
.fbc-card-panel { box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.fbc-signposts .fbc-circle img { border-radius: 50%; width: min(280px, 70vw); height: auto; margin: 0 auto; display: block; }
.fbc-signposts h2 { font-size: 1.5rem; }
.fbc-mosaic { margin: 0; }
.fbc-mosaic img { width: 100%; display: block; }
.entry-content > .fbc-sec.alignfull { max-width: none; }

/* ---------- mobile menu overlay refinements ---------- */
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 4.5rem 1.5rem 2rem;
  overflow-y: auto;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch;
  text-align: left;
  width: 100%;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > a {
  font-weight: 700;
  font-size: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  width: 100%;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  border-left: 2px solid rgba(255,255,255,.25);
  margin: 0.25rem 0 0.75rem 0.35rem;
  padding-left: 0.9rem;
  width: 100%;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  font-weight: 300;
  font-size: 1.02rem;
  padding: 0.55rem 0.25rem;
}
.fbc-nav .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* overlay: override the desktop right-justification */
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  justify-content: flex-start !important;
  text-align: left !important;
}
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.fbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start !important;
}