/* WordPress additions to the What’s My Color Season design (site.css stays untouched). */

/* Skip link: visible when focused (the design's .sr class keeps it hidden otherwise). */
.sr:focus,
.sr:focus-visible {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--cream);
	font-weight: 700;
	text-decoration: none;
}

/* Logged-in admin bar. */
@media screen and (min-width: 783px) {
	.admin-bar .nav { top: 32px; }
	.admin-bar .mpanel { top: calc(74px + 32px); }
	.admin-bar .toc { top: calc(100px + 32px); }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
	.admin-bar .nav { top: 46px; }
}

/* Article layout without a table of contents. */
.article.article--full { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* Block editor content inside .prose. */
.prose img,
.prose video,
.prose iframe { max-width: 100%; height: auto; }
.prose figure,
.prose .wp-block-image { margin: 10px 0 26px; }
.prose figure img,
.fms-featured img { border: 2px solid var(--ink); border-radius: 18px; display: block; }
.fms-featured { margin: 0 0 30px; }
.prose figcaption,
.prose .wp-element-caption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.prose .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; }
.prose .alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; }
.prose .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.prose blockquote,
.prose .wp-block-quote {
	margin: 24px 0;
	padding: 18px 22px;
	border: 2px solid var(--ink);
	border-radius: 18px;
	background: var(--paper);
	font-size: 20px;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .wp-block-button__link { border-radius: 999px; }
.prose pre,
.prose code { font-size: 15px; }
.prose h2[id],
.prose h3[id] { scroll-margin-top: 100px; }
.prose .updated { font-size: 14px; color: var(--muted); margin-top: 30px; }
.prose::after { content: ""; display: table; clear: both; }

/* Pagination. WordPress wraps links in .nav-links, which the design uses for the header menu. */
.fms-pages { margin-top: 40px; }
.fms-pages .nav-links { display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.fms-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	font-weight: 700;
	text-decoration: none;
	opacity: 1;
}
.fms-pages .page-numbers.current { background: var(--ink); color: var(--cream); }
.fms-pages .page-numbers:hover { text-decoration: none; }

/* Search form. */
.fms-search { display: flex; gap: 8px; }
.fms-search input[type="search"] { flex: 1; min-width: 0; }

/* Screen-reader text used by WordPress core output. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Busy state on form buttons while submitting. */
.form [aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* Block theme wrappers must not change the design's layout (sticky header, full-width sections). */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-template-part { display: contents; }

/* Brand: logo image, footer brand row and the longer footer word. */
.logo-img{gap:0;line-height:0}
.logo-img img{display:block}
.ff-brand{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.ff-brand .logo-img{flex:none}
.bigword.bigword-long{font-size:clamp(34px,10.6vw,168px)}
.ff-links ul.ff-cols{grid-template-columns:1fr 1fr;column-gap:22px}
.ff-links ul.ff-cols li{white-space:nowrap}
.ff-links ul.ff-cols li:first-child{grid-column:1/-1}
@media (min-width:981px){.ff-links{grid-template-columns:1fr 1.45fr 1fr 1fr}}
@media (max-width:980px){.ff-links ul.ff-cols{grid-template-columns:1fr}.ff-links ul.ff-cols li{white-space:normal}}

/* Inline quiz on the quiz page (the popup keeps the design's full-screen style). */
.quiz.quiz-inline{position:relative;inset:auto;z-index:auto;display:block;overflow:hidden;border:2px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink);margin:28px 0 8px;scroll-margin-top:90px;animation:none}
.quiz-inline .q-shapes span{position:absolute}
.quiz-inline .q-inner{padding:6px 0 34px;min-height:0}
.quiz-inline .q-progress{margin-top:24px}
.q-noscript{margin:0 0 24px;font-weight:700;text-align:center}
.res-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-weight:700}
.res-share a,.res-share button{border:2px solid var(--ink);border-radius:999px;background:var(--paper);padding:6px 14px;font:inherit;font-size:15px;text-decoration:none;color:var(--ink);cursor:pointer}
.res-share a:hover,.res-share button:hover{background:var(--butter)}
@media (max-width:700px){.quiz.quiz-inline{border-radius:24px;box-shadow:6px 6px 0 var(--ink);margin-left:-4px;margin-right:-4px}}

/* Quiz page content */
.phero .updated{margin:18px 0 0;font-size:14px;font-weight:600;color:var(--ink2)}
.mini-seasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:22px 0 10px}
.mini-seasons a{display:flex;flex-direction:column;gap:4px;padding:12px;border:2px solid var(--ink);border-radius:18px;background:var(--paper);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.mini-seasons a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.mini-seasons .strip{display:flex;height:22px;border-radius:9px;overflow:hidden;border:1.5px solid var(--ink);margin-bottom:6px}
.mini-seasons .strip i{flex:1}
.mini-seasons b{font-family:var(--display);font-size:17px;line-height:1.2}
.mini-seasons small{color:var(--muted);font-size:13px;font-weight:600}
.prose .q-list{padding-left:1.3em}
.prose .q-list li{margin:0 0 12px}
.prose .q-list b{display:block}
.prose .q-list span{color:var(--muted);font-size:16px}
.phero.quiz-hero{padding:34px 0 56px}
.phero.quiz-hero h1{font-size:clamp(32px,5vw,66px)}
.phero.quiz-hero .lead{margin-top:14px}
.phero.quiz-hero .updated{margin-top:10px}
.res-share{justify-content:center}
@media (max-width:560px){.phero.quiz-hero{padding-top:22px}.phero.quiz-hero .crumbs{margin-bottom:10px}.phero.quiz-hero .eyebrow{display:none}}

/* Try-on: framing zoom slider needs a visible track. */
#frZoom{height:12px;border:2px solid var(--ink);background:linear-gradient(90deg,var(--tomato) 0 var(--p,50%),#EFE4D6 var(--p,50%) 100%)}
#frZoom:focus-visible{outline:3px solid var(--tomato);outline-offset:4px}

/* Buttons that are links keep their button colors inside the table of contents and other link styles. */
a.btn{text-decoration:none}
a.btn-primary,a.btn-primary:hover,.toc a.btn-primary,.toc a.btn-primary:hover{color:var(--cream);text-decoration:none}
.toc a.btn:hover{text-decoration:none}
.mpanel a.btn{font-family:inherit;font-weight:700;font-size:18px;letter-spacing:normal;padding:15px 26px;border-bottom:2px solid var(--ink)}

/* Quiz meter on phones: one row per trait (label, bar, label) so the labels never overflow. */
@media (max-width:560px){
  .meter{grid-template-columns:1fr;gap:6px}
  .meter div{display:flex;align-items:center;gap:10px;padding:7px 12px}
  .meter small{display:contents;font-size:10px}
  .meter small span{flex:0 0 46px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
  .meter small span:last-child{order:2;text-align:right}
  .meter .bar{order:1;flex:1;margin-top:0}
}

/* Footer toy on phones: smaller pills, a little more room, nothing spills over the links. */
.pit{overflow:hidden}
@media (max-width:560px){.pill{font-size:15px;padding:8px 15px}.pit{height:300px}}

/* Home hero: the headline can't squeeze the try-on card; the card gets more room. */
.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero .tryon-card{max-width:500px;width:100%}
@media (max-width:980px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}

/* Article grid: long tables or cards never push the text column wider than the screen. */
.article>*{min-width:0}
.mini-seasons{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media (max-width:560px){.prose table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}}
.hero h1{font-size:clamp(46px,6.2vw,90px)}