/* Design tokens — single source of truth for static-site */
:root {
  /* Brand colors — Peptide Resource Guide palette */
  --color-primary: #00A89E;
  --color-secondary: #002B5B;
  --color-heading: #002B5B;
  --color-accent: #20B2AA;
  --color-sky: #CDE6F5;
  --color-primary-dark: #008F87;
  --color-secondary-light: #003D7A;

  /* Legacy aliases used throughout component CSS */
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-secondary);
  --accent-color: var(--color-accent);

  /* Typography & surfaces */
  --color-text: #1A2B3C;
  --text-color: var(--color-text);
  --color-text-muted: #64748b;
  --text-muted: var(--color-text-muted);
  --color-bg: #F4FAFD;
  --bg-color: var(--color-bg);
  --color-card: #ffffff;
  --card-bg: var(--color-card);
  --color-border: #d4e8f2;
  --border-color: var(--color-border);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,43,91,0.04), 0 1px 2px rgba(0,43,91,0.06);
  --shadow-header-scrolled: 0 4px 24px rgba(0,43,91,0.08), 0 1px 3px rgba(0,43,91,0.04);
  --shadow-dropdown: 0 20px 50px -12px rgba(0,43,91,0.12), 0 8px 20px -8px rgba(0,43,91,0.06);
  --shadow-home-sm: 0 2px 4px rgba(0,43,91,0.06);
  --shadow-home-md: 0 4px 12px rgba(0,43,91,0.08);
  --shadow-home-lg: 0 10px 25px rgba(0,43,91,0.1);
  --shadow-home-xl: 0 20px 40px rgba(0,43,91,0.15);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out-expo);
  --transition-base: 250ms var(--ease-out-expo);
  --transition-slow: 400ms var(--ease-out-expo);

  /* Layout */
  --header-height: 58px;
  --header-height-desktop: 66px;
  --logo-height-mobile: 72px;
  --logo-height-desktop: 96px;
  --logo-overhang: 28px;
  --logo-overhang-mobile: 20px;
  --logo-top-offset: 8px;
  --logo-top-offset-desktop: 16px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Homepage-specific */
  --color-home-gradient-start: #CDE6F5;
  --color-home-gradient-end: #FFFFFF;
  --color-home-light-bg: #EAF4FB;

  /* Catalog-specific */
  --color-catalog-bg: #F4FAFD;
  --color-catalog-text: #4a5568;
  --color-catalog-heading: var(--color-heading);

  /* Footer */
  --footer-bg: var(--color-secondary);
  --footer-text: #ecf0f1;
  --footer-accent: var(--color-primary);
  --footer-border: #003D7A;
  --footer-hover: var(--color-accent);
  --footer-gradient: linear-gradient(135deg, #002B5B 0%, #00A89E 100%);

  /* Protocol / dosage chart */
  --dch-head-bg: #EAF4FB;
  --dch-head-border: #CDE6F5;
  --dch-text-color: #002B5B;
  --dch-desc-color: #46586a;

  /* Nav blur fallback */
  --pdcg-blur: 5px;

  /* Page template (about-us, protocol pages) */
  --page-primary: var(--color-primary);
  --page-secondary: var(--color-secondary);
  --page-accent: var(--color-accent);
  --page-bg: var(--color-catalog-bg);
  --page-card: var(--color-card);
  --page-text: var(--color-catalog-text);
  --page-heading: var(--color-catalog-heading);
  --page-border: var(--color-border);
  --page-light-bg: var(--color-home-light-bg);
  --page-note-bg: #EAF4FB;
  --page-note-border: #CDE6F5;
  --page-gradient: linear-gradient(135deg, #002B5B 0%, #00A89E 100%);
  --page-shadow-sm: var(--shadow-home-sm);
  --page-shadow-md: var(--shadow-home-md);
  --page-shadow-lg: var(--shadow-home-lg);
  --page-shadow-xl: var(--shadow-home-xl);
  --section-spacing: 20px;
  --content-padding: 10px;
  --hero-padding-mobile: 30px 0 20px;
  --card-radius: 0px;

  /* Site-wide container — header, content, footer, catalog, homepage */
  --prg-container-max-width: 1200px;
  --prg-container-gutter: 20px;

  /* Homepage block layout — shared by hero + section blocks */
  --prg-home-max-width: var(--prg-container-max-width);
  --prg-home-gutter: var(--prg-container-gutter);

  /* Sticky header / TOC offsets */
  --site-header-offset: 0px;
  --site-sticky-offset: 90px;
}


/* Prevent horizontal scroll from full-bleed blocks without breaking position: sticky */
html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

.wp-site-blocks,
main,
.page-layout {
  overflow: visible;
}

.admin-bar {
  --site-header-offset: var(--wp-admin--admin-bar--height, 32px);
  --site-sticky-offset: calc(90px + var(--wp-admin--admin-bar--height, 32px));
}

/*
 * Reinforce alignfull homepage blocks inside constrained post content.
 * home.html uses layout constrained so WP root-padding breakout applies.
 */
:root :where(.is-layout-constrained) > .wp-block-peptideresourceguide-home-hero.alignfull,
:root :where(.is-layout-constrained) > .wp-block-peptideresourceguide-card-section.alignfull,
:root :where(.is-layout-constrained) > .wp-block-peptideresourceguide-why-guides.alignfull,
:root :where(.is-layout-constrained) > .wp-block-peptideresourceguide-peptide-calculator.alignfull,
:root :where(.is-layout-constrained) > .wp-block-peptideresourceguide-cta-section.alignfull {
  max-width: none;
  width: auto;
  box-sizing: border-box;
}

.has-global-padding :where(.is-layout-constrained) > .wp-block-peptideresourceguide-home-hero.alignfull,
.has-global-padding :where(.is-layout-constrained) > .wp-block-peptideresourceguide-card-section.alignfull,
.has-global-padding :where(.is-layout-constrained) > .wp-block-peptideresourceguide-why-guides.alignfull,
.has-global-padding :where(.is-layout-constrained) > .wp-block-peptideresourceguide-peptide-calculator.alignfull,
.has-global-padding :where(.is-layout-constrained) > .wp-block-peptideresourceguide-cta-section.alignfull {
  margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
  margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}