/* Accessibility fix: the static theme's .theme-btn (white text, 16px bold) on the raw
   --theme blue background comes out to 4.29:1 contrast, just under the WCAG AA 4.5:1
   minimum for this text size. Darkened by a few percent (#0077F0 -> #0068d1, visually
   near-identical) to reach 5.38:1. Scoped to this one selector — --theme itself is left
   untouched since it's also used for non-text purposes (icons, shapes, borders) where
   this doesn't apply and changing it would shift the palette beyond what's needed. */
.theme-btn {
  background-color: #0068d1;
}

/* Footer "Recent Events" thumbs: real photos vary in source dimensions, so crop
   consistently to the theme's fixed thumb box instead of stretching/distorting. */
.footer-widgets-wrapper .single-footer-widget .recent-post-area .recent-post-items .thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Footer "Opening Hours" items: plain text, not links (unlike the theme's other footer
   list-area items), so the theme's own `.list-area li a` color/icon-spacing rules don't
   apply — this reproduces the same look on the non-link .footer-hours-item span. Day
   and time sit on separate lines, so the item is a flex row (icon + 2-line text block)
   rather than the inline layout the plain link items use. */
.footer-widgets-wrapper .single-footer-widget .list-area li .footer-hours-item {
  display: flex;
  align-items: flex-start;
  color: var(--header);
}
.footer-widgets-wrapper .single-footer-widget .list-area li .footer-hours-item i {
  margin-right: 5px;
  margin-top: 5px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li .footer-hours-item__text {
  line-height: 1.6;
}
.footer-widgets-wrapper .single-footer-widget .list-area li .footer-hours-closed {
  color: #e53935;
  font-weight: 600;
}

/* Footer bottom bar: "Designed & developed by" is plain text inside .footer-menu li,
   not a link — the theme's own <a> color there is already white, but the surrounding
   text defaults to a dark gray that's hard to read against the dark footer-bottom
   background. Matches it to the same white as the Traxomedia link beside it. */
.footer-menu li {
  color: var(--white);
}

/* Main nav active-page highlight: the static theme only ever styled :hover
   (.header-main .main-menu ul li a:hover { color: var(--theme) !important }) — since
   each static demo page is standalone, it never needed an active-state look. Our nav
   sets an .active class per current page (nav_is_active() in includes/header.php) but
   nothing rendered it, so every link looked identical regardless of the current page.
   Matches the same color + !important the hover rule already uses, so switching pages
   reads as consistently "on" rather than only lighting up on hover. */
.header-main .main-menu ul li.active > a {
  color: var(--theme) !important;
}

/* Header "Call Us Now" widget — no static design existed for this (site-wide addition,
   sits after the Events nav item). Outlined icon badge, matching the reference screenshot
   rather than the solid-fill circle used for the same "Call Us Now" pattern elsewhere
   (event details CTA, tutor bios) — a deliberate different treatment for the header,
   which needs to read as lighter/more compact than a full CTA block. Hidden at the same
   breakpoint the theme already hides .header-button at (main.css:8195), since both
   pages' mobile offcanvas menu already repeats the phone number. */
.header-call-widget {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-call-widget__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--theme);
  border-radius: 50%;
  color: var(--theme);
  font-size: 18px;
}
.header-call-widget__content {
  white-space: nowrap;
}
.header-call-widget__content span {
  display: block;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
}
.header-call-widget__content h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.header-call-widget__content h5 a {
  color: var(--header);
}
.header-call-widget__content h5 a:hover {
  color: var(--theme);
}
@media (max-width: 1399px) {
  .header-1 .header-main .header-right .header-call-widget {
    display: none;
  }
}

/* Generic teacher/staff avatar placeholder — used wherever a real photo hasn't been
   provided yet (assets/img/team/, tutors/index.php). Neutral icon rather than a stock
   photo, so a real person's name is never shown next to a stranger's face. */
.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: var(--bg4);
  color: var(--theme);
}
.avatar-placeholder i {
  font-size: 64px;
}
/* Compact variant for inline rows (e.g. the About page's small founder-credit line)
   rather than a full card photo. */
