/* SkillsRen base styles. Brand tokens live in theme.json; this is layout only. */

/* One container for the whole site: 1260px of content, matching the design's
   1440px canvas less its 90px margins. --sr-max is the container plus its
   gutters, for elements that pad rather than cap. */
:root {
	--sr-teal: var(--wp--preset--color--teal, #00b8aa);
	--sr-beige: var(--wp--preset--color--beige, #e8dcc4);
	--sr-cream: var(--wp--preset--color--cream, #faf7f2);
	--sr-charcoal: var(--wp--preset--color--charcoal, #3a3a36);
	--sr-white: var(--wp--preset--color--white, #fff);
	--sr-container: 1260px;
	--sr-gutter: clamp(1rem, 4vw, 3rem);
	--sr-max: calc(var(--sr-container) + var(--sr-gutter) * 2);
}

/* Mirrors theme.json. The generator template drops global-styles for Core Web
   Vitals, so the chrome cannot rely on it for base type. */
body {
	font-family: var(--wp--preset--font-family--nunito, Nunito, system-ui, sans-serif);
	line-height: 1.6;
	color: var(--sr-charcoal);
}

/* In-page CTAs (#packs, #samples) glide rather than jump. Honour a stated
   preference for less motion — a long smooth scroll is a common trigger. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Anchor targets clear the top edge instead of butting against it. */
[id] {
	scroll-margin-top: 1.5rem;
}

.sr-inner {
	width: 100%;
	max-width: var(--sr-max);
	margin-inline: auto;
	padding-inline: var(--sr-gutter);
}

.skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--sr-charcoal);
	color: var(--sr-cream);
}

.skip-link:focus {
	left: 0;
}

/* Pages built from patterns supply their own full-bleed sections and want no
   wrapper padding at all. These templates render raw content instead, so they
   still need a gutter — kept off .site-content so a pattern page never gets it. */
.site-content--plain {
	padding: 2rem clamp(1rem, 4vw, 3rem);
}

.site-header {
	background: var(--sr-cream);
}

/* Site chrome: used by the header and footer as well as by the blocks, so it
   lives here rather than in section.css, which only loads on pages that
   actually contain a block. */

/* The theme does not set border-box globally, so min-height was being added to
   the content box and buttons came out 20px taller than intended. Scoped to our
   own components rather than changed site-wide. */
[class*="wp-block-skillsren-"],
[class*="wp-block-skillsren-"] *,
.site-header *,
.site-footer *,
.pack,
.pack *,
.packs,
.packs * {
	box-sizing: border-box;
}

/* Buttons used by the blocks. Height lands at 48px; never above 56px. */
.sr-btn {
	/* Every other button here is an <a>; a real <button> would otherwise inherit
	   the UA default 2px outset border. */
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	max-height: 56px;
	padding: 0.75rem 2rem;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none;
}

.sr-btn {
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.sr-btn--primary {
	background: var(--sr-teal);
	color: var(--sr-cream);
}

.sr-btn--primary:hover {
	background: #009c90;
	color: var(--sr-cream);
	box-shadow: 0 6px 16px rgb(0 184 170 / 28%);
}

.sr-btn--secondary {
	border: 2px solid rgb(58 58 54 / 55%);
	color: var(--sr-charcoal);
}

.sr-btn--secondary:hover {
	border-color: var(--sr-teal);
	color: var(--sr-teal);
}

.sr-btn:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}

.sr-btn:focus-visible,
.slider__btn:focus-visible {
	outline: 3px solid var(--sr-charcoal);
	outline-offset: 3px;
}

/* Visible only to assistive technology. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip-path: none;
	white-space: normal;
}

/* Announcement bar. */
.site-bar {
	background: var(--sr-teal);
	color: var(--sr-cream);
}

.site-bar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--sr-max);
	margin-inline: auto;
	padding: 0.375rem var(--sr-gutter);
	min-height: 46px;
}

.site-bar__news {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.6875rem;
	align-items: center;
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
}


.site-bar__aside {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.125rem;
	align-items: center;
	font-size: 13.5px;
	font-weight: 700;
}

.site-bar a {
	padding-block: 0.25rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.site-bar a:hover,
.site-bar a:focus-visible {
	text-decoration-thickness: 2.5px;
}

.site-bar__social a {
	text-decoration: none;
}

.site-bar__social {
	display: flex;
	gap: 0.4375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-bar__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgb(250 247 242 / 20%);
}

.site-bar__social svg {
	width: 17px;
	height: 17px;
}

/* Floating capsule, matching the brand mockup. */


.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	width: calc(100% - var(--sr-gutter) * 2);
	max-width: var(--sr-container);
	margin: 0.75rem auto;
	padding: 0.375rem 0.5rem 0.375rem 1.5rem;
	border-radius: 999px;
	background: var(--sr-white);
	box-shadow: 0 10px 26px rgb(58 58 54 / 8%);
}

.site-header__cta {
	flex-shrink: 1;
	min-width: 0;
	white-space: nowrap;
	font-size: 15.5px;
	padding-inline: 1.625rem;
}

/* The pill capsule of links between the logo and the button. */
.site-nav {
	display: flex;
	min-width: 0;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	justify-content: center;
	margin: 0;
	padding: 6px;
	border-radius: 999px;
	background: rgb(232 220 196 / 50%);
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding: 0.75rem 1.375rem;
	border-radius: 999px;
	color: var(--sr-charcoal);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease, color 140ms ease;
}

.site-nav__list a:hover {
	background: var(--sr-white);
	color: var(--sr-teal);
}

.site-nav__list a:focus-visible {
	outline: 3px solid var(--sr-charcoal);
	outline-offset: 2px;
}

/* Whichever section you are in keeps its pill filled. Exactly one, decided in
   functions.php — WordPress's own classes light up more than one. */
.site-nav__list .current-menu-item > a {
	background: var(--sr-white);
}

/* Narrow enough that logo, links and button cannot share one line: the links
   drop to their own centred row rather than squeezing the button off-screen. */
@media (width < 60rem) {
	.site-header__bar {
		flex-wrap: wrap;
		/* Logo hard left, button hard right, links centred on their own row. */
		justify-content: space-between;
		row-gap: 0.625rem;
		padding-inline: 1rem;
		border-radius: 28px;
	}

	.site-nav {
		order: 3;
		width: 100%;
		justify-content: center;
	}

	.site-nav__list {
		/* min-width:auto on a flex item beats max-width, so the capsule would
		   keep its full content width and push past the card. */
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.site-nav__list::-webkit-scrollbar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__list a {
		transition: none;
	}
}

/* Below ~560px the CTA label is wider than the room left beside the logo, so it
   wraps rather than pushing the page sideways. */
@media (width < 35rem) {
	.site-header__bar {
		gap: 0.625rem;
		padding-inline: 1rem;
	}

	.site-header__logo img,
	.site-header .custom-logo {
		height: clamp(26px, 8vw, 34px);
	}

	.site-header__cta {
		max-height: none;
		padding: 0.5rem 0.875rem;
		font-size: 13px;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}

	.site-header__cta svg {
		display: none;
	}
}

.site-header__cta svg {
	width: 17px;
	height: 17px;
}

.site-header__logo,
.site-header .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-header__logo img,
.site-header .custom-logo {
	display: block;
	width: auto;
	height: clamp(30px, 4.5vw, 40px);
}

/* Footer -------------------------------------------------------------------- */
.site-footer {
	background: var(--sr-charcoal);
	color: var(--sr-cream);
	padding: clamp(2.75rem, 6vw, 4.125rem) var(--sr-gutter) 2.125rem;
}

.site-footer__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: var(--sr-container);
	padding-block-end: 2.75rem;
}

@media (width >= 48rem) {
	.site-footer__inner {
		grid-template-columns: 1.6fr 1fr 1fr;
	}
}

.site-footer__logo {
	display: block;
	width: auto;
	height: clamp(48px, 9vw, 62px);
	margin-block-end: 1.25rem;
}

.site-footer__tagline {
	margin: 0 0 0.875rem;
	font-size: 17px;
	font-weight: 800;
	color: var(--sr-teal);
}

.site-footer__intro {
	margin: 0;
	max-width: 22rem;
	font-size: 15px;
	line-height: 1.62;
	color: rgb(250 247 242 / 82%);
}

.site-footer__coltitle {
	margin: 0 0 1.125rem;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(250 247 242 / 72%);
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links a {
	display: inline-block;
	padding-block: 0.25rem;
	font-size: 15px;
	font-weight: 600;
	color: rgb(250 247 242 / 86%);
	text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	text-decoration: underline;
}

/* Social icons sit side by side; text links keep a row each. */
.site-footer__links:has(.menu-item--icon) {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
}

.site-footer__links:has(.menu-item--icon) > li:not(.menu-item--icon) {
	flex: 0 0 100%;
}

.site-footer__links .menu-item--icon {
	margin-top: 0.5rem;
}

.site-footer__links .site-footer__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1.5px solid rgb(250 247 242 / 30%);
	border-radius: 50%;
	color: rgb(250 247 242 / 86%);
}

.site-footer__links .site-footer__icon:hover,
.site-footer__links .site-footer__icon:focus-visible {
	border-color: var(--sr-teal);
	color: var(--sr-teal);
	text-decoration: none;
}

.site-footer__icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.site-footer__icon::after {
	content: attr(data-tooltip);
	position: absolute;
	inset-block-end: calc(100% + 8px);
	inset-inline-start: 50%;
	translate: -50% 0;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--sr-cream);
	color: var(--sr-charcoal);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
}

