/*
Theme Name: Twilight Global
Theme URI: https://twilightisglobal.co.za/
Description: Elegant and professional theme developed for Twilight Global
Author: Kemoso
Author URI: https://kemoso.com/
Template: hello-elementor
Version: 3.6.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ---- Text link colour system ----
   Outside the header: light-background links use Brand red / Deep red on
   hover; the one dark-background context (the footer) uses Gold highlight /
   Gold base. Buttons and social icons are excluded - this only targets
   genuine inline text links (blog/article copy, footer link lists). Header
   nav/contact links keep their own explicit styling untouched, which wins
   here on specificity. */
a:not(.elementor-button):not(.elementor-social-icon):not(.elementskit-social-icon):not(.social-icon):not(.elementskit-navbar-nav a):not(.ekit_navsearch-button) {
	color: #C1272D;
	transition: color .15s ease;
}
a:not(.elementor-button):not(.elementor-social-icon):not(.elementskit-social-icon):not(.social-icon):not(.elementskit-navbar-nav a):not(.ekit_navsearch-button):hover {
	color: #8E1B22;
	text-decoration: underline;
}

.ekit-template-content-footer a:not(.elementor-button):not(.elementor-social-icon):not(.elementskit-social-icon):not(.social-icon) {
	color: #FAF06F !important;
}
.ekit-template-content-footer a:not(.elementor-button):not(.elementor-social-icon):not(.elementskit-social-icon):not(.social-icon):hover {
	color: #BCA035 !important;
	text-decoration: none !important;
}

/* Nav menu items already show their own bottom-border hover indicator; the
   search icon is icon-only - neither should get the generic underline. */
.elementskit-navbar-nav a:hover,
.ekit_navsearch-button:hover {
	text-decoration: none !important;
}

/* Top contact bar (email/phone): gold on hover, no underline - matches the
   footer's dark-background link treatment since the bar sits on brand red. */
.ekit-template-content-header .elementor-icon-list-item a:hover {
	color: #FAF06F !important;
	text-decoration: none !important;
}

/* Site-wide header: guarantee the top contact bar and the logo/nav row sit
   flush against each other with no whitespace seam, regardless of any
   inherited block/flex gap from the theme or page builder. */
.ekit-template-content-header,
.ekit-template-content-header .elementor,
.ekit-template-content-header .elementor > .elementor-element {
	margin: 0 !important;
	row-gap: 0 !important;
}

/* Elementor's inline SVG font-icon feature only ships a sizing rule scoped
   to button icons (.elementor-button-icon .e-font-icon-svg). Any icon used
   outside a button - icon-list bullets, icon-box icons, nav carets - has no
   width/height constraint and renders at its raw SVG viewBox size (100s of
   px). Restore the intended 1em-square behaviour everywhere. */
svg.e-font-icon-svg {
	width: 1em;
	height: 1em;
}

/* Same missing-widget-CSS issue as above, this time for widget-icon-list.min.css:
   on template posts (header/footer) Elementor sometimes fails to enqueue a
   used widget's own stylesheet on cache regeneration, so icon-list widgets
   (top-bar contact info, footer link columns) fall back to raw <ul>/<li>
   browser defaults - stacked, bulleted. Restore the base layout rules
   directly so it no longer depends on that enqueue working. */
.elementor-widget .elementor-icon-list-items {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.elementor-widget .elementor-icon-list-items.elementor-inline-items {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -8px;
}
.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin-inline: 8px;
}
.elementor-widget .elementor-icon-list-item,
.elementor-widget .elementor-icon-list-item a {
	align-items: center;
	display: flex;
	font-size: inherit;
}
.elementor-widget .elementor-icon-list-icon + .elementor-icon-list-text {
	align-self: center;
	padding-inline-start: 5px;
}
.elementor-widget .elementor-icon-list-icon {
	display: flex;
	position: relative;
}

/* Long unbroken strings (email addresses, URLs) inside an icon-list item have
   no natural break point, so normal white-space wrapping can't help - the
   browser just lets them overflow their flex container. Allow a mid-word
   break as a last resort so contact-info cards never bleed past their box,
   regardless of the card's width at a given breakpoint. */
.elementor-icon-list-text {
	overflow-wrap: break-word;
	min-width: 0;
}

/* MetForm radio/checkbox options (Get a Quote form): the tappable area is
   just the label's text line-height (~23-26px), well under the 44px
   minimum touch target. Flex + min-height gives every option a proper tap
   target without changing the visible icon/text size. */
