/* ==========================================================
   Care Companion Advocates — Custom Theme CSS
   Child theme of GeneratePress

   Organization:
   1.  Design tokens
   2.  Base reset and body
   3.  Typography
   4.  Layout utilities
   5.  Header
   6.  Navigation
   7.  Page hero sections
   8.  Buttons
   9.  Services section
   10. Resources and forms lists
   11. Blog (archive and single)
   12. Contact page
   13. Footer
   14. Block editor overrides
   15. Accessibility utilities
   16. Responsive overrides
   ========================================================== */

/* ── 1. Design Tokens ────────────────────────────────────── */

:root {
  /* Backgrounds */
  --cc-bg:             #faf8fc;
  --cc-bg-alt:         #f0ebf7;
  --cc-card:           #ffffff;

  /* Text */
  --cc-text:           #1a0b2e;
  --cc-text-muted:     #6b5b8c;

  /* Brand plum — softer, warmer tone selected by owner */
  --cc-primary:        #6b3870;
  --cc-primary-dark:   #4a2250;
  --cc-primary-light:  #f3ecf5;

  /* Logo accent colors */
  --cc-teal:           #2a9daa;
  --cc-gold:           #c9a84c;
  --cc-orange:         #f5a528;

  /* UI */
  --cc-border:         #e0d4e5;
  --cc-error:          #b5321e;

  /* Focus ring — uses gold for visibility on plum backgrounds */
  --cc-focus:          #c9a84c;

  --cc-font-heading:   'Lora', Georgia, 'Times New Roman', serif;
  --cc-font-body:      'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                       'Segoe UI', sans-serif;

  --cc-radius:         0.5rem;
  --cc-radius-lg:      1rem;
  --cc-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.07);
  --cc-shadow:         0 2px 10px rgba(0, 0, 0, 0.09);

  --cc-container:      1100px;
  --cc-gap:            1.5rem;
}

/* ── 2. Base ─────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--cc-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cc-text);
  background-color: var(--cc-bg);
}

img {
  max-width: 100%;
  height: auto;
}

/* ── 3. Typography ───────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: var(--cc-font-heading);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cc-text);
}

h1, .entry-title { font-size: clamp(2rem,   5vw,  2.875rem); }
h2              { font-size: clamp(1.5rem,  3.5vw, 2.125rem); }
h3              { font-size: clamp(1.15rem, 2.5vw, 1.5rem);   }
h4              { font-size: 1.125rem; }

a {
  color: var(--cc-primary-dark);
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--cc-primary);
}

p {
  max-width: 68ch;
}

/* Remove max-width constraint inside narrow containers and footers */
.site-footer p,
.widget p,
.cc-contact-col p,
address p {
  max-width: none;
}

/* ── 4. Layout utilities ─────────────────────────────────── */

.cc-section {
  padding: 4rem 0;
}

/* Tighten spacing between blocks within a section */
.cc-section .wp-block-heading + p,
.cc-section .wp-block-heading + .wp-block-paragraph {
  margin-top: 0.5rem;
}