.site-footer__icon:hover::after,
.site-footer__icon:focus-visible::after {
	opacity: 1;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.625rem;
	align-items: center;
	justify-content: space-between;
	margin-inline: auto;
	max-width: var(--sr-container);
	padding-block-start: 1.625rem;
	border-block-start: 1px solid rgb(250 247 242 / 14%);
	font-size: 14px;
	font-weight: 600;
	color: rgb(250 247 242 / 76%);
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legallinks .site-footer__links {
	flex-direction: row;
	gap: 1.625rem;
}

/* ---- 404 ------------------------------------------------------------------
   Matches the site mockup's 404 hero. Deliberately without the "try one of
   these instead" pack grid — a dead end should offer a way out, not a shop. */
.notfound{
  position:relative;
  min-height:min(660px, 78svh);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(56px, 11vw, 88px) clamp(20px, 6vw, 90px);
  background:
    linear-gradient(135deg,
      rgba(0,184,170,0.92) 0%,
      rgba(0,184,170,0.60) 18%,
      rgba(150,205,195,0.42) 40%,
      rgba(232,220,196,0.74) 68%,
      var(--sr-beige) 100%),
    var(--sr-cream);
}

/* The pale disc the content sits on. */
.notfound__disc{
  z-index:0;pointer-events:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1240px, 190vw);aspect-ratio:1;border-radius:50%;
  background:rgba(250,247,242,0.94);
}
.notfound__blob{
  z-index:0;pointer-events:none;position:absolute;right:-70px;top:-70px;
  width:190px;height:190px;border-radius:50%;
  background:rgba(0,184,170,0.8);
}
.notfound__rings{z-index:0;pointer-events:none;position:absolute;left:-120px;bottom:-150px;}

