/* ==========================================================================
   GoldCoast brand layer over Landspire.

   Landspire colours everything through CSS variables (--theme-color1..4) set by
   its colour-skin file. Remapping them here recolours the whole theme without
   editing parent files. "html:root" outranks the skin's ":root", whatever the
   load order. Hard-coded demo colours in Elementor content were recoloured in
   the database (see docs/progress.md).

   Mapping (demo → GCF):
   - theme-color1  lime #C7DC49 (main accent)  → GCF red, text-safe #E31B22 + white text
   - theme-color2  dark green #0C2F25          → charcoal #1E1E1E
   - theme-color3  green #10551F               → charcoal #2B2B2B
   - theme-color4  near-black                  → unchanged
   ========================================================================== */

html:root {
	--theme-color1: #E31B22;
	--theme-color1-rgb: 227, 27, 34;
	--theme-color1-lighter: #EF4A50;
	--theme-color1-darker: #C4161D;
	--theme-color1-text-color: #FFFFFF;

	--theme-color2: #1E1E1E;
	--theme-color2-rgb: 30, 30, 30;
	--theme-color2-lighter: #3A3A3A;
	--theme-color2-darker: #0F0F0F;
	--theme-color2-text-color: #FFFFFF;

	--theme-color3: #2B2B2B;
	--theme-color3-rgb: 43, 43, 43;
	--theme-color3-lighter: #454545;
	--theme-color3-darker: #151515;
	--theme-color3-text-color: #FFFFFF;

	--hover-theme-color: #E31B22;

	/* Other Landspire colour variables that were green in the demo. */
	--headings-color: #1E1E1E;                 /* was #0C2F25 */
	--section-title-color: #1E1E1E;
	--section-title-subtitle-color: #1E1E1E;
	--text-color: #555555;                     /* was green-grey #6D827C; 7.1:1 on white, 6.8:1 on --gcf-page */
	--entry-meta-color: #6B6B6B;               /* was #819291 */
	--link-color: #2B2B2B;
	--link-hover-color: #E31B22;               /* was green #5B8C51 */
	--swiper-theme-color: #E31B22;
	--form_control_common_bg: #F5F5F4;
	--form_control_common_border: #E6E3DF;
	--footer-default-theme-color: var(--theme-color1);

	/* Demo gradients used lime/green tints. */
	--gradient-1: linear-gradient(90deg, var(--theme-color1) 0%, #fff 100%);
	--gradient-3: linear-gradient(180deg, var(--theme-color1) 0%, rgba(0, 0, 0, 0) 100%);
	--gradient-4: linear-gradient(180deg, rgba(227, 27, 34, 0) 0%, rgba(227, 27, 34, 0.12) 100%);
	--gradient-5: linear-gradient(180deg, var(--theme-color1) 0%, rgba(227, 27, 34, 0) 100%);
	--gradient-7: linear-gradient(180deg, rgba(227, 27, 34, 0.16) 37.5%, rgba(255, 255, 255, 0) 100%);
}

/* NO UNDERLINES, SITE-WIDE (owner's rule, CLAUDE.md). Bootstrap underlines every
   <a>, Landspire underlines "p a:hover", Mascot's accordion underlines open
   titles and WooCommerce underlines checkout links, so this is !important. */
html body a,
html body a:hover,
html body a:focus,
html body a:active,
html body u,
html body ins,
html body abbr[title],
html body .tm-accordion .card .card-header .title {
	text-decoration: none !important;
}
/* Landspire also draws hover "underlines" as a growing 2px background line on
   blog, project, service and team titles. Remove those too. */
html body :is(.entry-title, .title, .service-title, .team-title) a,
html body :is(.entry-title, .title, .service-title, .team-title) a:hover,
html body .entry-title:hover a {
	background-image: none !important;
	background-size: 0 0 !important;
}

/* Light sections: red on hover. :where() keeps the colour at the lowest
   specificity so buttons and theme components keep their own hover colours. */
:where(a):hover {
	color: var(--gcf-red-ui);
}

/* Text selection in brand red. */
::selection {
	background: var(--gcf-red-ui);
	color: #fff;
}

/* Landspire sets "overflow-x: hidden" on <body>, which makes <body> a scroll
   container: the sticky header would then stick to <body> (never scrolls) and
   sit 32px too low under the admin bar. "clip" still prevents sideways
   scrolling but does not create a scroll container. */
@supports (overflow: clip) {
	html body {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/* Page background (the demo used yellow-green #F7F8ED, set per page in the
   database; those values were changed to #FAFAF9 too). */
body {
	background-color: var(--gcf-page);
}

/* Landspire components that put dark "theme-color2/3" text on the accent
   colour. That suited the demo lime; on GCF red it fails contrast, so they get
   white text (4.7:1). Found by scanning the theme and Mascot Core CSS.
   "html body" outranks Mascot widget CSS, which loads after this file. */
html body .btn-style1,
html body .btn-style2,
html body .btn-style2:hover .theme-btn,
html body .btn-style1:hover .theme-btn,
html body .pricing-plan-skin-style1 .theme-btn-main,
html body .blog-item-current-style1 .thumb .date,
html body .blog-item-current-style2 .thumb .date,
html body .team-current-theme1 .team-content .social-links a,
html body .working-block-style1 .number-top .number,
html body .service-block-style8 .inner-box .content-box .service-icon i,
html body .service-block-style8 .inner-box .content-box .service-icon svg,
html body .service-block-style8 .inner-box .hover-content .service-icon i,
html body .service-block-style8 .inner-box .hover-content .service-icon svg,
html body .service-block-style9 .image .icon {
	color: var(--theme-color1-text-color);
}
html body .btn-style1 .theme-btn,
html body .btn-style2 .theme-btn {
	color: inherit;
}
/* The round arrow badge inside these buttons is white with a dark arrow; keep it. */
html body .btn-style2 .theme-btn-arrow-left,
html body .btn-style2 .theme-btn-arrow-right {
	color: var(--theme-color2);
}
html body .btn-style1 .theme-btn-arrow-left,
html body .btn-style1 .theme-btn-arrow-right {
	color: var(--theme-color1-text-color);
}

/* Hard-coded demo green in Mascot's testimonial CSS. */
html body .client-info,
html body [class*="testimonial-block"] .client-info {
	border-color: rgba(30, 30, 30, 0.1);
}

/* Literal demo greens in Landspire's colour-skin file (outside its variables).
   Bootstrap buttons and WooCommerce buttons: GCF red with white text. */
html body .btn-theme-colored1,
html body.woocommerce .button:not(.compare):not(.yith-wcqv-button):not([name=apply_coupon]),
html body .woocommerce .button:not(.compare):not(.yith-wcqv-button):not([name=apply_coupon]),
html body .woosc_table .button,
html body .woosc_table .added_to_cart,
html body .woosw-item .added_to_cart {
	--bs-btn-color: #fff;
	--bs-btn-bg: #E31B22;
	--bs-btn-border-color: #E31B22;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #C4161D;
	--bs-btn-hover-border-color: #C4161D;
	--bs-btn-focus-shadow-rgb: 227, 27, 34;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #C4161D;
	--bs-btn-active-border-color: #C4161D;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #E31B22;
	--bs-btn-disabled-border-color: #E31B22;
	color: #fff;
}
html body .btn-theme-colored2,
html body .btn-theme-colored3 {
	--bs-btn-color: #fff;
	--bs-btn-bg: #1E1E1E;
	--bs-btn-border-color: #1E1E1E;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #E31B22;
	--bs-btn-hover-border-color: #E31B22;
	--bs-btn-focus-shadow-rgb: 30, 30, 30;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #C4161D;
	--bs-btn-active-border-color: #C4161D;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #1E1E1E;
	--bs-btn-disabled-border-color: #1E1E1E;
}
html body .btn-outline-theme-colored1 {
	--bs-btn-color: #E31B22;
	--bs-btn-border-color: #E31B22;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #E31B22;
	--bs-btn-hover-border-color: #E31B22;
	--bs-btn-focus-shadow-rgb: 227, 27, 34;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #C4161D;
	--bs-btn-active-border-color: #C4161D;
	--bs-btn-disabled-color: #E31B22;
	--bs-btn-disabled-border-color: #E31B22;
}
html body .btn-outline-theme-colored2,
html body .btn-outline-theme-colored3 {
	--bs-btn-color: #1E1E1E;
	--bs-btn-border-color: #1E1E1E;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1E1E1E;
	--bs-btn-hover-border-color: #1E1E1E;
	--bs-btn-focus-shadow-rgb: 30, 30, 30;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1E1E1E;
	--bs-btn-active-border-color: #1E1E1E;
	--bs-btn-disabled-color: #1E1E1E;
	--bs-btn-disabled-border-color: #1E1E1E;
}
html body .hr-divider {
	border-top-color: rgba(227, 27, 34, 0.2) !important;
}
html body .scroll-to-top a {
	background-image: linear-gradient(to right, #E31B22 0%, #EF4A50 51%, #E31B22 100%);
}
html body .scroll-to-top a:hover {
	box-shadow: 0 10px 20px rgba(227, 27, 34, 0.35);
}
html body .tm-sc-blog.blog-alternative-design .isotope-item article .post-thumb .post-thumb-inner .thumb:after {
	background-color: rgba(30, 30, 30, 0.85);
}

/* WPC Smart Wishlist popup: links follow the site rule (no underline, red on hover). */
html body .woosw-popup a,
html body .woosw-popup .woosw-popup-content-bot a,
html body .woosw-list a {
	text-decoration: none;
}
html body .woosw-popup a:hover,
html body .woosw-list a:hover {
	color: var(--gcf-red-ui);
}

/* Elementor renders Font Awesome icons as inline SVG ("e-font-icon-svg").
   Mascot's icon styles are written for font icons (<i>), so size and colour
   the SVGs to match: the icon follows the text colour, like a font icon. */
.features-block .icon-box .e-font-icon-svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
	vertical-align: middle;
	transition: transform .3s ease;
}
.features-block-style5 .inner-box:hover .icon-box .e-font-icon-svg { transform: scaleX(-1); }
.icon-type-font-icon .e-font-icon-svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
	.features-block .icon-box .e-font-icon-svg { transition: none; }
}

/* Dark sections: links in text are Sankofa yellow and bold (yellow on #1E1E1E
   is about 12:1), white on hover. Without underlines, the colour and weight are
   what set them apart from the light-grey body text. Applies to text links only
   (not buttons or menus) in the homepage FAQ and any container with the class
   "gcf-on-dark" (Elementor: Advanced → CSS Classes). */
html body #faq .tm-accordion .card-body a,
html body .gcf-on-dark :is(p, li, dd) a:not(.btn):not(.button):not(.tm-btn) {
	color: var(--gcf-yellow);
	font-weight: 700;
}
html body #faq .tm-accordion .card-body a:hover,
html body #faq .tm-accordion .card-body a:focus-visible,
html body .gcf-on-dark :is(p, li, dd) a:not(.btn):not(.button):not(.tm-btn):hover,
html body .gcf-on-dark :is(p, li, dd) a:not(.btn):not(.button):not(.tm-btn):focus-visible {
	color: #fff;
}

/* "100% natural" icon: GoldCoast's 100% natural logo (brand-assets, as
   assets/img/gcf-100-natural.webp) drawn as a mask in the icon's own colour,
   so it behaves like the other icons (white on the charcoal circle and on the
   red hover circle; charcoal on the yellow badge). It does not flip on hover
   like the font icons, because that would mirror the text.
   Used on: features block item "_id: gcfnatural" (ambassador section) and any
   widget with the CSS class "gcf-natural-badge" (FAQ badge). The Elementor
   icon on those is left empty. Uses ::after: Mascot draws the dashed ring
   with the icon box's ::before. */
.elementor-repeater-item-gcfnatural .icon-box,
.gcf-natural-badge .icon { position: relative; }
.elementor-repeater-item-gcfnatural .icon-box::after,
.gcf-natural-badge .icon::after {
	content: "";
	display: block;
	background-color: currentColor;
	-webkit-mask: url("../img/gcf-100-natural.webp") center / contain no-repeat;
	mask: url("../img/gcf-100-natural.webp") center / contain no-repeat;
	transition: transform .3s ease;
}
.elementor-repeater-item-gcfnatural .icon-box::after {
	position: absolute;
	inset: 9px;
}
.gcf-natural-badge .icon::after {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	color: var(--gcf-charcoal);
}
@media (prefers-reduced-motion: reduce) {
	.elementor-repeater-item-gcfnatural .icon-box::after { transition: none; }
}

/* Brand ambassador card: photo on top (whole photo, no gradient, products
   visible), name/role/checklist on a solid charcoal panel below it. */
.gcf-amb-photo { aspect-ratio: 5 / 6; }
@media (max-width: 1024px) {
	.gcf-amb-photo { aspect-ratio: 4 / 5; }
}
/* Tablets: the card is full width when stacked, which made the photo ~900px
   tall; keep it a sensible portrait size. */
@media (min-width: 768px) and (max-width: 1024px) {
	html body .gcf-amb-card { width: 100%; max-width: 560px; margin-inline: auto; }
}

/* Font Awesome inline SVGs in other Mascot feature/service skins (About page):
   follow the icon's font size and colour like font icons. */
.features-block .e-font-icon-svg,
[class*="service-block"] .e-font-icon-svg { width: 1em; height: 1em; fill: currentColor; }
/* Mascot features skins 1/2 hard-code a dark green fill on SVG icons. */
html body .features-block-style1 .icon svg,
html body .features-block-style2 .icon svg,
html body .features-block-style1 .icon svg path,
html body .features-block-style2 .icon svg path { fill: var(--gcf-red-ui); }
/* Skin 1 caps its text at ~230px; let it use the row (About page). */
html body .features-block-style1 .content { flex: 1; width: auto; max-width: none; }
/* Service block icons (About "What we do"): full icon size, charcoal like the
   demo's font icons (the red dot behind is Landspire's accent). */
html body [class*="service-block"] .service-icon svg { width: 1em; height: 1em; fill: var(--gcf-charcoal); position: relative; }
html body .features-block-style2 .icon svg { width: 22px; height: 22px; }
/* Service block images (About "What we do"): one shape for all four. */
html body .service-block-style1 .service-image img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
/* The number badge is white on a 5% white frosted tile: invisible on light
   photos. A charcoal tint keeps it readable on any image. */
html body .service-block-style1 .service-image .number { background-color: rgba(30, 30, 30, .55); }