/*
 Theme Name: Peace Center Child v4.1
 Theme URI: https://example.org/
 Description: Child theme for Twenty Twenty-Five with Peace Center palette, typography, editor-safe patterns, and a registered "Peace Center" patterns category.
 Author: You
 Template: twentytwentyfive
 Version: 1.2.4
*/

/* ================= Header: sticky + shrink ================= */

.pc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  transition: box-shadow .2s ease, padding .2s ease;
}

/* Admin bar offsets */
@media (min-width: 783px) { body.admin-bar .pc-header { top: 32px; } }
@media (max-width: 782px) { body.admin-bar .pc-header { top: 46px; } }

/* Size variables (normal) */
html {
  --pc-header-pad: 18px;      /* header padding top/bottom */
  --pc-logo-size: 64px;       /* logo height */
  --pc-item-pad: 12px;        /* nav link v-padding */
  --pc-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Collapsed state (on scroll) */
html.is-scrolled {
  --pc-header-pad: 6px;
  --pc-logo-size: 34px;
  --pc-item-pad: 4px;
  --pc-shadow: 0 2px 12px rgba(0,0,0,.14);
}

/* Apply variables */
.pc-header {
  padding-block: var(--pc-header-pad);
  /* fallbacks for older engines/linters */
  padding-top: var(--pc-header-pad);
  padding-bottom: var(--pc-header-pad);
  box-shadow: var(--pc-shadow);
}

.pc-header .wp-block-site-logo img,
.pc-header .wp-block-site-logo svg {
  height: var(--pc-logo-size);
  width: auto;
  transition: height .2s ease, transform .2s ease;
}

.pc-header .wp-block-navigation__container > li > a {
  padding-block: var(--pc-item-pad);
  padding-top: var(--pc-item-pad);
  padding-bottom: var(--pc-item-pad);
  transition: padding .2s ease;
}

/* Keep transform origin sane if transforms are added later */
html.is-scrolled .pc-header .wp-block-group { transform-origin: top; }

/* Mobile: shrink less */
@media (max-width: 782px) {
  html { --pc-logo-size: 56px; --pc-header-pad: 12px; }
  html.is-scrolled { --pc-logo-size: 42px; --pc-header-pad: 8px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pc-header, .pc-header * { transition: none !important; }
}

/* Anchor comfort: keep anchor targets below the header */
[id] { scroll-margin-top: 90px; }

/* Ensure the HEADER (not an inner group) is the sticky element */
.pc-header .is-position-sticky { position: static !important; top: auto !important; }

/* Some themes/wrappers set overflow that kills sticky; allow it globally */
.wp-site-blocks { overflow: visible !important; }

/* ================= Buttons: shadow, pressed, accessible outlines ================= */

/* Subtle shadow for all buttons; pressed removes it */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  outline: 2px solid transparent;    /* keep a defined outline channel */
  outline-offset: 2px;
  transition: box-shadow .15s ease, outline-color .15s ease, outline-offset .15s ease, transform .05s ease;
}

.wp-block-button .wp-block-button__link:active,
.wp-element-button:active {
  box-shadow: none;
  transform: translateY(1px);
}

/* Keep keyboard focus visible for accessibility (use theme defaults unless overridden below) */
.wp-block-button .wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline-offset: 2px;
}

/* Respect reduced motion for buttons too */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button .wp-block-button__link,
  .wp-element-button {
    transition: none !important;
  }
}

/* ===== Accessible hover/focus outline for DEFAULT BLUE buttons only =====
   Problem: white outline on a blue button disappears against a white page.
   Solution: for "primary blue" buttons, use a darker-blue outline on hover/focus.
   Other palette-colored buttons (e.g., your green hero) retain the theme’s white outline.
*/

/* Reliable primary-blue token (covers 'primary' or 'primary-blue' slugs) */
:root {
  --pc-primary-blue: var(--wp--preset--color--primary, var(--wp--preset--color--primary-blue, #0d5bd7));
}

/* Target default-blue buttons:
   - no explicit palette background class
   - has-primary-background-color
   - has-primary-blue-background-color
*/
.wp-element-button:not([class*="-background-color"]):hover,
.wp-element-button.has-primary-background-color:hover,
.wp-element-button.has-primary-blue-background-color:hover,
.wp-element-button:not([class*="-background-color"]):focus,
.wp-element-button.has-primary-background-color:focus,
.wp-element-button.has-primary-blue-background-color:focus,
.wp-element-button:not([class*="-background-color"]):focus-visible,
.wp-element-button.has-primary-background-color:focus-visible,
.wp-element-button.has-primary-blue-background-color:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pc-primary-blue) 70%, black 30%) !important;
  outline-offset: 2px !important;
}

/* Fallback for browsers without color-mix */
@supports not (outline-color: color-mix(in srgb, white 50%, black 50%)) {
  .wp-element-button:not([class*="-background-color"]):hover,
  .wp-element-button.has-primary-background-color:hover,
  .wp-element-button.has-primary-blue-background-color:hover,
  .wp-element-button:not([class*="-background-color"]):focus,
  .wp-element-button.has-primary-background-color:focus,
  .wp-element-button.has-primary-blue-background-color:focus,
  .wp-element-button:not([class*="-background-color"]):focus-visible,
  .wp-element-button.has-primary-background-color:focus-visible,
  .wp-element-button.has-primary-blue-background-color:focus-visible {
    outline: 2px solid var(--pc-primary-blue) !important;
    outline-offset: 2px !important;
  }
}