.notfound__inner{
  z-index:1;position:relative;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

.notfound__numberwrap{position:relative;margin-bottom:26px;}
.notfound__halo{
  z-index:-1;pointer-events:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(240px, 34vw, 480px);aspect-ratio:1;border-radius:50%;
  background:rgba(0,184,170,0.14);
}
.notfound__number{
  z-index:1;position:relative;display:block;
  font-size:clamp(150px, 21vw, 300px);font-weight:900;
  letter-spacing:-0.05em;line-height:1;color:var(--sr-charcoal);
}

.notfound__title{
  margin:0 0 16px;
  font-size:clamp(30px, 5vw, 46px);font-weight:900;
  letter-spacing:-0.02em;line-height:1.12;max-width:640px;
}
.notfound__lede{
  margin:0 0 32px;
  font-size:clamp(16px, 2.2vw, 18.5px);line-height:1.62;
  opacity:0.76;max-width:480px;
}

.notfound__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}

/* Pill buttons, per the site mockup. */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;border-radius:999px;
  text-decoration:none;line-height:1;
}
.btn-pill--solid{
  background:var(--sr-teal);color:var(--sr-cream);
  padding:18px 36px;border:2px solid transparent;
}
.btn-pill--solid:hover{background:#009C90;color:var(--sr-cream);}
.btn-pill--outline{
  border:2px solid rgba(58,58,54,0.22);color:var(--sr-charcoal);
  padding:16px 32px;background:transparent;
}
.btn-pill--outline:hover{border-color:var(--sr-teal);color:var(--sr-teal);}

/* Branded content page block -------------------------------------------- */

.contentpage__head{
  position:relative;overflow:hidden;min-height:380px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,184,170,.92) 0%,rgba(0,184,170,.6) 18%,
    rgba(150,205,195,.42) 40%,rgba(232,220,196,.74) 68%,var(--sr-beige) 100%),
    var(--sr-cream);
}
.contentpage__head::before{
  /* the large off-white disc the text sits on */
  content:"";z-index:0;pointer-events:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* 1180px as drawn. It deliberately does not span a wide viewport — the
     teal and beige wedges it leaves at the edges are the point of the
     treatment, not a gap to close. */
  width:1180px;height:1180px;border-radius:50%;background:rgba(250,247,242,.94);
}
.contentpage__head::after{
  /* teal circle, top right */
  content:"";z-index:0;pointer-events:none;position:absolute;right:-62px;top:-62px;width:172px;height:172px;
  border-radius:50%;background:rgba(0,184,170,.8);
}
.contentpage__ring{
  /* outlined circle, bottom left — mostly off-canvas, an arc shows */
  z-index:0;position:absolute;left:-104px;bottom:-128px;width:320px;height:320px;
  border-radius:50%;border:1.5px solid rgba(58,58,54,.3);pointer-events:none;
}
.contentpage__headinner{
  z-index:1;position:relative;width:100%;margin-block:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:64px 24px;max-width:820px;
}
.contentpage__eyebrow{
  font-size:13.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sr-teal);margin-bottom:16px;
}
.contentpage__title{
  margin:0 0 14px;font-size:clamp(34px,5.2vw,52px);font-weight:900;
  letter-spacing:-.02em;line-height:1.1;max-width:720px;
}
.contentpage__lede{margin:0;font-size:18.5px;line-height:1.6;opacity:.78;max-width:640px}