.cc-section .wp-block-list {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.cc-section--alt {
  background: var(--cc-bg-alt);
}

.cc-section--white {
  background: var(--cc-card);
}

.cc-section--dark {
  background: var(--cc-primary-dark);
  color: #fff;
}

.cc-section__header {
  margin-bottom: 2.5rem;
}

.cc-section__header h2 {
  margin-bottom: 0.5rem;
}

.cc-section__header p {
  color: var(--cc-text-muted);
  font-size: 1.05rem;
}

/* GeneratePress container override */
.inside-article,
.entry-content {
  max-width: none;
}

/* ── 5. Header ───────────────────────────────────────────── */

.site-header {
  background: var(--cc-primary);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .inside-header {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.site-title {
  font-family: var(--cc-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  line-height: 1.25;
}

.site-title a {
  color: #fff;
  text-decoration: none;
}

.site-description {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-top: 0.2rem;
}

/* ── 6. Navigation ───────────────────────────────────────── */

/* GP sometimes renders nav as a separate .navigation-top bar outside .site-header.
   Give it the same purple background so it merges visually with the header. */
.navigation-top {
  background-color: var(--cc-primary) !important;
  border-bottom: none;
}

.navigation-top .inside-navigation {
  background-color: transparent !important;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0 var(--cc-gap);
}

.main-navigation {
  font-family: var(--cc-font-body);
}

/* Tighter sizing so all 7 nav items fit on one line */
.main-navigation .menu-item a,
.navigation-top .menu-item a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
  padding: 0.4rem 0.55rem;
  border-radius: var(--cc-radius);
  transition: color 0.15s, background-color 0.15s;
  display: block;
  white-space: nowrap;
}

.main-navigation .menu-item a:hover,
.navigation-top .menu-item a:hover,
.main-navigation .menu-item.current-menu-item > a,
.navigation-top .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-ancestor > a,
.navigation-top .menu-item.current-menu-ancestor > a {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Prevent nav list from wrapping to a second line */
.main-navigation ul,
.navigation-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
}

/* Mobile navigation toggle */
.mobile-menu-control-wrapper button,
.menu-toggle {
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--cc-radius);
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  color: #fff;
  font-size: 0.875rem;
  font-family: var(--cc-font-body);
  transition: background-color 0.15s;
}

.mobile-menu-control-wrapper button:hover,
.menu-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ── 7. Page heroes ──────────────────────────────────────── */

.cc-hero {
  background: linear-gradient(160deg, var(--cc-primary-light) 0%, var(--cc-bg-alt) 100%);
  border-bottom: 1px solid rgba(107, 56, 112, 0.1);
  padding: 4rem 0 3.5rem;
  text-align: center;
}

.cc-hero--home {
  padding: 5rem 0 4.5rem;
}

.cc-hero__inner {
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0 var(--cc-gap);
}

.cc-hero h1,
.cc-hero .wp-block-heading {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.875rem;
}

.cc-hero__subtitle,
.cc-hero > p,
.cc-hero .wp-block-paragraph {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--cc-text-muted);
  max-width: 62ch;
  line-height: 1.65;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.cc-hero .wp-block-buttons {
  justify-content: center;
}

.cc-hero__actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}

/* Interior page hero (simpler) */
.cc-page-header {
  background: var(--cc-primary-light);
  border-bottom: 1px solid rgba(74, 124, 110, 0.1);
  padding: 2.75rem 0 2.5rem;
}

.cc-page-header h1 {
  margin-bottom: 0.5rem;
}

.cc-page-header p {
  color: var(--cc-text-muted);
  font-size: 1.0625rem;
  max-width: 60ch;
  margin: 0;
}

/* ── 8. Buttons ──────────────────────────────────────────── */

.wp-block-button__link,
.button,
.cc-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--cc-radius);
  font-family: var(--cc-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
  line-height: 1.4;
}

/* Primary — solid green */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.cc-btn,
.cc-btn--primary {
  background: var(--cc-primary);
  color: #fff !important;
  border-color: var(--cc-primary);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.cc-btn:hover,
.cc-btn--primary:hover {
  background: var(--cc-primary-dark);
  border-color: var(--cc-primary-dark);
  color: #fff !important;
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.cc-btn--outline {
  background: transparent;
  color: var(--cc-primary-dark) !important;
  border-color: var(--cc-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.cc-btn--outline:hover {
  background: var(--cc-primary-light);
  color: var(--cc-primary-dark) !important;
}

/* Dark section button adjustments */
.cc-section--dark .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff !important;
}

.cc-section--dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
}

/* ── 9. Services section ─────────────────────────────────── */

.cc-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

/* Individual service item — add class "service-item" to Group block */
.service-item {
  background: var(--cc-card);
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 2rem;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-item:hover {
  box-shadow: 0 4px 20px rgba(107, 56, 112, 0.15);
  border-color: var(--cc-primary);
  transform: translateY(-2px);
}

.service-item h2,
.service-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.625rem;
  color: var(--cc-primary-dark);
}

.service-item p {
  color: var(--cc-text-muted);
  font-size: 0.9375rem;
  margin-bottom: 0.875rem;
  max-width: none;
  flex-grow: 1;
}

/* Pricing badge/line — add class "service-price" to paragraph */
.service-price {
  font-weight: 600;
  color: var(--cc-primary-dark);
  font-size: 0.9375rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cc-border);
  max-width: none;
}

/* Featured service (initial consultation) */
.service-item--featured {
  border-color: var(--cc-primary);
  border-width: 2px;
  background: var(--cc-primary-light);
  box-shadow: 0 2px 12px rgba(107, 56, 112, 0.12);
}

.service-item--featured:hover {
  box-shadow: 0 6px 24px rgba(107, 56, 112, 0.22);
  transform: translateY(-3px);
}

/* "Free First Step" label badge — gold on dark for strong contrast */
.service-badge {
  display: inline-block;
  background: var(--cc-primary-dark);
  color: var(--cc-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
  border: 1.5px solid var(--cc-gold);
}

/* ── 10. Resources and forms lists ───────────────────────── */

/* Add class "cc-resource-list" to outer Group block */
.cc-resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Individual resource row — add class "cc-resource-item" to each Group block */
.cc-resource-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: var(--cc-card);
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  transition: box-shadow 0.18s, border-color 0.18s;
  flex-wrap: wrap;
}

.cc-resource-item:hover {
  box-shadow: var(--cc-shadow-sm);
  border-color: rgba(74, 124, 110, 0.3);
}

.cc-resource-item__text h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.cc-resource-item__text p {
  font-size: 0.875rem;
  color: var(--cc-text-muted);
  margin: 0;
  max-width: none;
  line-height: 1.5;
}

/* WordPress File block customization */
.wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-card);
  flex-wrap: wrap;
}

