/**
 * Bar Components CSS
 *
 * Styles for Top_Bar and Announcement_Bar components.
 * Includes visibility states and animations.
 *
 * @package Plexa_AI_Theme
 */

/* ==========================================================================
   Bar Heights
   ========================================================================== */

/* Fixed heights only apply within header-bars context */
.header-bars .bar--height-xs {
  height: 40px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-bars .bar--height-xs > div > .grid {
  height: 40px;
}

.header-bars .bar--height-sm {
  height: 60px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-bars .bar--height-sm > div > .grid {
  height: 60px;
}

.header-bars .bar--height-ms {
  height: 64px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-bars .bar--height-ms > div > .grid,
.header-bars .bar--height-ms > div > .bar-spread {
  height: 64px;
}

.header-bars .bar--height-md {
  height: 80px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-bars .bar--height-md > div > .grid {
  height: 80px;
}

.header-bars .bar--height-lg {
  height: 120px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-bars .bar--height-lg > div > .grid {
  height: 120px;
}

.header-bars .bar--height-xl {
  height: 200px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.header-bars .bar--height-xl > div > .grid {
  height: 200px;
}

.bar--height-fill {
  flex: 1;
}

/* ==========================================================================
   Top Bar Mode Styling
   ========================================================================== */

.plexa-top-bar {
  font-size: 1rem;
}

/* Top Bar button overrides */
.plexa-top-bar .btn-sm {
  height: 26px;
  min-height: 26px;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  gap: 0.25rem;
}

/* ==========================================================================
   Announcement Bar Mode Styling
   ========================================================================== */

.plexa-announcement-bar {
  font-size: 0.875rem;
}

/* Gradient mode - background applied via inline style */
.plexa-announcement-bar.gradient-mode {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pattern mode - background-image applied via inline style */
.plexa-announcement-bar.pattern-mode {
  background-repeat: repeat;
  background-size: auto;
}

/* Rounded style (inset with rounded corners) */
.plexa-announcement-bar.rounded-style {
  margin: 0.5rem 1rem;
  border-radius: 0.5rem;
}

/* ==========================================================================
   Announcement Bar States
   ========================================================================== */

.plexa-announcement-bar {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Visible state */
.announcement-bar--visible {
  transform: translateY(0);
  opacity: 1;
}

/* Hidden state */
.announcement-bar--hidden {
  display: none !important;
}

/* Exit animation */
.announcement-bar--hiding {
  animation: announcement-bar-slide-up 0.3s ease forwards;
}

@keyframes announcement-bar-slide-up {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* ==========================================================================
   Copy Feedback
   ========================================================================== */

.copy-feedback {
  position: relative;
}

.copy-feedback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--color-success) 10%, transparent);
  border-radius: inherit;
  animation: copy-feedback-pulse 0.3s ease;
}

@keyframes copy-feedback-pulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .plexa-announcement-bar {
    transition: none;
  }

  .announcement-bar--hiding {
    animation: none;
    display: none !important;
  }

  .copy-feedback::after {
    animation: none;
  }
}

/* ==========================================================================
   Links Component Layout
   ========================================================================== */

/**
 * Horizontal layout for Links_Component
 * Overrides schema CSS flex-direction: column
 * Usage: "layout": "horizontal" in JSON
 */
.links-horizontal {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
}

/**
 * Address Component Multiline
 * Ensures address lines display on separate lines
 * Usage: "format": "multiline" in JSON
 */
.address-multiline .address-line {
  display: block;
}

/* A bar that paints its own ground (Base_Bar background_inherit: false emits
   bar--bg-solid). Without this rule the footer's bg-layers transparency shows
   the footer surface through a brand cap; the mode's base-100 is the ground. */
.bar--bg-solid {
	background-color: var(--color-base-100);
}


/* ==========================================================================
   HEADER SYSTEM (header research §4, HG3-HG10, 2026-09-28)

   Structural only: sizes, flex, what shows at which width. Every colour is a
   token; nothing here is a design choice a layout could make instead.
   ========================================================================== */

/* HG3 — a spread bar is a flex row sized by its content. The first and last
   columns (logo, actions) take their own width; the columns between (the
   nav) take the rest and may shrink below their content, so a long nav never
   pushes the button off the bar. Two columns sit at either end. */
.bar-spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}
.bar-spread > .bar-col--edge {
  flex: none;
}
.bar-spread > .bar-col--fill {
  flex: 1 1 auto;
  min-width: 0;
}

/* HG3 — a hidden component takes its wrapper with it (Plexa_Part::
   hidden_ranges()). !important because every bar prints `#<id> .bar-item
   { display: flex }`, an id-scoped rule no class can outrank otherwise. */
@media (max-width: 639px) {
  .bar-item.bar-item--hide-xs {
    display: none !important;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .bar-item.bar-item--hide-sm {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bar-item.bar-item--hide-md {
    display: none !important;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .bar-item.bar-item--hide-lg {
    display: none !important;
  }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .bar-item.bar-item--hide-xl {
    display: none !important;
  }
}
@media (min-width: 1536px) {
  .bar-item.bar-item--hide-2xl {
    display: none !important;
  }
}

/* HG4 — the header wordmark sizes, 20px and 28px. Set as the variable the
   Logo_Component's own (id-scoped) .logo-text rule reads, so a class can
   move it. */
.logo-text--md {
  --plexa-logo-text-size: 1.25rem;
}
.logo-text--lg {
  --plexa-logo-text-size: 1.75rem;
}

/* HG7 — the drawer's close button, a 44x44 target inside the panel. */
.mobile-menu-close {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-base-content);
}

/* HG8 — the call as an icon: a 44x44 tel link. `-below-<bp>` is icon-only
   below the breakpoint and the full number from it. */
.phone-link--icon {
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
}
@media (max-width: 767px) {
  .phone-link--icon-below-md {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
  }
  .phone-link--icon-below-md .phone-number {
    display: none;
  }
}
@media (max-width: 1023px) {
  .phone-link--icon-below-lg {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
  }
  .phone-link--icon-below-lg .phone-number {
    display: none;
  }
}
@media (max-width: 1279px) {
  .phone-link--icon-below-xl {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
  }
  .phone-link--icon-below-xl .phone-number {
    display: none;
  }
}

/* HG10 — the announcement's dismiss, a 44x44 target (was p-1 around a 14px
   icon, about 22px). */
.bar-dismiss {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}
.bar-dismiss:hover,
.bar-dismiss:focus-visible {
  opacity: 1;
}

/* ==========================================================================
   BOTTOM CALL BAR (HG9) — a phone-and-tablet call bar fixed to the bottom of
   the viewport: one filled call button, an optional outline book link at a
   third. Below lg only; no animation (motion budget: none in chrome).
   ========================================================================== */
.bottom-call-bar {
  display: none;
}
@media (max-width: 1023px) {
  .bottom-call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: calc(4rem + env(safe-area-inset-bottom, 0px));
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background-color: var(--color-base-100);
    border-top: 1px solid var(--color-base-200);
  }
  .bottom-call-bar__call {
    flex: 1 1 auto;
    min-height: 3rem;
  }
  .bottom-call-bar__book {
    flex: 0 0 33.333%;
    min-height: 3rem;
  }
  body:has(.bottom-call-bar) {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
  body.mobile-menu-open .bottom-call-bar {
    display: none;
  }
}

/* ==========================================================================
   HEADER REVIEW ROUND 1 (2026-09-28) — defects seen in the 56 proof captures.
   Structural only; every colour is still a token.
   ========================================================================== */

/* #1 — the announcement holds its content. `bar--height-xs` fixed it at 40px,
   so on a phone the wrapped message and its link spilled out of the bar and
   the link was drawn over the main bar's wordmark. At least 40px, as tall as
   it needs. Below md the message and the link stack, centred (the content's
   own id-scoped rule centres its items) and clear of the 44px dismiss on
   both sides so the centre line is the bar's; from md they share one line
   as before. */
.header-bars .plexa-announcement-bar.bar--height-xs {
  height: auto;
  min-height: 40px;
}
@media (max-width: 767px) {
  .plexa-announcement-bar .announcement-content {
    flex-direction: column;
    text-align: center;
  }
  .plexa-announcement-bar .announcement-content > a {
    margin-left: 0;
  }
  .plexa-announcement-bar[data-dismissible="true"] > .container {
    padding-inline: 3rem;
  }
}

/* #3 — inline hours are one line; a bar never wraps them. */
.hours--inline {
  white-space: nowrap;
}

/* Footer review round 1, #1 — the clock of an icon-row hours (default, line)
   sits on the FIRST line: the row is top-aligned, and the icon's box is one
   text line tall (Font Awesome sets line-height 1) so the glyph centres on
   that line rather than riding above it. */
.hours.items-start > i {
  line-height: inherit;
}

/* #7 / #8 — a spread bar's columns.
   A column with nothing showing takes no room and no gap (the quiet header's
   burger column, empty from lg, left the nav 24px short of the container
   edge). The first column is exempt: it holds the row's start. */
@media (max-width: 639px) {
  .bar-spread > :not(:first-child):not(:has(> .bar-item:not(.bar-item--hide-xs))) {
    display: none;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .bar-spread > :not(:first-child):not(:has(> .bar-item:not(.bar-item--hide-sm))) {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bar-spread > :not(:first-child):not(:has(> .bar-item:not(.bar-item--hide-md))) {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .bar-spread > :not(:first-child):not(:has(> .bar-item:not(.bar-item--hide-lg))) {
    display: none;
  }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .bar-spread > :not(:first-child):not(:has(> .bar-item:not(.bar-item--hide-xl))) {
    display: none;
  }
}
@media (min-width: 1536px) {
  .bar-spread > :not(:first-child):not(:has(> .bar-item:not(.bar-item--hide-2xl))) {
    display: none;
  }
}

/* The mark gives way before the actions do: when a phone row cannot hold the
   wordmark and the call on one line (the focused header at 320-412), the
   first column shrinks and the wordmark wraps rather than pushing the number
   off the bar. Below sm only, where no header nav shows: wider, a nav column
   is the one that gives way, and a wordmark must never wrap for a few px. */
@media (max-width: 639px) {
  .bar-spread > .bar-col--edge:first-child {
    flex: 0 1 auto;
    min-width: 0;
  }
  .bar-spread > .bar-col--edge:first-child .logo-text {
    --plexa-logo-text-wrap: normal;
    line-height: 1.2;
  }
}

/* #7 — the call in a header keeps its number whole; its label gives way
   below sm, the number never does. */
.header-bars .phone-number {
  white-space: nowrap;
}
@media (max-width: 639px) {
  .header-bars .phone-label {
    display: none;
  }
}

/* ==========================================================================
   HEADER REVIEW ROUND 2 (2026-09-28)
   ========================================================================== */

/* #1 — the centred (sticky.condense) header: a brand row that retracts
   (data-sticky="false") over the row that stays, which carries the mark,
   the nav and the actions.
   Below xl, where the nav is in the drawer, the brand row is not drawn at
   rest either: the row that stays is the whole header (mark left, call
   icon, button, burger), so a narrow screen never spends two rows. */
@media (max-width: 1279px) {
  .header-bars--condense > .plexa-main-bar[data-sticky="false"] {
    display: none;
  }
}
/* From xl, at rest: the brand row is three tracks, the outer two equal, so
   the wordmark sits on the page axis whatever the call and the button
   measure (an empty right track still keeps its share); the row that stays
   shows the nav alone, centred on the same axis — its edge columns (mark,
   call, button) are the brand row's at rest and return when it pins. */
@media (min-width: 1280px) {
  .header-bars--condense > .plexa-main-bar[data-sticky="false"] > div > .bar-spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 1.5rem;
  }
  .header-bars--condense > .plexa-main-bar[data-sticky="false"] > div > .bar-spread > :first-child {
    grid-column: 1;
    justify-self: start;
  }
  .header-bars--condense > .plexa-main-bar[data-sticky="false"] > div > .bar-spread > .bar-col--fill {
    grid-column: 2;
  }
  .header-bars--condense > .plexa-main-bar[data-sticky="false"] > div > .bar-spread > :last-child:not(:first-child) {
    grid-column: 3;
    justify-self: end;
  }
  .header-bars--condense:not(.is-scrolled) > .bar[data-sticky="true"] > div > .bar-spread > .bar-col--edge {
    display: none;
  }
}

/* #2 — a text link in the header or its drawer is the library's link item
   (a.simple-section__link, as the post-loop read link since the close
   review): the bar's own ink (12.6:1 on a light bar), bold, a 2px primary
   underline at 0.3em, thicker on hover. Primary-coloured text on a light
   bar was ~2.3:1. !important because Link_Component prints its colour and
   its `text-decoration: none` shorthand in an id-scoped rule no class can
   outrank (as .bar-item--hide-*, above). */
.header-bars a.link-component,
.plexa-slide-mobile-menu a.link-component {
  color: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-primary) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.3em !important;
}
.header-bars a.link-component:hover,
.plexa-slide-mobile-menu a.link-component:hover {
  text-decoration-thickness: 3px !important;
}