.contentpage__body{
  /* ~68 characters. Long legal copy is unreadable at full container width. */
  max-width:720px;margin:0 auto;padding:56px 24px 72px;
}
.contentpage__updated{
  margin:0 0 34px;font-size:13.5px;font-weight:700;opacity:.7;
  padding-bottom:18px;border-bottom:1.5px solid rgba(58,58,54,.12);
}

/* The WYSIWYG output. Authors write plain content; the brand is applied here. */
.prose{font-size:17px;line-height:1.75;color:var(--sr-charcoal)}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose p{margin:0 0 20px}
.prose h2{
  margin:44px 0 14px;font-size:26px;font-weight:900;
  letter-spacing:-.018em;line-height:1.2;
}
.prose h3{margin:32px 0 10px;font-size:20px;font-weight:800;line-height:1.3}
.prose h4{margin:26px 0 8px;font-size:17px;font-weight:800}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--sr-teal)}
.prose a{color:#00857c;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:800}
.prose blockquote{
  margin:26px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--sr-teal);opacity:.86;
}
.prose hr{margin:38px 0;border:0;border-top:1.5px solid rgba(58,58,54,.12)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px}
.prose th,.prose td{
  text-align:left;padding:11px 12px;border-bottom:1.5px solid rgba(58,58,54,.12);
  vertical-align:top;
}
.prose th{font-weight:800}
/* Long tables must scroll on their own rather than widening the page. */
.prose .wp-block-table{overflow-x:auto}

@media (max-width:680px){
  .contentpage__head{min-height:300px}
  .contentpage__headinner{padding:48px 20px}
  .contentpage__body{padding:40px 20px 56px}
  .contentpage__blob{width:118px;height:118px;right:-44px;top:-44px}
}