/*
Theme Name:   SiteBuddy
Theme URI:    https://sitebuddy.com.au/
Description:  SiteBuddy child theme for Hello Elementor. Design lives in Elementor (Site Settings globals + templates);
              this file holds only what Elementor's controls cannot express. Every rule is tied to a class set in
              Elementor → Advanced → CSS Classes, so removing a class turns the rule off for that element.
Author:       SiteBuddy
Template:     hello-elementor
Version:      1.3.3
Text Domain:  sitebuddy
*/

/* 1. Text Editor: no trailing paragraph gap (Hello's reset adds margin-bottom to every <p>). */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* 2. Line icons are stroke-based SVGs; Elementor colours SVG icons via `fill`, which would make them solid.
      Icon/Button/Toggle icons: stroke follows the widget colour (currentColor).
      Icon List: Elementor only sets `fill`, so list icons use colour variants of the same SVGs (e.g. sb-check-teal.svg);
      here we only stop the fill from turning the line shapes solid. */
.sb-ico svg, .sb-ico svg *,
.elementor-button-icon svg, .elementor-button-icon svg *,
.elementor-toggle-icon svg, .elementor-toggle-icon svg * { fill: none !important; stroke: currentColor !important; }
.elementor-icon-list-icon svg, .elementor-icon-list-icon svg * { fill: none !important; }
.elementor-icon-list-icon svg { width: var(--e-icon-list-icon-size, 1em); height: var(--e-icon-list-icon-size, 1em); }

/* 3. Header: sticky with a frosted background (Elementor Free has no sticky motion effect). */
.sb-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .sb-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sb-site-header { top: 46px; } }
.sb-site-header--default .sb-header { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* 4. Desktop nav links: rounded hover tint (Icon List has no per-item background control). */
.sb-nav .elementor-icon-list-item a { padding: 10px 12px; border-radius: 8px; transition: background-color .15s; }
.sb-nav .elementor-icon-list-item a:hover, .sb-nav .elementor-icon-list-item a:focus-visible { background: #F6F8F9; }

/* 5. Mobile menu panel: hidden until the burger is tapped (assets/sitebuddy.js); always visible in the editor. */
body:not(.elementor-editor-active) .sb-mobile-nav { display: none !important; }
body:not(.elementor-editor-active) .sb-mobile-nav.is-open { display: flex !important; }
.sb-mobile-nav .elementor-icon-list-item { border-bottom: 1px solid #F6F8F9; }
.sb-mobile-nav .elementor-icon-list-item a { display: block; padding: 12px 4px; }

/* 6. Examples row: horizontal swipe on tablet/mobile (CSS scroll-snap has no Elementor control). */
@media (max-width: 1024px) {
	.sb-scroller.e-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 42%); grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.sb-scroller.e-grid > .e-con { scroll-snap-align: start; }
	.sb-scroller.e-grid > .e-con-inner { display: contents; }
}
@media (max-width: 767px) { .sb-scroller.e-grid { grid-auto-columns: 82%; } }

/* 7. Inline highlight inside a heading (the amber "$199" in the offer H1). */
.sb-hl { color: #FCB215; white-space: nowrap; }

/* 8. Mobile sticky CTA bar on the offer page (fixed positioning needs !important against Elementor's --position). */
@media (max-width: 767px) {
	.sb-sticky-cta { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 60; width: 100% !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -6px 18px rgba(16, 40, 48, .08); }
	body.sb-has-sticky { padding-bottom: 76px; }
}
.sb-sticky-cta strong { display: block; color: #1E2A30; font-size: 16px; }

/* 9. FAQ toggles: full-width rows with dividers only (Toggle widget borders wrap each title/content box instead). */
.sb-faq .elementor-toggle-item { border-bottom: 1px solid #E3E8EA; }
.sb-faq .elementor-toggle-item:first-child { border-top: 1px solid #E3E8EA; }
.sb-faq .elementor-tab-title, .sb-faq .elementor-tab-content { border: 0 !important; }

/* 10. Links inside Text Editor widgets on dark backgrounds (Text Editor has no link-colour control). */
.sb-links-light a { color: #FFFFFF; }
.sb-links-light a:hover { color: #FCB215; }
.sb-links-footer a { color: #DDEDF0; text-decoration: none; }
.sb-links-footer a:hover { color: #FFFFFF; text-decoration: underline; }

/* 11. Content-sized child container in a row (Elementor's container width control has no "auto";
       Elementor sets width through the --width custom property, so it needs !important). */
.e-con.sb-auto { --width: auto !important; width: auto !important; }

/* 12. Focus visibility for keyboard users. */
.sb-scroller.e-grid:focus-visible { outline: 3px solid #35C2D6; outline-offset: 4px; }
.elementor a:focus-visible, .elementor .elementor-button:focus-visible { outline: 3px solid #35C2D6; outline-offset: 2px; }
#sb-main:focus { outline: none; }

/* 13. Links inside running text are underlined, so they are distinguishable without relying on colour (WCAG 1.4.1).
       Text Editor widgets have no link-decoration control. */
.elementor-widget-text-editor a:not(.elementor-button) { text-decoration: underline; text-underline-offset: 0.15em; }