/*
Theme Name: Clemson Law Review
Theme URI: https://clemsonlawreview.com
Description: Block theme for the Clemson Law Review. Pair it with the Clemson Law Review Publishing plugin, which supplies Case Summaries, Volumes & Issues, citations, and the blocks these templates use.
Version: 1.35.0
Requires at least: 6.6
Requires PHP: 8.0
Author: Clemson Law Review
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clemson-law-review
*/

/* Light is the default for everyone. Dark applies only when a reader chooses it with the
   toggle in the header, which sets data-theme="dark" on <html> and remembers the choice. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--paper: #141019;
	--wp--preset--color--paper-deep: #1e1826;
	--wp--preset--color--ink: #eee9f4;
	--wp--preset--color--ink-soft: #b3a9c0;
	--wp--preset--color--rule: #342b40;
	--wp--preset--color--purple: #3a2360;
	--wp--preset--color--purple-ink: #c3a8ea;
	--wp--preset--color--orange-ink: #ff8a3d;
}

/* Theme toggle (header top line) */
.clr-theme-toggle-wrap { margin: 0; }
.clr-theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 11px 4px 9px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(0, 0, 0, .15); color: #fff; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.clr-theme-toggle:hover { border-color: #ffb27a; color: #ffb27a; }
.clr-theme-toggle:focus-visible { outline: 2px solid #ffb27a; outline-offset: 2px; }
.clr-theme-toggle svg { width: 14px; height: 14px; flex: none; }
.clr-theme-toggle .clr-icon-sun { display: none; }
:root[data-theme="dark"] .clr-theme-toggle .clr-icon-moon { display: none; }
:root[data-theme="dark"] .clr-theme-toggle .clr-icon-sun { display: block; }
.clr-topline-tools { display: flex; align-items: center; gap: 10px; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
:where(.wp-site-blocks) a:focus-visible, :where(.wp-site-blocks) button:focus-visible, :where(.wp-site-blocks) input:focus-visible, summary:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.label, .clr-label { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1; }

/* ---------- Masthead (purple, centered) ---------- */
.clr-header-part, .wp-site-blocks > header { margin: 0; }
/* The header (and its About menu) stacks above bars further down the page, such as the issue bar (z-index 6). */
.clr-site-head { position: relative; z-index: 50; }
.clr-site-head { background: var(--wp--preset--color--purple); color: #fff; padding-block: 0; border-bottom: 6px solid var(--wp--preset--color--orange); }
.home .clr-site-head { border-bottom: 0; }
.clr-site-head a { color: #fff; text-decoration: none; }
.clr-topline { padding-block: 10px; gap: 8px 24px; border-bottom: 1px solid rgba(255, 255, 255, .2); font-family: var(--wp--preset--font-family--label); font-weight: 500; font-size: .8125rem; color: rgba(255, 255, 255, .82); }
.clr-topline p { margin: 0; }
.clr-topline strong { color: #fff; font-weight: 600; }
.clr-wordmark { padding-block: 40px 22px; gap: 10px !important; }
.clr-wordmark-name { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: clamp(2.4rem, 8vw, 5.25rem); line-height: .95; letter-spacing: -.01em; }
.clr-wordmark-name .clr-wm-accent { color: #F56600; }
.clr-wordmark-tag { margin: 0; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.clr-navrow { border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.clr-nav { color: #fff; gap: 0; }
.clr-nav .wp-block-navigation-item__content { padding: 14px 22px; color: #fff; }
.clr-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #ffb27a; }
/* The section being viewed: orange text with an orange bar underneath. */
.clr-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.clr-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.clr-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation__submenu-icon { color: #ffb27a; }
.clr-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.clr-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content { box-shadow: inset 0 -3px 0 var(--wp--preset--color--orange, #f56600); }
.clr-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--orange-ink, #b44a00); font-weight: 600; box-shadow: inset 3px 0 0 var(--wp--preset--color--orange, #f56600); }
.clr-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: #ffb27a; box-shadow: none; }
.clr-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--paper) !important; color: var(--wp--preset--color--ink) !important; border: 1px solid var(--wp--preset--color--rule) !important; border-top: 3px solid var(--wp--preset--color--orange) !important; min-width: 230px !important; padding-block: 6px; box-shadow: 0 12px 30px rgba(20, 10, 30, .18); text-align: left; }
.clr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 18px; font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1rem; color: var(--wp--preset--color--ink); }
.clr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--paper-deep); color: var(--wp--preset--color--ink); }
.clr-nav .wp-block-navigation__responsive-container-open { color: #fff; padding: 12px 0; }
.clr-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--purple) !important; color: #fff !important; padding: 24px clamp(16px, 4vw, 40px); }
.clr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 12px 0; color: #fff; }
.clr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none; border-left: 3px solid var(--wp--preset--color--orange) !important; padding-left: 14px; }
.clr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #fff; }
.clr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.clr-search { margin: 0; }
.clr-search .wp-block-search__inside-wrapper { border: 1px solid rgba(255, 255, 255, .3) !important; background: rgba(0, 0, 0, .15); padding: 0 !important; }
.clr-search .wp-block-search__input { background: transparent; border: 0; color: #fff; font-family: var(--wp--preset--font-family--body); font-size: .9rem; padding: 4px 10px; width: 150px; }
.clr-search .wp-block-search__input::placeholder { color: rgba(255, 255, 255, .7); }
.clr-search .wp-block-search__button { background: transparent; color: #fff; padding: 4px 8px; margin: 0; }
.clr-search .wp-block-search__button svg { fill: currentColor; }

/* ---------- Home: purple issue band ---------- */
.clr-hero-band { background: var(--wp--preset--color--purple); padding-block: 48px 52px; margin-top: 0 !important; border-bottom: 6px solid var(--wp--preset--color--orange); }
.clr-home-main { padding-top: 56px; padding-bottom: 0; }
.clr-link-cards { gap: 16px !important; }
.clr-link-cards .wp-block-column { border: 1px solid var(--wp--preset--color--rule); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.clr-link-cards p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--wp--preset--color--ink-soft); }
.clr-link-cards .clr-card-title { font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; color: var(--wp--preset--color--ink); }
.clr-link-cards .clr-card-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.clr-link-cards .clr-card-title a:hover { color: var(--wp--preset--color--purple-ink); }
.clr-link-cards .wp-block-column:focus-within { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }

/* ---------- Page structure ---------- */
.clr-main { padding-block: 44px 72px; }
.clr-page-title { margin-bottom: 1.5rem; padding-bottom: 18px; border-bottom: 2px solid var(--wp--preset--color--ink); }
.clr-section-gap { margin-top: 64px !important; }
.wp-block-post-content > * + h2 { margin-top: 2.2em; }
.wp-block-post-content > h2 { font-size: 1.6rem; }
.clr-single .wp-block-post-content { font-size: 1.125rem; }
.clr-single .clr-citation, .clr-single .clr-author-bios { margin-top: 48px; }

/* ---------- Footer ---------- */
.clr-footer { border-top: 2px solid var(--wp--preset--color--ink); padding-block: 28px 0; margin-top: 64px; }
.clr-footer-links { gap: 8px 28px; }
.clr-footer-links p { margin: 0; }
.clr-footer-links a { font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--wp--preset--color--purple-ink); text-decoration: none; }
.clr-footer-links a:hover { color: var(--wp--preset--color--orange-ink); }
.clr-fine { border-top: 1px solid var(--wp--preset--color--rule); margin-top: 22px; padding-block: 16px; font-family: var(--wp--preset--font-family--label); font-weight: 500; font-size: .8125rem; color: var(--wp--preset--color--ink-soft); }
.clr-fine p { margin: 0; font-size: inherit; }
.clr-fine a { color: var(--wp--preset--color--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.clr-fine a:hover { color: var(--wp--preset--color--purple-ink); }

/* CitronNetwork credit */
.clr-credit { margin: 0 auto; padding: 4px 0 22px; text-align: center; font-family: var(--wp--preset--font-family--label); font-weight: 500; font-size: .75rem; letter-spacing: .02em; }
.clr-credit a { display: inline-flex; align-items: center; gap: .4rem; color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.clr-credit a:hover span { text-decoration: underline; text-underline-offset: 2px; color: var(--wp--preset--color--purple-ink); }
.clr-credit-logo { flex: none; }

/* ---------- Core blocks ---------- */
.wp-block-details summary { cursor: pointer; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; }
.wp-block-details[open] summary { margin-bottom: 8px; }
.wp-block-table table { font-variant-numeric: tabular-nums; }
.wp-block-post-content, .wp-block-footnotes li { overflow-wrap: break-word; }
.wp-block-footnotes li a { overflow-wrap: anywhere; }
.wp-block-footnotes { border-top: 1px solid var(--wp--preset--color--rule); padding-top: 18px; margin-top: 40px; }

@media (max-width: 781px) {
	.clr-topline-mid { display: none; }
	.clr-search .wp-block-search__input { width: 110px; }
	.clr-link-cards { flex-wrap: wrap !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* "Cite as Clem. L. Rev." in large and small caps, as in law review footnotes. */
.clr-topline .clr-sc { font-variant: small-caps; font-variant-caps: small-caps; letter-spacing: .04em; }

/* ---------- Header dateline (1.24.2) ----------
   Date on the left; "Vol. ◆ Cite as ◆ Est. 2025" centred; Calendar, Dark and Search as text links. */
.clr-site-head { border-top: 4px solid var(--wp--preset--color--orange); }
.clr-site-head .clr-dateline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 24px; position: relative; padding-block: 8px; }
.clr-site-head .clr-dateline > * { margin: 0 !important; min-width: 0; }
.clr-dl-date { font-family: var(--wp--preset--font-family--body); font-style: italic; font-weight: 400; font-size: .9375rem; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clr-dl-center { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--wp--preset--font-family--body); font-size: .9375rem; font-weight: 400; color: #fff; white-space: nowrap; }
.clr-topline .clr-dl-center strong { font-weight: 500; }
.clr-dl-est, .clr-site-head a.clr-dl-vol { font-variant: small-caps; font-variant-caps: small-caps; letter-spacing: .04em; }
.clr-dl-sep { color: var(--wp--preset--color--orange); font-size: .5625rem; line-height: 1; }
.clr-site-head a.clr-dl-vol { color: #fff; text-decoration: none; }
.clr-site-head a.clr-dl-vol:hover { color: #ffb27a; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.clr-dateline .clr-topline-tools { justify-self: end; gap: 20px; }

/* The three controls as text links (the calendar button comes from the plugin). */
.clr-dateline .clr-theme-toggle,
.clr-dateline .clr-cal-open,
.clr-dl-search > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: #fff; font-family: var(--wp--preset--font-family--label); font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; white-space: nowrap; }
.clr-dl-search > summary::-webkit-details-marker { display: none; }
.clr-dateline .clr-theme-toggle:hover,
.clr-dateline .clr-cal-open:hover,
.clr-dl-search > summary:hover,
.clr-dl-search[open] > summary { color: #ffb27a; border-color: transparent; }
.clr-dateline .clr-theme-toggle svg,
.clr-dateline .clr-cal-open svg,
.clr-dl-search > summary svg { width: 15px; height: 15px; flex: none; }

/* Search drop-down */
.clr-dl-search { position: static; }
.clr-dl-pop { position: absolute; right: 0; top: calc(100% + 1px); z-index: 60; width: min(380px, 100%); box-sizing: border-box; padding: 14px; background: #3d2062; border: 1px solid rgba(255, 255, 255, .2); border-top: 3px solid var(--wp--preset--color--orange); box-shadow: 0 16px 36px rgba(20, 10, 30, .35); }
:root[data-theme="dark"] .clr-dl-pop { background: #2a1845; }
.clr-dl-pop .clr-search .wp-block-search__inside-wrapper { background: rgba(0, 0, 0, .2); }
.clr-dl-pop .clr-search .wp-block-search__input { width: 100%; font-size: 1rem; padding: 9px 12px; }
.clr-dl-pop .clr-search .wp-block-search__button { padding: 6px 10px; }

@media (max-width: 1100px) {
	.clr-dl-est, .clr-dl-sep:has(+ .clr-dl-est) { display: none; }
}
@media (max-width: 960px) {
	.clr-site-head .clr-dateline { grid-template-columns: minmax(0, 1fr) auto; }
	.clr-dl-date { display: none; }
	.clr-dl-center { justify-content: flex-start; }
}
@media (max-width: 600px) {
	.clr-site-head { border-top-width: 3px; }
	.clr-site-head .clr-dateline { padding-block: 2px; }
	.clr-dl-center { font-size: .875rem; gap: 9px; }
	.clr-dateline .clr-topline-tools { gap: 2px; margin-right: -10px !important; }
	.clr-dateline .clr-theme-toggle, .clr-dateline .clr-cal-open, .clr-dl-search > summary { min-width: 44px; min-height: 44px; justify-content: center; }
	.clr-dateline .clr-theme-toggle-label, .clr-dateline .clr-cal-open-label, .clr-dl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.clr-dateline .clr-theme-toggle svg, .clr-dateline .clr-cal-open svg, .clr-dl-search > summary svg { width: 18px; height: 18px; }
	.clr-dl-pop { left: 0; right: 0; width: auto; }
}
@media (max-width: 400px) {
	.clr-site-head a.clr-dl-vol, .clr-dl-sep:has(+ .clr-dl-cite) { display: none; }
}
.clr-dateline .clr-cal-open { order: -1; }

/* ---------- Phone masthead (1.24.3) ----------
   "Clemson" and "Law Review" on their own lines, a short orange rule, and the tagline in italic serif. */
@media (max-width: 600px) {
	.clr-wordmark { padding-block: 30px 22px; gap: 0 !important; }
	.clr-wordmark-name { font-size: clamp(2.5rem, 15.5vw, 3.875rem); line-height: .9; }
	.clr-wordmark-name .clr-wm-accent { display: block; }
	.clr-wordmark-name a { white-space: nowrap; }
	.clr-wordmark-tag { font-family: var(--wp--preset--font-family--body); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .85); text-wrap: balance; }
	.clr-wordmark-tag::before { content: ""; display: block; width: 64px; height: 2px; margin: 18px auto 14px; background: var(--wp--preset--color--orange); }
	.clr-nav .wp-block-navigation__responsive-container-open { padding: 8px 0; }
	/* Home: keep "Volume I, Issue I" together, with the date on the next line. */
	.clr-hero-head h2 a, .clr-hero-head h2 em { display: inline-block; }
}
