/*
Theme Name:   OlaDoc Child
Theme URI:    https://oladoc.ie
Description:  Child theme of Hello Elementor for OlaDoc.ie — at-home diagnostic testing. Built clean 2026-08-01; deliberately NOT derived from doxoncall-child (that lineage carried a functions.php backdoor, cleaned 2026-05-08).
Author:       IE HEALTHNOW LIMITED
Author URI:   https://oladoc.ie
Template:     hello-elementor
Version:      1.1.0
Text Domain:  oladoc-child
*/

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS
   Brand green is deliberately distinct from doconcall/doxoncall's #0a7ea4 teal
   so the two properties do not read as the same site.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
	--ola-brand:        #1a7f6b;
	--ola-brand-dark:   #146555;
	--ola-brand-darker: #0e4a3e;
	--ola-brand-light:  #e8f4f1;
	--ola-accent:       #c2603a;

	--ola-ink:          #16241f;
	--ola-body:         #40514b;
	--ola-muted:        #6b7d76;
	--ola-line:         #dde5e2;
	--ola-bg-soft:      #f6f9f8;
	--ola-white:        #fff;

	--ola-shell:        1180px;
	--ola-prose:        720px;
	--ola-radius:       10px;
	--ola-radius-lg:    16px;
	--ola-shadow:       0 1px 2px rgba(22,36,31,.06), 0 8px 24px rgba(22,36,31,.06);

	--ola-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */
body {
	font-family: var(--ola-font);
	color: var(--ola-body);
	background: var(--ola-white);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;

	/* The hero's full-bleed break-out spans 100vw, which INCLUDES the vertical
	   scrollbar — about 15px wider than the visible area, producing a stray
	   horizontal scrollbar. `clip` removes the overflow without creating a
	   scroll container, so the sticky header keeps working. `hidden` would
	   break sticky positioning. */
	overflow-x: clip;
}

h1, h2, h3, h4 {
	color: var(--ola-ink);
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 2.2rem 0 .8rem;
	font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.4vw, 2.85rem); margin-top: 0; }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.3rem); }

p, ul, ol, table { margin: 0 0 1.05rem; }
a { color: var(--ola-brand-dark); }
a:hover { color: var(--ola-brand); }
strong { color: var(--ola-ink); }

.ola-shell {
	width: 100%;
	max-width: var(--ola-shell);
	margin-inline: auto;
	padding-inline: 22px;
}

/* Constrain prose so text does not run edge-to-edge on wide screens. */
.page-content > *,
.entry-content > * {
	max-width: var(--ola-prose);
	margin-inline: auto;
}
.page-content > .alignwide,
.woocommerce .page-content > * { max-width: none; }

/* The front page is grid-led, not prose-led. Centring its headings inside the
   720px prose column left them indented ~190px from the full-width card grids
   beneath them. Keep the readable measure, but align left so headings and
   grids share an edge.

   :not(.ola-hero) matters. This selector (0,2,0) outranks .ola-hero (0,1,0), so
   without the exclusion it cancelled the hero's negative break-out margins —
   the hero lost its full-bleed, sat ~84px right of the viewport edge and
   overflowed the same amount off the right. overflow-x:clip hid the scrollbar,
   so it read as "a white gap on the left" rather than an obvious break. */
.home .page-content > *:not(.ola-hero) { margin-inline: 0; }

main.site-main {
	max-width: var(--ola-shell);
	margin-inline: auto;
	padding: 46px 22px 72px;
}

/* hello-elementor renders the page title in .page-header, a SIBLING of
   .page-content — so the prose-width rule above never reached it. The H1 sat
   at the container edge while the body text below was centred in the 720px
   column, ~190px to its right. Match them. */
