/*
Theme Name: Lobo Child
Theme URI: https://www.coreylucius.com
Description: Child theme of Lobo. Every customisation lives here so the parent theme can be updated without losing work.
Author: Corey Lucius
Template: lobo
Version: 1.0.0
*/

/* Custom styles go below. The parent stylesheet is loaded first by functions.php. */

/* ---------------------------------------------------------------------------
   Skills section (About page)

   Replaces the skt-skill-bar plugin's percentage bars. Laid out as full-width
   group rows rather than equal columns: the groups are genuinely uneven (8 / 3
   / 1) because they reflect real emphasis, and rows absorb that where columns
   would leave two of them mostly empty.

   Each group carries its own --cl-accent / --cl-tint, set inline from the
   colour the original bars were tinted with.
   --------------------------------------------------------------------------- */

.cl-skills {
	margin: 28px 0 10px;
}

.cl-skills .cl-skills__group + .cl-skills__group {
	margin-top: 22px;
}

/* The theme's inline OptionTree stylesheet carries `.text-module .copy h4` at
   specificity (0,2,1) and loads after this file, so the heading needs (0,3,1)
   to keep its own face. Structural, rather than !important. */
.cl-skills .cl-skills__group h4.cl-skills__heading {
	font-family: Lato, "Open Sans", sans-serif;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin: 0 0 11px;
	display: flex;
	align-items: center;
	line-height: 1;
}

.cl-skills .cl-skills__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cl-accent, #999);
	display: inline-block;
	margin-right: 8px;
	flex: 0 0 auto;
}

.cl-skills .cl-skills__count {
	margin-left: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #bdbdbd;
}

/* Skills wrap as tags, so a group of one and a group of eight both sit well. */
.cl-skills .cl-skills__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.cl-skills .cl-skills__list li.cl-skills__skill {
	font-family: Lato, "Open Sans", sans-serif;
	font-size: 13.5px;
	line-height: 1.35;
	color: #3a3a3a;
	background: var(--cl-tint, #f3f3f3);
	border-left: 3px solid var(--cl-accent, #999);
	border-radius: 0 3px 3px 0;
	padding: 7px 11px;
	margin: 0;
	transition: transform .18s ease, box-shadow .18s ease;
}

.cl-skills .cl-skills__list li.cl-skills__skill:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .09);
}

@media only screen and (max-width: 767px) {
	.cl-skills .cl-skills__list li.cl-skills__skill {
		font-size: 13px;
		padding: 6px 10px;
	}
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.cl-skills .cl-skills__list li.cl-skills__skill {
		transition: none;
	}
	.cl-skills .cl-skills__list li.cl-skills__skill:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Hero headline (About page)

   Previously styled inline in the page's krown_hero_text field at a flat
   6.5vw, which scaled linearly with no bounds: ~24px on a phone but ~166px on
   a 2560px display, running edge to edge with no gutter.

   The clamp below pins a 24px floor and a 48px ceiling and grows gently in
   between, so the line stays a headline rather than a billboard.
   --------------------------------------------------------------------------- */

/* The theme pins this to a flat 35px below 480px via
   `body #hero-wrapper .text-module .copy h1` at specificity (1,2,2), which
   would override a plainer selector and break the clamp on phones. Matching
   its shape and adding the class gives (1,3,2). */
body #hero-wrapper .text-module .copy h1.fading-text {
	font-family: "Playfair Display", Georgia, serif;
	/* True Black. The parent theme only loads up to 800, so inc/hero.php
	   enqueues the real 900 face — otherwise the browser fakes it. */
	font-weight: 900;
	font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
	line-height: 1.2;
	/* Heavy display type sets tighter than book weight. */
	letter-spacing: -.012em;
	text-align: center;
	color: #fff;

	/* Never let the line touch the viewport edge, and cap its measure so it
	   does not stretch into a single thin band on wide screens. */
	max-width: min(88%, 44rem);
	margin: 0 auto;

	/* Sit into the photograph rather than on top of it. A blend mode was tried
	   here and rejected: soft-light dissolved the line completely over the
	   photo's dark regions. Reduced weight and opacity plus a wide, soft shadow
	   give the same recessive feel while staying legible on any frame. */
	opacity: .82;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 40px rgba(0, 0, 0, .45);

	transition: opacity .3s ease-out;
}

/* The old inline script toggled this class but nothing ever styled it. */
body #hero-wrapper .text-module .copy h1.fading-text.fade-out {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	body #hero-wrapper .text-module .copy h1.fading-text {
		transition: none;
	}
}