/*
Theme Name: Hello Elementor Child
Theme URI: https://whiteboardit.com
Description: Child theme of Hello Elementor for WhiteboardIT.com (Whiteboard's own site). ALL theme customizations (PHP, CSS, template overrides) live here, never in the stock hello-elementor parent. Maintained by Whiteboard.
Author: WhiteboardIT
Author URI: https://whiteboardit.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   Site CSS.

   These rules were previously in the Customizer's "Additional CSS", which is
   stored PER THEME (`custom_css` post), so it does not follow a theme switch.
   Moved here as part of the child-theme cutover on 2026-08-14. The old copy is
   still attached to the parent theme, inert, and acts as a rollback.
   ========================================================================== */

/* Headings: tightened tracking, the site's original Additional CSS. */
h1,
h2,
h3 {
	letter-spacing: -2.5px;
}

.elementor-headline {
	letter-spacing: -2.5px;
}

/* Footer social icons: the UserWay accessibility button is position:fixed at the bottom-right
   and was sitting on top of the LinkedIn icon on desktop, making that link unclickable
   (measured with elementFromPoint at 1440px: the element at the icon centre was the widget
   IMG, not the anchor). Shift the icon group clear of it. Mobile is untouched: the widget does
   not overlap the icons there.

   9c8557d = "Footer Landing" (home), 3f7a2c9 = the clone in "Footer Other" (every other page).
   Both ids are hardcoded here: if either widget is rebuilt in Elementor its id changes and
   these selectors must be updated to match. */
@media (min-width: 1025px) {
	.elementor-element-9c8557d,
	.elementor-element-3f7a2c9 {
		margin-right: 88px;
	}
}

/* "Footer Other" sits on a light background, so the white-filled social SVGs were invisible
   there (measured 1.13:1 against #EEF1F8). Recolor to the brand purple used behind the same
   icons on the home footer (~5.4:1 measured). The home footer keeps its white glyphs. */
.elementor-element-3f7a2c9 .elementor-social-icon svg,
.elementor-element-3f7a2c9 .elementor-social-icon svg path {
	fill: #5B43E7;
}

/* The footer itself is transparent by design: on the Elementor-built pages, the dark left half
   of the page's own final section shows through behind the white "© Whiteboard" link. A plain
   (non-Elementor) page such as /privacy-policy/ or /eula/ has no such section, so that white
   text lands on a white background and disappears entirely (measured 1:1, zero ink pixels).

   Darken it on any page Elementor did not build. Keyed on the absence of `elementor-page`
   rather than on page ids, so future plain pages are covered automatically.

   The repeated classes below are deliberate. Elementor generates three rules for these links,
   all scoped to the template and widget id:
     ... .elementor-nav-menu--main .elementor-item                        (0,5,0)  base
     ... .elementor-nav-menu--main .elementor-item:hover                  (0,6,0)  hover
     ... .elementor-nav-menu--main .elementor-item.elementor-item-active  (0,6,0)  current page
   Repeating a class raises each override just past its counterpart without hardcoding the
   template id or the widget id, either of which changes if the footer is rebuilt in Elementor.
   Do not "tidy" the duplicates away: the overrides stop working and the links go invisible.

   The active-item case is not theoretical: on /privacy-policy/ the "Privacy Policy" link is the
   current item, so it took the white active colour and vanished while its siblings were fine. */
body:not(.elementor-page) .elementor-location-footer .elementor-nav-menu--main .elementor-item.elementor-item,
body:not(.elementor-page) .elementor-location-footer .elementor-nav-menu--main .elementor-item.elementor-item:hover,
body:not(.elementor-page) .elementor-location-footer .elementor-nav-menu--main .elementor-item.elementor-item:focus,
body:not(.elementor-page) .elementor-location-footer .elementor-nav-menu--main .elementor-item.elementor-item-active.elementor-item-active {
	color: #161616;
}

/* HOME FOOTER ON MOBILE ONLY.

   The footer is transparent and overhangs the bottom of the page's last section by ~18px. On
   desktop that is invisible. On mobile the footer menu was hidden, so the footer held only the
   social icons and they sat safely inside the purple band. Showing the menu added a 24px row,
   which pushed the icons down until the purple band ended 16px into them: their bottom 8px fell
   on the white body, and since those glyphs are white they were sliced in half.

   Measured on a Pixel 7: the band ends at y=4377 and the icons ran 4361-4385, i.e. 8px PAST it.
   A negative margin on the footer element itself does nothing here (it computes but the footer's
   position does not depend on it), so the content is lifted from inside instead: drop the
   section's vertical padding and pull the icon row up. Measured result: clearance goes from -8px
   to +12px, and the document now ends exactly at the band, removing the stray white strip too.

   Doubled classes are for specificity again: Elementor's own padding rule for this section is
   (0,3,0), so a single-class selector would tie and lose on load order.

   Scoped to .elementor-29 (the "Footer Landing" template, home only). "Footer Other" pages sit
   on a light band with purple glyphs and are already correct, so they must not be moved. */
@media (max-width: 767px) {
	.elementor-29.elementor-location-footer .elementor-section.elementor-section {
		padding-top: 0;
		padding-bottom: 0;
	}

	.elementor-29.elementor-location-footer .elementor-widget-social-icons.elementor-widget-social-icons {
		margin-top: -10px;
	}
}

/* WordPress [gallery] grid: the only page on the site that scrolled sideways on a phone.

   Elementor's image-gallery gutter pattern gives each .gallery-item 20px of right padding and
   then cancels the last column's gutter with a NEGATIVE right margin on the container. Inside a
   412px parent that makes the grid 432px wide, so the whole page scrolled 20px sideways on
   /services/ (measured on a Pixel 7: parent 412, .gallery 432, margin 0 -20px -20px 0).

   Dropping the negative margin on mobile lets the grid be exactly as wide as its parent. Measured
   after: page width 412 (was 432), still 2 items per row, image size unchanged at 120px, nothing
   clipped. Preferred over `overflow-x: hidden`, which hides the symptom and leaves the grid 432px.

   Desktop is untouched: there the surrounding container has enough slack to absorb the 20px, so
   the negative margin does its intended job there.

   Repeated classes again, for the same reason as the footer rules above. Elementor generates
     .elementor-560 .elementor-element.elementor-element-624ba58 .gallery   (0,4,0)
   per widget, and a media query adds no specificity, so the plain two-class selector lost
   silently. This is (0,5,0) and wins without naming the page id or the widget id, either of
   which changes if the gallery is rebuilt. */
@media (max-width: 767px) {
	.elementor-image-gallery.elementor-image-gallery .gallery.gallery.gallery {
		margin-right: 0;
	}
}