/*
Theme Name:   DepressionHurts Child
Theme URI:    https://depressionhurts.ca/
Description:  Child theme for DepressionHurts. Hosts site-specific customizations so the parent theme stays update-safe. Created 2026-04-28.
Author:       Jayr Sullano (MDSC Web & Digital Support)
Author URI:   https://mdsc.ca/
Template:     DepressionHurts
Version:      1.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  depressionhurts-child
*/

/* ==========================================================================
   Migrated from Customizer Custom CSS (was post ID 5173, post_name=depressionhurts).
   Under the active child theme, wp_get_custom_css() looks up by stylesheet slug
   (depressionhurts-child) and finds nothing, so the parent's Customizer rules
   were not loading on the front end. Code-managed here is the long-term home.
   ========================================================================== */

/* --- Hide the small "scroll-state" nav item that the JS toggles via .nav__item--scroll --- */
.nav__item--scroll {
  display: none;
}

/* --- Tighter header layout in the awkward 960–1049px breakpoint where the menu
       wraps because the logo+menu won't fit at default spacing --- */
@media (min-width: 60em) and (max-width: 65.5625em) {
  .header__container {
    margin: 0 10px 0 5px;
    padding: 0;
  }
  .nav__link {
    margin: 0 auto;
    z-index: 1;
    max-width: 120px;
    padding: 0 1px;
  }
}

/* --- Mobile (≤719.84px): Tone the MDSC start-section logo to grayscale,
       and add breathing room above the simple CTA button --- */
@media (max-width: 44.99em) {
  .start__logo-mdsc {
    filter: saturate(5%) contrast(5%) brightness(1%) invert(100%) sepia(100%) hue-rotate(180deg);
  }
  .o-button--simple {
    margin-top: 10px;
  }
}

/* --- Small mobile (≤460px): subtle dim on the start hero background --- */
@media (max-width: 28.75em) {
  .start__bg-img {
    opacity: 0.9;
  }
}

/* --- Per-page heading colour overrides — designer wanted h3/h4 in brand blue
       on these specific pages instead of the global heading color --- */
.page-id-5356 h3,
.page-id-5356 h4,
.page-id-6430 h3,
.page-id-6430 h4 {
  color: #4EBDF0;
  padding-bottom: 1em;
  padding-top: 1em;
}

.page-id-5639 h3,
.page-id-5639 h4,
.page-id-6527 h3,
.page-id-6527 h4 {
  color: #4EBDF0;
  padding-bottom: 1em;
  padding-top: 0;
}

/* Tighter Elementor tab spacing on the same two pages */
.page-id-5639 .elementor-widget-tabs .elementor-tab-desktop-title,
.page-id-6527 .elementor-widget-tabs .elementor-tab-desktop-title {
  padding: 15px 5px;
}

/* --- Stages-of-depression interactive: swap desktop ↔ mobile renderer at 600px
       on the three pages that use it --- */
@media (max-width: 37.5em) {
  .page-id-5639 .stages-desktop,
  .page-id-6527 .stages-desktop,
  .page-id-6972 .stages-desktop {
    display: none;
  }
}

@media (min-width: 37.5625em) {
  .page-id-5639 .stages-mobile,
  .page-id-6527 .stages-mobile,
  .page-id-6972 .stages-mobile {
    display: none;
  }
}