.page-header {
	max-width: var(--ola-prose);
	margin-inline: auto;
	margin-bottom: .4rem;
}
.page-header .entry-title { margin-bottom: 0; }
.home .page-header { margin-inline: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.ola-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--ola-brand);
	color: var(--ola-white);
	border: 1px solid transparent;
	border-radius: var(--ola-radius);
	padding: .72rem 1.25rem;
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.2;
	/* Parent theme underlines all anchors; buttons must opt out explicitly. */
	text-decoration: none !important;
	cursor: pointer;
	transition: background .16s ease, transform .16s ease;
}
.ola-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--ola-brand-dark);
	color: var(--ola-white);
	transform: translateY(-1px);
}
.ola-btn--ghost {
	background: transparent;
	color: var(--ola-brand-dark);
	border-color: var(--ola-line);
}
.ola-btn--ghost:hover { background: var(--ola-brand-light); color: var(--ola-brand-darker); }

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.ola-trustbar {
	background: var(--ola-brand-darker);
	color: rgba(255,255,255,.92);
	font-size: .82rem;
	letter-spacing: .01em;
}
.ola-trustbar .ola-shell {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem;
	padding-block: .5rem;
	text-align: center;
}
.ola-trustbar__sep { opacity: .45; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.ola-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--ola-line);
}
.ola-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 72px;
}

.ola-logo {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	color: var(--ola-brand-dark);
	flex: 0 0 auto;
}
.ola-logo__mark { display: inline-flex; color: var(--ola-brand); }
.ola-logo__text {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ola-ink);
}
.ola-logo__text strong { color: var(--ola-brand); font-weight: 800; }

.ola-nav { margin-left: auto; }
.ola-nav ul {
	display: flex;
	align-items: center;
	gap: .35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ola-nav a {
	display: block;
	padding: .5rem .78rem;
	border-radius: 8px;
	color: var(--ola-body);
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
}
.ola-nav a:hover { background: var(--ola-brand-light); color: var(--ola-brand-darker); }
.ola-nav .current-menu-item > a { color: var(--ola-brand-dark); font-weight: 600; }

.ola-header__actions {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex: 0 0 auto;
}

/* Responsive CTA label: the full "Speak to an online doctor" plus the nav, cart
   and primary button overflow the 1180px shell on narrower laptops. Swap to a
   shorter label rather than wrapping or clipping. */
.ola-cta__short { display: none; }
@media (max-width: 1120px) {
	.ola-cta__full  { display: none; }
	.ola-cta__short { display: inline; }
}

.ola-cart {
	position: relative;
	display: inline-flex;
	padding: .45rem;
	border-radius: 8px;
	color: var(--ola-body);
	flex: 0 0 auto;
	margin-left: .35rem;
}
.ola-cart:hover { background: var(--ola-brand-light); color: var(--ola-brand-darker); }
.ola-cart__count {
	position: absolute;
	top: -1px; right: -3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--ola-accent);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.ola-burger { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE
   ═══════════════════════════════════════════════════════════════════════════ */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 1.4rem;
	margin: 2rem 0 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--ola-white);
	border: 1px solid var(--ola-line);
	border-radius: var(--ola-radius-lg);
	padding: 1.35rem;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--ola-shadow);
	border-color: #c6d6d1;
	transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.06rem !important;
	font-weight: 700;
	color: var(--ola-ink);
	padding: 0 0 .4rem !important;
	line-height: 1.3;
}
.woocommerce ul.products li.product .price {
	color: var(--ola-brand-dark) !important;
	font-size: 1.28rem;
	font-weight: 700;
	margin-bottom: .85rem;
	display: block;
}
.woocommerce ul.products li.product a.button { margin-top: auto; width: 100%; }

