/* bridge: core blocks emit their own markup and classes, so the design's original
   selectors (which targeted the bare <a>, <nav>, etc.) no longer match. these rules
   re-attach the design system to core block output. loaded on the front end AND in
   the editor, so both look the same. */

/* ---------- buttons ----------
   core renders <div class="wp-block-button VARIANT"><a class="wp-block-button__link wp-element-button">.
   the design styled the <a> itself, so cascade the variant from the wrapper. */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: all 0.2s;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 400;
  text-decoration: none;
  background: var(--navy);
  color: var(--cream);
}

.wp-block-button.btn--primary > .wp-block-button__link { background: var(--cream); color: var(--navy); }
.wp-block-button.btn--primary > .wp-block-button__link:hover { background: var(--olive-light); color: var(--navy-deep); }

.wp-block-button.btn--outline > .wp-block-button__link { background: transparent; border: 1px solid rgba(245,241,232,0.3); color: var(--cream); }
.wp-block-button.btn--outline > .wp-block-button__link:hover { background: rgba(245,241,232,0.1); }

.wp-block-button.btn--navy > .wp-block-button__link { background: var(--navy); color: var(--cream); }
.wp-block-button.btn--navy > .wp-block-button__link:hover { background: rgba(8,27,45,0.9); }

.wp-block-button.btn--navy-outline > .wp-block-button__link { background: transparent; border: 1px solid var(--navy); color: var(--navy); }
.wp-block-button.btn--navy-outline > .wp-block-button__link:hover { background: var(--navy); color: var(--cream); }

.wp-block-button.btn--olive > .wp-block-button__link { background: var(--olive); color: var(--cream); }
.wp-block-button.btn--olive > .wp-block-button__link:hover { background: var(--olive-light); color: var(--navy); }

.wp-block-button.btn--cream-on-navy > .wp-block-button__link { background: var(--cream); color: var(--navy); }
.wp-block-button.btn--cream-on-navy > .wp-block-button__link:hover { background: var(--olive-light); }

.wp-block-button.btn--block { width: 100%; }
.wp-block-button.btn--block > .wp-block-button__link { width: 100%; justify-content: center; }

:where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- navigation ----------
   core ships `.wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`
   (doubled class = high specificity), which was overriding the design's link colour. */
.fibers-header .wp-block-navigation { gap: 2.25rem; }
.fibers-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(245,241,232,0.85);
  transition: color 0.2s;
  padding: 0;
}
.fibers-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.fibers-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--cream);
  font-weight: 500;
}
/* submenu: core defaults it to a white panel with dark text. replicate the live
   dark dropdown. core's own selectors are 3 classes deep, so match that and add
   !important on the two properties core sets inline from its block supports. */
.fibers-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.fibers-header .wp-block-navigation__submenu-container {
  background-color: var(--navy-deep) !important;
  color: rgba(245,241,232,0.85) !important;
  border: 1px solid rgba(245,241,232,0.12);
  padding: 0.5rem;
  min-width: 16rem;
  box-shadow: 0 20px 40px -12px rgba(5,15,29,0.6);
  left: 50%;
  transform: translateX(-50%);
}
.fibers-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.fibers-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: rgba(245,241,232,0.85) !important;
  padding: 0.65rem 0.85rem;
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
.fibers-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.fibers-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  background: rgba(245,241,232,0.08);
  color: var(--cream) !important;
}
/* the parent "Procedures" item and its chevron */
.fibers-header .wp-block-navigation .has-child > .wp-block-navigation-item__content { gap: 0.35rem; }
.fibers-header .wp-block-navigation .wp-block-navigation__submenu-icon svg { height: 12px; width: 12px; transition: transform 0.2s; }
.fibers-header .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }
.fibers-header .wp-block-navigation .has-child:hover > .wp-block-navigation-item__content { color: var(--cream) !important; font-weight: 500; }
.fibers-header .wp-block-navigation__responsive-container-open,
.fibers-header .wp-block-navigation__responsive-container-close { color: var(--cream); }
.fibers-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--navy-deep); }

/* the phone pill is a core button in the header */
.fibers-header .fibers-header__phone > .wp-block-button__link {
  border-radius: 9999px;
  border: 1px solid rgba(245,241,232,0.3);
  padding: 0.625rem 1.25rem;
  font-size: 13px;
  background: transparent;
  color: var(--cream);
}
.fibers-header .fibers-header__phone > .wp-block-button__link:hover {
  background: var(--cream);
  color: var(--navy);
}

/* ---------- images / logo ---------- */
.fibers-header__logo img { height: 6rem; width: auto; }
@media (min-width: 1024px) { .fibers-header__logo img { height: 8rem; } }
.fibers-header__logo, .fibers-footer__logo { margin: 0; }
:where(.wp-block-image) { margin: 0; }
.wp-block-image figcaption { display: none; }

/* ---------- columns behave as the design's grids ---------- */
:where(.wp-block-columns) { gap: 1.25rem; margin-bottom: 0; }
@media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile) { gap: 1.25rem; } }

/* ---------- definition lists became groups ----------
   the design used <dl><dt><dd>; core blocks have no equivalent, so those are now
   groups of paragraphs. re-target the dt/dd rules at first/last child instead. */
.sunsky-info-card .info-row > *:first-child { width: 4rem; flex-shrink: 0; }
.sunsky-info-card .info-row > *:last-child { color: var(--cream); }

.sunsky-appt-row > .appt-label { display: flex; align-items: center; gap: 0.5rem; }
.sunsky-appt-row > .appt-label img { height: 14px; width: 14px; }
.sunsky-appt-row > *:last-child a { color: var(--cream); transition: color 0.2s; word-break: break-all; }
.sunsky-appt-row > *:last-child a:hover { color: var(--olive-light); }

.facility-profile .profile-row > *:first-child { color: var(--muted-fg); }
.facility-profile .profile-row > *:last-child { color: var(--navy); text-align: right; }

/* ---------- form plugin inherits the design ---------- */
.fluentform .ff-btn-submit {
  background: var(--olive);
  color: var(--cream);
  border: none;
  border-radius: 0;
  padding: 1rem 1.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
  font-weight: 400;
}
.fluentform .ff-btn-submit:hover { background: var(--olive-light); color: var(--navy); }
.fluentform .ff-el-form-control {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--navy-deep);
}
.fluentform .ff-el-input--label label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--navy);
  font-weight: 400;
}