/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Header: force true transparency over the hero
	The theme's ".dark" utility class (used on #header so the logo/menu
	render in white over the coloured hero) also doubles as a generic
	"dark mode" scheme, which sets --cnvs-header-bg to a solid charcoal
	fallback (#212529) instead of transparent. Nothing in the base
	theme CSS overrides that for a plain desktop/mobile page load (only
	for the mobile "menu open" state), so #header-wrap can paint as a
	solid dark bar over the hero until the sticky/menu JS classes swap
	it. This rule wins on specificity (two IDs) and forces it
	transparent whenever the header hasn't gone sticky yet.
-----------------------------------------------------------------*/
#header.transparent-header.dark:not(.sticky-header):not(.semi-transparent):not(.floating-header) #header-wrap {
	background-color: transparent;
}

/* ----------------------------------------------------------------
	Top bar: message slider crossfade
	js/top-bar-slider.js swaps #top-bar-message's text every few
	seconds; this just gives the swap a quick fade instead of an
	instant jump.
-----------------------------------------------------------------*/
#top-bar-message {
	transition: opacity 0.4s ease;
}

/* Top bar: smaller text on mobile.
   The 14px size is set inline on every page (needs !important here
   to override that), and was the same size on every screen width.
   In the narrow mobile bar, that made the rotating message + link
   feel oversized and cramped. Desktop keeps the original 14px. */
@media (max-width: 767.98px) {
	#top-bar-message {
		font-size: 12px !important;
	}
}

/* ----------------------------------------------------------------
	Header: logo sizing + breathing room
	The theme forces the logo image to the full header height
	(100px), so it fills the row edge-to-edge with barely any
	margin. Shrinking the logo and padding the row gives it
	proper breathing room and adds visible white space between
	the nav and the section below. Applied to both the mobile
	(hamburger) and desktop (full menu) header layouts.
-----------------------------------------------------------------*/
.header-row {
	padding-top: 20px;
	padding-bottom: 20px;
}
#header-wrap #logo img {
	height: 50px;
}

/* ----------------------------------------------------------------
	"Why Irish Businesses Choose Glennovation" checklist
	Centering the icon against the whole (possibly two-line) text
	block made it drift down into the gap between the two lines on
	wrapped items, looking disconnected from the copy. Anchoring the
	icon to the top of the line and nudging it down a few pixels
	lines it up with the cap-height of the first line of text instead
	 - the standard checkmark-list treatment, consistent whether the
	item wraps or not.
-----------------------------------------------------------------*/
.slider-bottom-box .iconlist li {
	align-items: flex-start;
}
.slider-bottom-box .iconlist li img:first-child {
	margin-top: 3px;
}

/* ----------------------------------------------------------------
	Azure region selector (Location Section)
	Clicking a region in the .region-list highlights the matching
	dot on the world map (see script at the bottom of index.html)
	and opens its tooltip. This styles the active list item and
	the highlighted map marker.
-----------------------------------------------------------------*/
.region-link {
	cursor: pointer;
}
.region-link.active {
	font-weight: 600;
	color: var(--cnvs-themecolor);
}
.hotspot-img .hot-spot.region-active {
	width: 18px;
	height: 18px;
	background-color: var(--cnvs-themecolor);
	box-shadow: 0 0 0 6px rgba(26, 188, 156, 0.25);
	z-index: 2;
}

/* ----------------------------------------------------------------
	Inner-page hero titles (About, etc.)
	The theme's .slider-title sizing (demos/hosting/hosting.css)
	only targets h2, since the homepage hero uses an h2 there.
	Inner pages correctly use h1 for their hero title (one h1 per
	page), so this mirrors that same sizing for h1 within
	.slider-title to keep hero text consistent across pages.
-----------------------------------------------------------------*/
.slider-title h1 {
	font-size: 2.7rem !important;
	letter-spacing: -1px;
	line-height: 1.25 !important;
	font-weight: 600;
}