.mf-radio-option label,
.mf-checkbox-option label {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* Site header (logo/nav row) is transparent by design so it can overlay a
   hero photo - that only works on pages that actually have a dark hero
   behind it. The legal pages (Privacy Policy, Terms of Use, Disclaimer,
   Cookie Policy) have no hero, just white page content, so the white
   "inverted" logo and white nav links disappear. Give the header a solid
   black background on those specific pages only.

   IMPORTANT: this must be set on the outer .ekit-template-content-header
   wrapper, NOT on the inner Elementor flex container
   (.elementor-element-2302155d). That container's own height (53px) is
   shorter than its children (the logo/nav widgets, 90-107px), and it turns
   out that adding an explicit background-color directly to it triggers a
   real Chromium paint bug: the container's background paints fine, but the
   logo wordmark and all nav link text silently fail to paint, even though
   every computed style (color, opacity, position, clipping) checks out
   completely normal - confirmed in both this environment and a real
   Chrome browser, and confirmed fixed by moving the background-color to
   this outer wrapper instead (a plain div, unaffected by the bug). Do not
   move this back onto elementor-element-2302155d without re-testing. */
body.page-id-3 .ekit-template-content-header,
body.page-id-166 .ekit-template-content-header,
body.page-id-167 .ekit-template-content-header,
body.page-id-195 .ekit-template-content-header {
	background-color: #000000 !important;
}

/* Header search popup's close (x) button: ElementsKit animates it in via a
   CSS transition (opacity 0->1, translateY(-500px)->0) triggered by a
   "mfp-ready" class Magnific Popup adds once the popup opens. Confirmed
   sitewide (not page-specific) that this transition never completes - the
   button stays stuck at its pre-animation state (invisible, positioned
   500px above the viewport) even though every class needed to trigger it
   is present and correct. An isolated test element with the identical
   class chain proves the CSS rule itself is fine; the transition simply
   never resolves on this specific button in practice. Skip the animation
   entirely and force the button visible in place - it still only shows
   while the popup is actually open (the whole overlay is hidden/removed
   otherwise), it just no longer relies on a transition that doesn't run. */
.ekit-promo-popup.mfp-ready .mfp-close {
	opacity: 1 !important;
	transform: none !important;
}

/* Header search popup: same "widget escapes its wrapper" issue as the
   icon-list/SVG-icon fixes above, this time for the icon font. Magnific
   Popup moves the search panel's markup to be a direct child of <body>
   when it opens (for stacking/z-index reasons), so by the time it's on
   screen it's no longer inside any .ekit-wid-con/.elementor-widget
   ancestor. ekiticons.css only assigns the actual icon font-family
   ("elementskit") to icons scoped inside those two ancestors, so the
   search button's magnifying-glass icon silently falls back to the page's
   body font, which has no glyph for that font's private-use codepoint -
   it renders as an empty box instead of the icon. Re-apply the same base
   icon-font rule unconditionally so it still works once relocated. */
.icon::before {
	font-family: elementskit !important;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Heading outline fix (2026-09-30): the italic banner subtitles under each
   page's H1 were H3s purely for looks, which made every page jump H1 -> H3.
   They are now <p> (class tg-subtitle). Their capitalised look came from
   the kit's h3 rule, not their own "Quote" typography preset, so restore it
   here. */
.tg-subtitle .elementor-heading-title {
	text-transform: capitalize;
}

/* Mobile menu: only the current page should look active. On touch screens
   the hamburger sits right where the off-canvas panel's first item (Home)
   lands once it slides in, so the opening tap leaves a sticky :hover on
   Home and it takes the gold hover colour next to the red current-page
   item. Touch devices have no real hover, so drop the hover colour there
   for every item except the current page / its ancestor. */
@media (max-width: 1024px) and (hover: none) {
	.elementor-89 .elementor-element.elementor-element-715f6863 .elementskit-navbar-nav > li:not(.current-menu-item):not(.current-menu-ancestor):hover > a,
	.elementor-89 .elementor-element.elementor-element-715f6863 .elementskit-navbar-nav > li:not(.current-menu-item):not(.current-menu-ancestor) > a:hover,
	.elementor-89 .elementor-element.elementor-element-715f6863 .elementskit-navbar-nav > li:not(.current-menu-item):not(.current-menu-ancestor) > a:focus,
	.elementor-89 .elementor-element.elementor-element-715f6863 .elementskit-navbar-nav > li:not(.current-menu-item):not(.current-menu-ancestor):hover > a .elementskit-submenu-indicator,
	.elementor-89 .elementor-element.elementor-element-715f6863 .elementskit-navbar-nav > li:not(.current-menu-item):not(.current-menu-ancestor) > a:hover .elementskit-submenu-indicator {
		color: var(--e-global-color-text);
	}
}

/* Contact page info cards (address / email / phone) sit on a dark photo,
   where the site-wide red link colour was unreadable. Keep their links in
   the card's own light text colour, underlined so they still read as links,
   with the same gold hover as the other dark-background links. (Footer
   links, including the head-office address, keep the footer's own yellow
   link style above.) !important because the site-wide link rule at the top
   of this file is a long :not() chain that outranks a class selector. */
.tg-on-dark .elementor-icon-box-description a {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.tg-on-dark .elementor-icon-box-description a:hover,
.tg-on-dark .elementor-icon-box-description a:focus-visible {
	color: #FAF06F !important;
}

/* Off-canvas mobile menu (<= 1024px): it was seen to flash open and slide
   shut on page load at ~1024px wide. The panel is hidden with left:-100vw
   and animates 'left' over 0.6s, so if the first layout happens in the
   desktop state (inline menu) and then settles under the breakpoint, the
   close animation plays on load. Until the page has loaded (html gets
   .tg-nav-ready from a footer script in functions.php) keep the closed
   panel hidden and un-animated; normal open/close animation after that. */
html:not(.tg-nav-ready) .elementskit-menu-offcanvas-elements {
	transition: none !important;
}
@media (max-width: 1024px) {
	html:not(.tg-nav-ready) .elementskit-menu-offcanvas-elements:not(.active) {
		visibility: hidden;
	}
}