/*
Theme Name: Sweet Grass Child
Template: hello-elementor
Version: 1.0.9
Description: Child theme of Hello Elementor for Sweet Grass Child and Family Resource Centre. Holds the dynamic copyright year and legal-page typography ported from the retired 10Web child theme.
*/

body.page-template-default:not(.elementor-page) .site-main {
  max-width: 70ch;
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 32px) clamp(72px, 9vw, 112px);
}

body.page-template-default:not(.elementor-page) .site-main .page-header,
body.page-template-default:not(.elementor-page) .site-main .page-content {
  max-width: 70ch;
  margin-inline: auto;
}

body.page-template-default:not(.elementor-page) .site-main .page-header {
  margin-bottom: clamp(28px, 4vw, 44px);
}

body.page-template-default:not(.elementor-page) .site-main .entry-title {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.08;
}

body.page-template-default:not(.elementor-page) .site-main .page-content {
  font-size: 1.0625rem;
  line-height: 1.72;
}

body.page-template-default:not(.elementor-page) .site-main .page-content p {
  margin: 0 0 1.25rem;
}

body.page-template-default:not(.elementor-page) .site-main .page-content h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
}

body.page-template-default:not(.elementor-page) .site-main .page-content h3 {
  margin: 1.75rem 0 0.65rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
}

body.page-template-default:not(.elementor-page) .site-main .page-content h2 + p,
body.page-template-default:not(.elementor-page) .site-main .page-content h3 + p {
  margin-top: 0;
}

/* sg-dropdown-contact-button (added 2026-08-18, revised)
 * "Contact Us" is styled as a pill for the horizontal desktop nav. Inside the mobile dropdown
 * that pill is inline-flex and taller than the row, and Elementor animates the panel to an
 * explicit height with overflow hidden - so the pill's rounded bottom was clipped by the panel
 * edge. Padding does not help: the panel height is set by JS, not by content.
 * Fix: in the dropdown only, render it as a full-width bar - which is exactly how it already
 * renders at the tablet breakpoint, so this makes the two consistent. Desktop is untouched.
 * To undo: delete this block. Backup: style.css.bak-2026-08-18
 */
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > a,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > .elementor-item {
	display: flex !important;
	width: 100% !important;
	justify-content: center;
	border-radius: 0 !important;
}

/* sg-dropdown-contact-hover (added 2026-08-18)
 * On hover the dropdown "Contact Us" row went unreadable: Elementor's dropdown-item hover
 * background (pale green) overrode the dark green pill background, while the pill rule keeps
 * color:#fff !important - white text on pale green. Pin the dark green for every interactive
 * state so the white text always has contrast. Covers Elementor's .highlighted and
 * .elementor-item-active classes as well as :hover/:focus.
 * To undo: delete this block. Backup: style.css.bak-2026-08-18
 */
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > a:hover,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > a:focus,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > a.highlighted,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > a.elementor-item-active,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > .elementor-item:hover,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > .elementor-item:focus,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > .elementor-item.highlighted,
.sweetgrass-site-header .elementor-nav-menu--dropdown .sg-contact-button > .elementor-item.elementor-item-active {
	background: #2F5E3A !important;
	color: #FFFFFF !important;
}