/* ----------------------------------------------------------------
	Nav dropdowns/mega-menus: grace period before closing
	The theme closes the Service/Portfolio dropdowns the instant
	the cursor leaves the trigger, with no buffer. Moving the mouse
	from the "Service" link down to a "Learn More" link inside the
	mega-menu can clip the hover area for a moment, closing the
	menu before the click lands. Delaying the close (not the open)
	gives the cursor a brief grace window to land back inside the
	dropdown, without slowing down opening it in the first place.
-----------------------------------------------------------------*/
.is-expanded-menu .primary-menu:not(.on-click) .menu-item:not(:hover) > .sub-menu-container,
.is-expanded-menu .primary-menu:not(.on-click) .menu-item:not(:hover) > .mega-menu-content {
	transition-delay: 0.3s;
}
.is-expanded-menu .primary-menu:not(.on-click) .menu-item:hover > .sub-menu-container,
.is-expanded-menu .primary-menu:not(.on-click) .menu-item:hover > .mega-menu-content {
	transition-delay: 0s;
}

/* If the cursor jumps straight from one trigger (e.g. Service) to a
   different trigger (e.g. Portfolio) without leaving the menu bar,
   the grace period above would let both dropdowns stay visible at
   once. Once another item in the same menu is actively hovered,
   force this item's own dropdown closed immediately instead of
   waiting out its grace period. */
.is-expanded-menu .primary-menu:not(.on-click) .menu-container:hover .menu-item:not(:hover) > .sub-menu-container,
.is-expanded-menu .primary-menu:not(.on-click) .menu-container:hover .menu-item:not(:hover) > .mega-menu-content {
	transition-delay: 0s;
}

/* ----------------------------------------------------------------
	Pricing Section: bundled plan cards
	Originally prototyped in addon-options.html as inline mockup
	styles; moved here now that the plans are part of the live
	"Hosting that scales with your Business" section.
-----------------------------------------------------------------*/
.plan-card {
	border: 1px solid #E5E8ED;
	border-radius: 8px;
	background: #fff;
	height: 100%;
}
.plan-card.featured {
	border-color: var(--cnvs-themecolor);
	box-shadow: 0 15px 40px rgba(26, 188, 156, .15);
}
.plan-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
	background: rgba(26, 188, 156, .1);
	border-radius: 20px;
	padding: 4px 14px;
	margin-bottom: 14px;
}
.plan-badge-accent {
	color: #d9534f;
	background: rgba(217, 83, 79, .1);
}
.plan-card h4 a {
	color: var(--cnvs-heading-color);
	transition: color 0.2s ease;
}
.plan-card h4 a:hover,
.plan-card h4 a:focus {
	color: var(--cnvs-themecolor);
}

/* Checkmark list icons: mobile alignment fix.
   The theme's base .iconlist sets flex-wrap: wrap on each <li>. On a
   short one-line bullet that's invisible, but once a bullet's text
   is too long to fit beside the icon on the mobile-width row, the
   *entire text* drops down onto its own new line below the icon
   (flex items wrap as whole units) instead of staying beside the
   icon and reflowing internally - so the checkmark ends up sitting
   alone above the text rather than next to it. Forcing nowrap keeps
   icon + text on the same row always; the text then wraps within
   its own remaining width like a normal hanging indent, which is
   what actually fixes the misalignment. Desktop already avoids this
   because the bullets there don't need to wrap, so this is scoped
   to mobile only.
   Applied to .iconlist generally (not just .plan-card) since the
   same component - and the same bug - shows up anywhere a checkmark
   list has long bullet text, e.g. the pricing plan cards on the
   homepage and the Terms of Use page. */
@media (max-width: 767.98px) {
	.iconlist li {
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	.iconlist li img:first-child {
		margin-top: 3px;
	}
}

/* ----------------------------------------------------------------
	Domain Search form: mobile layout
	Bootstrap's .input-group wraps by default once the row is too
	narrow to fit all three fields. On mobile that pushed the
	"Search" button onto its own line, left-aligned, leaving an odd
	empty gap beside it. This forces a predictable two-row layout on
	small screens instead: the domain name field takes the full
	first row, then the TLD dropdown and Search button share the
	second row with the button pinned to the right. Desktop is
	untouched (row is wide enough there that no wrapping happens).
-----------------------------------------------------------------*/
@media (max-width: 767.98px) {
	#domain-search-form {
		flex-wrap: wrap;
	}
	#domain-search-form #domain-search-input {
		flex: 1 1 100%;
		width: 100% !important;
	}
	#domain-search-form #domain-search-tld {
		flex: 1 1 auto;
	}
	#domain-search-form #domain-search-btn {
		flex: 0 0 auto;
		margin-left: auto;
	}
}