.avatar-placeholder--sm {
  width: 60px;
  height: 60px;
  min-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
}
.avatar-placeholder--sm i {
  font-size: 28px;
}

/* Shared empty-state component (icon + message) for dynamic/DB-driven sections
   with no data — used site-wide via render_empty_state() in includes/functions.php.
   Originally scoped to .events-empty-state (assets/css/events-page.css); moved here
   so any page can use it without adding a page-specific stylesheet. A `--compact`
   modifier suits narrow contexts (e.g. the footer's Recent Events widget) where the
   full padded/dashed-border card would overwhelm the available space. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--border);
  border-radius: 20px;
}
.empty-state i {
  font-size: 40px;
  color: var(--theme);
  margin-bottom: 16px;
}
.empty-state p {
  color: var(--text);
  margin: 0;
}
.empty-state--compact {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: 12px;
}
.empty-state--compact i {
  font-size: 18px;
  margin-bottom: 0;
}
.empty-state--compact p {
  font-size: 14px;
}

/* Submit-button loading state (assets/js/form-validation.js adds .is-submitting +
   swaps in the spinner markup on a valid submit) — gives visible feedback instead of
   a button that just sits there while the page navigates. */
.theme-btn.is-submitting {
  opacity: 0.8;
  cursor: not-allowed;
}
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spinner-spin 0.7s linear infinite;
}
@keyframes btn-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Outline variant of the theme's .theme-btn — no static design shipped one, needed for
   the cookie banner's "Reject" action (a de-emphasized sibling to the filled "Accept"). */
.theme-btn--outline {
  background: transparent;
  color: var(--theme);
  border: 1.5px solid var(--theme);
}
.theme-btn--outline:hover {
  background: var(--theme);
  color: var(--white);
}

/* Footer "Call Us / Email Us / Location" row (includes/footer.php). Two problems
   with the raw theme rule set: (1) the global h1-h6 rule (main.css) forces
   text-transform: capitalize, which mangles the literal email address into
   Title Case ("Info@Daystarchildcare.Ca") — overridden back to none here since
   these three values are never meant to be capitalized; (2) the icon+content
   row had no wrap behavior, so two phone numbers or the full street address had
   nowhere to break except mid-word/mid-number. The two phone numbers are now
   stacked on their own lines (.phone-lines) instead of separated by a slash
   that could land mid-number, and the row/icon/content get proper wrap and
   shrink rules so long values reflow cleanly instead of overlapping. */
.contact-info-area .contact-info-items .content h3 {
  text-transform: none;
}
.contact-info-area .contact-info-items {
  flex-wrap: wrap;
  row-gap: 8px;
}
.contact-info-area .contact-info-items .icon {
  flex-shrink: 0;
}
.contact-info-area .contact-info-items .content {
  min-width: 0;
}
.contact-info-area .contact-info-items .content .phone-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 1450px) {
  .contact-info-area .contact-info-items .content h3 {
    font-size: 20px;
  }
}

/* Contact page's own "Call Us / Email Us / Location" card (contact-us/index.php,
   .contact-info-area-2 — a separate dark/theme-colored block from the footer's, with
   its own near-identical CSS in main.css). Same two bugs as the footer, same fix:
   the global h1-h6 capitalize rule mangles the email, and the two phone numbers
   need to stack instead of risking a mid-number wrap. This block already had
   flex-wrap at 1199px, unlike the footer's (which was commented out), so only the
   text-transform/phone-lines/shrink rules are needed here. */
.contact-info-area-2 .contact-info-items .content h3 {
  text-transform: none;
  /* This card sits inside a padded, narrower column than the footer's version of
     the same layout, so the long unbroken email address overflowed its box instead
     of wrapping (overflow-wrap: normal by default doesn't break mid-word). */
  overflow-wrap: anywhere;
}
.contact-info-area-2 .contact-info-items .icon {
  flex-shrink: 0;
}
.contact-info-area-2 .contact-info-items .content {
  min-width: 0;
}
.contact-info-area-2 .contact-info-items .content .phone-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Contact page: keep the left-hand contact-info column in view while the (longer)
   form on the right scrolls past it, so the phone/email/address stay visible the
   whole time. Scoped to .contact-section only — this is not a site-wide sticky-
   sidebar pattern. Turned off below 992px (tablet/mobile), where the two columns
   stack full-width and a sticky sidebar would just pin content over the form
   instead of helping. */