.woocommerce div.product .product_title { margin-bottom: .5rem; }
.woocommerce div.product p.price { color: var(--ola-brand-dark); font-size: 1.9rem; font-weight: 700; }
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.05rem;
	color: var(--ola-body);
	border-left: 3px solid var(--ola-brand);
	padding-left: 1rem;
	margin: 1rem 0 1.5rem;
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type { margin-top: 0; }
.woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Long-form clinical copy on product pages */
.woocommerce-Tabs-panel--description h3 {
	margin-top: 1.9rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ola-line);
	color: var(--ola-brand-darker);
}
.woocommerce-Tabs-panel--description h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.woocommerce-Tabs-panel--description ul { padding-left: 1.15rem; }
.woocommerce-Tabs-panel--description li { margin-bottom: .38rem; }

/* WooCommerce BLOCKS (cart + checkout) ship their own button classes and do not
   inherit the classic .button styling above — "Proceed to Checkout" rendered in
   default near-black. Brand them explicitly. */
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button {
	background-color: var(--ola-brand) !important;
	color: #fff !important;
	border-radius: var(--ola-radius) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--ola-brand-dark) !important;
}
/* Links inside the blocks UI (e.g. "Return to shop") stay text, not blocks. */
.wc-block-components-button.is-link {
	color: var(--ola-brand-dark) !important;
	background: none !important;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--ola-brand);
	background: var(--ola-brand-light);
	border-radius: var(--ola-radius);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--ola-brand); }

/* Dev-mode store banner.
   WooCommerce ships this as position:absolute + display:none and relies on its
   own JS to reveal it (and on a `store_notice` cookie to keep it dismissed).
   That reveal was NOT firing here, so the banner existed in the DOM but was
   invisible — a safety gate that silently wasn't one. Forced visible and laid
   out as a static band so it cannot be missed or dismissed away. */