.wp-block-file a:not(.wp-block-file__button) {
  color: var(--cc-text);
  font-weight: 500;
  text-decoration: none;
}

.wp-block-file a:not(.wp-block-file__button):hover {
  color: var(--cc-primary-dark);
}

.wp-block-file__button {
  background: var(--cc-primary);
  color: #fff !important;
  border-radius: var(--cc-radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid var(--cc-primary);
  transition: background-color 0.15s;
  flex-shrink: 0;
}

.wp-block-file__button:hover {
  background: var(--cc-primary-dark);
  border-color: var(--cc-primary-dark);
  color: #fff !important;
}

/* ── 11. Blog ────────────────────────────────────────────── */

/* Archive (blog index) */
.blog .entry,
.archive .entry {
  background: var(--cc-card);
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.18s, border-color 0.18s;
}

.blog .entry:hover,
.archive .entry:hover {
  box-shadow: var(--cc-shadow);
  border-color: rgba(74, 124, 110, 0.25);
}

.blog .entry-title a,
.archive .entry-title a {
  text-decoration: none;
  color: var(--cc-text);
  transition: color 0.15s;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover {
  color: var(--cc-primary-dark);
}

.entry-meta,
.posted-on,
.byline {
  font-size: 0.8125rem;
  color: var(--cc-text-muted);
}

/* Single post */
.single .entry-title {
  margin-bottom: 0.625rem;
}

.single .entry-meta {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cc-border);
}

.single .entry-content p,
.single .entry-content li {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.single .entry-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.875rem;
  font-size: 1.5rem;
}

.single .entry-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.single .entry-content ul,
.single .entry-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.single .entry-content li {
  margin-bottom: 0.4rem;
}

.single .entry-content strong {
  font-weight: 600;
  color: var(--cc-text);
}

/* Post navigation */
.post-navigation {
  border-top: 1px solid var(--cc-border);
  padding-top: 2rem;
  margin-top: 3rem;
}

.post-navigation a {
  color: var(--cc-primary-dark);
  text-decoration: none;
  font-weight: 500;
}

/* ── 12. Contact page ────────────────────────────────────── */

/* Two-column layout for contact page — add "cc-contact-layout" class to Columns block */
.cc-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3.5rem;
  align-items: start;
}

.cc-contact-col h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.cc-contact-col address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.7;
}

.cc-contact-col address a {
  color: var(--cc-primary-dark);
}

/* WPForms styling */
.wpforms-container .wpforms-field {
  margin-bottom: 1.25rem;
}

.wpforms-container label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cc-text);
  display: block;
  margin-bottom: 0.35rem;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container select,
.wpforms-container textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius);
  font-family: var(--cc-font-body);
  font-size: 1rem;
  color: var(--cc-text);
  background: var(--cc-card);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  outline: none;
  border-color: var(--cc-primary);
  box-shadow: 0 0 0 3px rgba(74, 124, 110, 0.18);
}

.wpforms-container textarea {
  min-height: 8rem;
  resize: vertical;
}