.contact-section .contact-left-items {
  position: sticky;
  top: 110px;
  align-self: flex-start;
}
@media (max-width: 991px) {
  .contact-section .contact-left-items {
    position: static;
    top: auto;
  }
}

/* Privacy Policy / Terms of Use body content (privacy-policy/index.php,
   terms-of-use/index.php). These pages have no static design, so the section
   headings fell back to the theme's global h2 rule (50px, same size as a hero
   heading) — wildly oversized for a plain legal-document heading that should
   read only slightly larger than its paragraph text. Also drops the global
   text-transform: capitalize, which was capitalizing connector words like "of"
   ("Acceptance Of These Terms") — not appropriate for legal-document headings. */
.legal-content h2 {
  font-size: 20px;
  line-height: 1.4;
  text-transform: none;
  margin-top: 32px;
  margin-bottom: 10px;
}
.legal-content h2:first-of-type {
  margin-top: 0;
}
.legal-content p {
  margin-bottom: 16px;
  line-height: 1.8;
}

/* Cookie consent banner (includes/footer.php + assets/js/cookie-consent.js). Light,
   single-line bar (icon + message on the left, actions on the right) that wraps onto
   multiple lines on narrow screens instead of the site's darker full-width notices. */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--white);
  color: var(--header);
  padding: 16px 48px 16px 24px;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.07);
}
.cookie-consent__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.cookie-consent__close:hover {
  color: var(--header);
}
.cookie-consent__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}
.cookie-consent__message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 380px;
  min-width: 0;
}
.cookie-consent__icon {
  flex-shrink: 0;
  font-size: 22px;
  color: var(--theme);
  margin-top: 2px;
}
.cookie-consent__message strong {
  display: block;
  font-size: 15px;
  color: var(--header);
  margin-bottom: 2px;
}
.cookie-consent__message p {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.cookie-consent__message a {
  color: var(--theme);
  text-decoration: underline;
}
.cookie-consent__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.cookie-consent__link-btn {
  background: none;
  border: none;
  color: var(--header);
  text-decoration: underline;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.cookie-consent__btn {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1.5px solid var(--header);
  background: transparent;
  color: var(--header);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.cookie-consent__btn--outline:hover {
  background: var(--bg4);
}
.cookie-consent__btn--solid {
  background: var(--header);
  color: var(--white);
}
.cookie-consent__btn--solid:hover {
  opacity: 0.85;
}
.cookie-consent__customize {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.cookie-consent__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cookie-consent__row p {
  color: var(--text);
  margin-top: 4px;
  font-size: 13px;
}
.cookie-consent__row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .cookie-consent {
    padding: 16px 40px 16px 16px;
  }
  .cookie-consent__bar {
    align-items: flex-start;
  }
  .cookie-consent__actions {
    width: 100%;
  }
  .cookie-consent__actions .cookie-consent__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Homepage "Work Process" section (index.php): the 4th item ("Full Day Programs")
   has its .content before its .icon in the HTML on purpose, for a desktop zigzag
   layout — but that's plain block markup, not flex, so once everything stacks into
   one column below Bootstrap's md breakpoint the DOM order shows through literally:
   text-then-icon, while every other item reads icon-then-text. Flipping just this
   one item's visual order on mobile keeps all four consistent without touching the
   desktop layout or the markup itself. */
@media (max-width: 767px) {
  .process-work-wrapper .work-process-items:has(.content.style-two) {
    display: flex;
    flex-direction: column-reverse;
  }
  .process-work-wrapper .work-process-items .content.style-two {
    margin-top: 30px;
    margin-bottom: 0;
  }
}