.woocommerce-store-notice,
p.demo_store {
	display: block !important;
	position: static !important;
	margin: 0 !important;
	background: var(--ola-accent) !important;
	color: #fff !important;
	font-size: .88rem;
	font-weight: 600;
	text-align: center;
	padding: .7rem 1.2rem;
	border-radius: 0;
}
.woocommerce-store-notice a { color: #fff; text-decoration: underline; }
/* WooCommerce's dismiss link would hide the gate — remove it. */
.woocommerce-store-notice__dismiss-link { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.ola-footer {
	background: var(--ola-brand-darker);
	color: rgba(255,255,255,.76);
	margin-top: 72px;
	padding: 56px 0 30px;
	font-size: .93rem;
}
.ola-footer__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: 2.4rem;
}
.ola-footer h3 {
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	margin: 0 0 .95rem;
}
.ola-footer ul { list-style: none; margin: 0; padding: 0; }
.ola-footer li { margin-bottom: .5rem; }
.ola-footer a { color: rgba(255,255,255,.76); text-decoration: none; }
.ola-footer a:hover { color: #fff; text-decoration: underline; }
.ola-footer p { margin-bottom: .8rem; line-height: 1.6; }

.ola-logo--footer { margin-bottom: .9rem; }
.ola-logo--footer .ola-logo__text { color: #fff; }
.ola-logo--footer .ola-logo__text strong { color: #7fd4bd; }

.ola-footer__operator { color: rgba(255,255,255,.6); font-size: .87rem; }
.ola-footer__operator strong { color: rgba(255,255,255,.9); }

.ola-footer__notice {
	margin-top: 42px;
	padding: 18px 20px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: var(--ola-radius);
	background: rgba(0,0,0,.16);
	font-size: .88rem;
	line-height: 1.6;
}
.ola-footer__notice p { margin: 0; }
.ola-footer__notice strong { color: #fff; }

.ola-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .4rem;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: .84rem;
	color: rgba(255,255,255,.55);
}
.ola-footer__bottom p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME HERO (rendered by the front page's first section)
   ═══════════════════════════════════════════════════════════════════════════ */
.ola-hero {
	background: linear-gradient(160deg, var(--ola-brand-light) 0%, #f4faf8 55%, var(--ola-white) 100%);
	border-bottom: 1px solid var(--ola-line);
	padding: 60px 0 56px;
	max-width: none !important;

	/* Full-bleed break-out. The hero lives inside main.site-main, which is
	   max-width:1180px with 22px padding, so it cannot reach the viewport
	   edges on its own. These margins cancel both the container width and
	   main's top padding. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -46px;
	margin-bottom: 44px;
}
.ola-hero__inner { max-width: var(--ola-shell); margin-inline: auto; padding-inline: 22px; }
.ola-hero h1 { max-width: 17ch; margin-bottom: 1rem; }
.ola-hero__lede {
	font-size: 1.16rem;
	color: var(--ola-body);
	max-width: 56ch;
	margin-bottom: 1.6rem;
}
.ola-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.8rem; }
.ola-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .93rem;
	color: var(--ola-brand-darker);
	font-weight: 500;
}
.ola-hero__points li { display: flex; align-items: center; gap: .4rem; }
.ola-hero__points li::before {
	content: "";
	width: 16px; height: 16px;
	flex: 0 0 16px;
	border-radius: 50%;
	background: var(--ola-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* Steps + category grid used on content pages */
.ola-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.2rem;
	max-width: none !important;
	margin: 1.6rem 0 2rem;
}
.ola-card {
	background: var(--ola-white);
	border: 1px solid var(--ola-line);
	border-radius: var(--ola-radius-lg);
	padding: 1.4rem;
}
.ola-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.ola-card p { margin: 0; font-size: .95rem; }
.ola-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--ola-brand-light);
	color: var(--ola-brand-darker);
	font-weight: 700;
	font-size: .92rem;
	margin-bottom: .75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.ola-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 880px) {
	.ola-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px; height: 42px;
		margin-left: auto;
		padding: 9px;
		border-radius: 8px;
		cursor: pointer;
		order: 3;
	}
	.ola-burger span {
		display: block;
		height: 2px;
		background: var(--ola-ink);
		border-radius: 2px;
		transition: transform .2s ease, opacity .2s ease;
	}
	.ola-menu-toggle:checked ~ .ola-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ola-menu-toggle:checked ~ .ola-burger span:nth-child(2) { opacity: 0; }
	.ola-menu-toggle:checked ~ .ola-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.ola-header__inner { flex-wrap: wrap; gap: .5rem; }

	/* Bar row: logo · cart · burger. Nav and CTAs drop below, revealed together
	   by the checkbox. */
	.ola-logo   { order: 1; }
	.ola-cart   { order: 2; margin-left: auto; }
	.ola-burger { order: 3; margin-left: 0; }

	.ola-nav {
		order: 5;
		flex-basis: 100%;
		margin-left: 0;
		display: none;
		padding-bottom: .3rem;
	}
	.ola-menu-toggle:checked ~ .ola-nav { display: block; }
	.ola-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.ola-nav a { padding: .7rem .6rem; border-bottom: 1px solid var(--ola-line); border-radius: 0; }

	/* Previously .ola-header__cta was simply display:none here, which left the
	   mobile header with NO call to action at all. Both CTAs now drop into the
	   collapsed menu as full-width buttons instead of vanishing. */
	.ola-header__actions {
		order: 6;
		flex-basis: 100%;
		display: none;
		flex-wrap: wrap;
		gap: .5rem;
		padding-bottom: .9rem;
	}
	.ola-menu-toggle:checked ~ .ola-header__actions { display: flex; }
	.ola-header__actions .ola-btn { flex: 1 1 100%; }

	/* Full label has room again once stacked full-width. */
	.ola-cta__full  { display: inline; }
	.ola-cta__short { display: none; }

	main.site-main { padding-top: 32px; }
	.ola-hero { margin-top: -32px; padding: 44px 0 40px; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.ola-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
	.ola-footer__bottom { flex-direction: column; }
	.ola-trustbar { font-size: .76rem; }
	.woocommerce ul.products { grid-template-columns: 1fr 1fr; gap: .9rem; }
	.woocommerce ul.products li.product { padding: 1rem; }
}