.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"] {
  background: var(--cc-primary);
  color: #fff;
  border: 2px solid var(--cc-primary);
  border-radius: var(--cc-radius);
  padding: 0.75rem 1.75rem;
  font-family: var(--cc-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container input[type="submit"]:hover {
  background: var(--cc-primary-dark);
  border-color: var(--cc-primary-dark);
}

/* ── 13. Footer ──────────────────────────────────────────── */

.site-footer {
  background: #1e0d25;
  color: #d8ccdf;
  font-size: 0.9375rem;
}

.site-footer .inside-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 3rem;
  padding: 3rem var(--cc-gap) 2.5rem;
  max-width: var(--cc-container);
  margin: 0 auto;
}

.site-footer .footer-widget-1,
.site-footer .footer-widget-2,
.site-footer .footer-widget-3 {
  padding: 0;
}

.site-footer .widget-title {
  font-family: var(--cc-font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #a886b0;
  margin-bottom: 0.875rem;
  font-weight: 600;
}

.site-footer a {
  color: #d8ccdf;
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer .widget li {
  margin-bottom: 0.4rem;
}

/* Footer site title/brand */
.cc-footer-brand-name {
  font-family: var(--cc-font-heading);
  font-size: 1.125rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.cc-footer-tagline {
  color: #a886b0;
  font-style: italic;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.cc-footer-social {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.875rem;
}

.cc-footer-social a {
  color: #a886b0;
  font-size: 0.875rem;
}

.cc-footer-social a:hover {
  color: #fff;
}

/* Copyright bar */
.copyright-bar,
.site-footer .site-info {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1.25rem var(--cc-gap);
  text-align: left;
  max-width: var(--cc-container);
  margin: 0 auto;
  font-size: 0.8125rem;
  color: #7a5580;
}

/* ── 14. Block editor overrides ──────────────────────────── */

/* Separator block */
.wp-block-separator {
  border-top: 1px solid var(--cc-border);
  margin: 2.5rem 0;
}

/* Quote block */
.wp-block-quote {
  border-left: 3px solid var(--cc-primary);
  padding-left: 1.25rem;
  margin-left: 0;
  font-style: italic;
  color: var(--cc-text-muted);
}

.wp-block-quote p {
  font-size: 1.0625rem;
}

/* Columns block */
.wp-block-columns {
  gap: var(--cc-gap);
}

/* Cover block (hero alternative) */
.wp-block-cover {
  min-height: 320px;
}

/* Group block — site CTA section */
.site-cta {
  padding: 4rem var(--cc-gap);
  text-align: left;
}

.site-cta h2,
.site-cta p {
  color: #fff;
}

.site-cta p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 58ch;
}

/* CTA buttons — equal height regardless of text length */
.site-cta .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: stretch;
}

.site-cta .wp-block-button {
  display: flex;
}

.site-cta .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* Values/beliefs list — styled with left border */
.cc-values-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cc-values-list li {
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--cc-primary);
  font-size: 0.9375rem;
  line-height: 1.65;
  background: var(--cc-primary-light);
  border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
}

.cc-values-list li strong {
  display: block;
  color: var(--cc-primary-dark);
  margin-bottom: 0.2rem;
}

/* Sidebar card (About page, blog post) */
.cc-sidebar-card {
  background: var(--cc-card);
  border: 1.5px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.cc-sidebar-card h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

.cc-sidebar-card p {
  font-size: 0.875rem;
  color: var(--cc-text-muted);
  margin-bottom: 1rem;
  max-width: none;
}

.cc-sidebar-card--tinted {
  background: var(--cc-primary-light);
  border-color: rgba(74, 124, 110, 0.2);
}

/* ── 15. Accessibility utilities ─────────────────────────── */

.screen-reader-text,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--cc-primary-dark);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--cc-radius) var(--cc-radius);
  font-size: 0.875rem;
  text-decoration: none;
  z-index: 200;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── 17. GeneratePress structural overrides ──────────────── */
/*
 * These rules prevent GeneratePress's Customizer-generated inline
 * styles and default selectors from overriding the brand design.
 * Touching the Customizer for colors/layout should not be necessary.
 */

/* Container — lock to design token regardless of Customizer width setting */
.container,
.grid-container {
  max-width: var(--cc-container) !important;
  padding-left: var(--cc-gap);
  padding-right: var(--cc-gap);
  box-sizing: border-box;
}

