/*
Theme Name: Four Girders Blog Block
Theme URI: https://fourgirders.blog
Author: Ferdinand Avila-Medina
Description: Accessible, responsive block theme for the Four Girders Blog.
Version: 2.8.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: four-girders-blog-block
*/

html { scroll-behavior: smooth; }
body { overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 3px; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > footer { margin-top: auto; }
.screen-reader-text,
.skip-link.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.screen-reader-text:focus,
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  left: 1rem !important;
  top: 1rem !important;
  z-index: 100000 !important;
  background: #fff !important;
  color: #0B0B0B !important;
  padding: .75rem 1rem !important;
  border: 2px solid #D4A12A !important;
  border-radius: .25rem !important;
  text-decoration: none !important;
}
.fg-grid-bg { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; }
.fg-placeholder { min-height: 260px; border: 2px dashed #9B7114; border-radius: 14px; display:flex; align-items:center; justify-content:center; text-align:center; }
.fg-hero-media {
  aspect-ratio: 4 / 5;
  min-height: 0 !important;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
}
.fg-hero-media .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fg-hero-media .wp-block-cover__inner-container {
  width: 100%;
}
.fg-card { height:100%; }
@media (max-width: 781px) {
  .fg-hero-columns { flex-direction: column; }
  .fg-placeholder { min-height: 190px; }
  .fg-hero-media { width: min(100%, 520px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Persistent, accessible site navigation */
:root { --fg-header-height: 88px; }
.fg-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(212,161,42,.32);
}
body.admin-bar .fg-site-header { top: 32px; }
body:not(.wp-admin) .wp-site-blocks { padding-top: var(--fg-header-height); }
.fg-site-header a,
.fg-site-header .wp-block-navigation-item__content {
  color: var(--wp--preset--color--white);
  text-decoration-color: transparent;
  text-underline-offset: .2em;
}
.fg-site-header a:hover,
.fg-site-header a:focus-visible,
.fg-site-header .wp-block-navigation-item__content:hover,
.fg-site-header .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--gold);
  text-decoration-color: currentColor;
}
.fg-site-header .wp-block-navigation__responsive-container-open,
.fg-site-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--white);
}
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow-y: auto;
  background: var(--wp--preset--color--black) !important;
  color: var(--wp--preset--color--white) !important;
  padding: 5rem 1.5rem 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: inline-block;
  padding: .55rem 0;
  font-size: 1.15rem;
  color: var(--wp--preset--color--white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--gold) !important;
}

/* Consistent editorial links on light backgrounds */
main a:not(.wp-block-button__link),
footer a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--red);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}
main a:not(.wp-block-button__link):hover,
main a:not(.wp-block-button__link):focus-visible,
footer a:not(.wp-block-button__link):hover,
footer a:not(.wp-block-button__link):focus-visible {
  color: var(--wp--preset--color--red-dark);
}
.has-black-background-color a:not(.wp-block-button__link),
.has-charcoal-background-color a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--gold);
}
.has-black-background-color a:not(.wp-block-button__link):hover,
.has-black-background-color a:not(.wp-block-button__link):focus-visible,
.has-charcoal-background-color a:not(.wp-block-button__link):hover,
.has-charcoal-background-color a:not(.wp-block-button__link):focus-visible {
  color: var(--wp--preset--color--white);
}

@media (max-width: 782px) {
  body.admin-bar .fg-site-header { top: 46px; }
}
@media (max-width: 600px) {
  body.admin-bar .fg-site-header { top: 0; }
}


/* Reliable navigation breakpoint for tablets and phones */
.fg-site-header .wp-block-navigation {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.fg-site-header .wp-block-navigation__responsive-container-open,
.fg-site-header .wp-block-navigation__responsive-container-close {
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid rgba(212,161,42,.6);
  border-radius: 6px;
  background: transparent;
}
.fg-site-header .wp-block-navigation__responsive-container-open svg,
.fg-site-header .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

@media (max-width: 980px) {
  .fg-site-header > .wp-block-group,
  .fg-site-header .alignwide {
    flex-wrap: nowrap !important;
  }
  .fg-site-header .wp-block-site-title {
    font-size: clamp(1rem, 3vw, 1.25rem) !important;
  }
  .fg-site-header .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--wp--preset--color--white) !important;
    position: relative !important;
    z-index: 10001 !important;
  }
  .fg-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .fg-site-header .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
  }
}

@media (min-width: 981px) {
  .fg-site-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
  .fg-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    position: static;
  }
}


/* Clear hover and keyboard-focus feedback */
.fg-site-header .wp-block-navigation-item__content {
  border-radius: 5px;
  padding: .45rem .65rem;
  transition: background-color .18s ease, color .18s ease, text-decoration-color .18s ease;
}
.fg-site-header .wp-block-navigation-item__content:hover,
.fg-site-header .wp-block-navigation-item__content:focus-visible,
.fg-site-header .current-menu-item > .wp-block-navigation-item__content,
.fg-site-header .current-menu-ancestor > .wp-block-navigation-item__content {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--black) !important;
  text-decoration: none;
}

.wp-block-button__link {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--red-dark) !important;
  border-color: var(--wp--preset--color--red-dark) !important;
  color: var(--wp--preset--color--white) !important;
  text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--gold) !important;
  border-color: var(--wp--preset--color--gold) !important;
  color: var(--wp--preset--color--black) !important;
}

.fg-question-cta {
  border-top: 1px solid var(--wp--preset--color--line);
}
.fg-question-cta .wp-block-button__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fg-footer-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--gold) !important;
  text-underline-offset: .2em;
}
.fg-footer-nav .wp-block-navigation-item__content:hover,
.fg-footer-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--white) !important;
}