/* Content area — fill full width (sidebar is removed via PHP) */
.content-area,
.hentry,
.entry,
.page .hentry {
  width: 100%;
}

/* Remove GP's inner article padding on pages so our full-width block
   sections (cc-hero, cc-section, etc.) stretch edge-to-edge */
.page .inside-article,
.home .inside-article,
.blog .inside-article {
  padding: 0;
}

/* Keep readable padding for single blog posts */
.single .inside-article {
  padding: 2rem 2rem 3rem;
  max-width: 72ch;
  margin: 0 auto;
}

/* Suppress GP's auto-rendered .entry-header on pages.
   Our cc-hero / cc-page-header blocks own the H1 on every page. */
.page .entry-header {
  display: none;
}

/* Header — the outer element is purple; every inner wrapper must be transparent
   so the purple shows through. GP's Customizer sets white on .inside-header. */
.site-header,
.has-header-shadow .site-header {
  background-color: var(--cc-primary) !important;
  box-shadow: none !important;
}

.site-header .inside-header,
.site-header .inside-navigation,
.site-header .site-branding,
.site-header .navigation-branding,
.site-header .main-navigation,
.site-header .nav-primary,
.site-header .grid-container,
.site-header .grid-parent {
  background-color: transparent !important;
  background: transparent !important;
}

.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: 0.875rem var(--cc-gap);
  gap: 2rem;
}

/* Logo — constrain both height AND width because the Full logo PNG has wide
   surrounding whitespace. Switch to Small logo.png in Site Identity for a
   tighter crop, or get a transparent PNG to remove the white background. */
.custom-logo,
.site-logo,
.header-image {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.nav-primary .main-navigation a,
.nav-primary .menu-item > a,
.nav-primary .page_item > a {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent;
}

.nav-primary .menu-item > a:hover,
.nav-primary .menu-item > a:focus,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a,
.nav-primary .current-page-ancestor > a {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Sub-menus — target ul.sub-menu directly so GP can't override */
ul.sub-menu {
  background-color: var(--cc-primary-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 0 var(--cc-radius) var(--cc-radius) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  min-width: 180px;
  padding: 0.375rem 0 !important;
}

ul.sub-menu li a {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0 !important;
  white-space: nowrap;
  background: transparent !important;
}

ul.sub-menu li a:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Arrow indicator on parent items that have children */
.nav-primary .menu-item-has-children > a::after,
.navigation-top .menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 0.7em;
  opacity: 0.75;
}

/* Body background — GP sometimes sets this as inline style */
body {
  background-color: var(--cc-bg) !important;
}

/* Footer — prevent GP from adding conflicting background */
.site-footer,
.footer-widgets {
  background-color: #1e0d25 !important;
}

/* GP adds padding inside .inside-footer — neutralize it so our
   grid layout from section 13 controls the spacing */
.site-footer .inside-footer {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove GP's default breadcrumb / page title area on pages */
.page .page-header,
.page .archive-title {
  display: none;
}

/* Prevent GP from adding sidebar widget-area styles that shift layout */
.widget-area {
  display: none;
}

/* site-cta background — the dark CTA section needs the dark color,
   not GP's body background */
.site-cta,
.cc-section.site-cta {
  background-color: var(--cc-primary-dark) !important;
}

/* Services grid section — give it the alt background so it reads as a
   primary feature zone rather than blending into the page */
.cc-services-grid ~ *,
.wp-block-columns.cc-services-grid {
  background: transparent;
}

.cc-section:has(.cc-services-grid) {
  background-color: var(--cc-bg-alt) !important;
}

/* ── 16. Responsive overrides ────────────────────────────── */

@media (max-width: 900px) {
  .cc-contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .site-footer .inside-footer {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
  }

  .site-footer .footer-widget-1 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .cc-section {
    padding: 3rem 0;
  }

  .cc-hero--home {
    padding: 3.5rem 0 3rem;
  }

  .cc-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-hero__actions .wp-block-button__link,
  .cc-hero__actions .cc-btn {
    text-align: center;
    width: 100%;
  }

  .site-footer .inside-footer {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .site-footer .footer-widget-1 {
    grid-column: auto;
  }
}