/*
Theme Name: Sắc Mã
Author: Sắc Mã
Description: Tra cứu mã màu và công cụ màu sắc tiếng Việt.
Version: 2.1.74
Requires at least: 5.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sacma
*/
/* DS-16: inner-page layout only; shared link states and data tables belong to components.css. */
.w{max-width:var(--container);margin-inline:auto;padding:var(--sp-16) var(--page-gutter) var(--sp-48)}
.w>main{min-width:0;padding-top:var(--sp-24)}

/* DS-47: color/tool page content occupies almost the entire 1200px container.
   Long-form articles retain the independent 55rem reading measure. All content
   aligns left with cards and headings: no page-specific width overrides. */
:is(.w>main,.w>main>[data-tool])>:where(nav.bc,.page-head,.hero,.toc,.specs,.tbl-wrap,.row2,.color-application,.card-grid,.palette-bar,.palette-group,.pfam,.tool-workspace,.tool-reference,.note,details,pre){width:min(100%,72rem);max-width:100%;margin-inline:auto}
:is(.w>main,.w>main>[data-tool])>:where(h2,h3,p,ul,ol){width:min(100%,72rem);margin-inline:0}
:is(.w>main,.w>main>[data-tool])>.note{margin-top:var(--sp-16)}
/* Metadata at the end of detail, palette and tool pages is a page footer,
   not a narrow paragraph floating under the middle of the page. */
:is(.w>main,.w>main>[data-tool])>p.note:last-child{width:100%;max-width:100%;margin:var(--sp-32) 0 0;padding-top:var(--sp-16);border-top:1px solid var(--line)}
:is(.w>main,.w>main>[data-tool])>.row2{margin-top:var(--sp-16);align-items:stretch}
:is(.w>main,.w>main>[data-tool])>.tbl-wrap+.row2{margin-top:var(--sp-16)}
:is(.w>main,.w>main>[data-tool])>:where(p,ul,ol){max-width:var(--detail-prose-rail);line-height:1.75}
:is(.w>main,.w>main>[data-tool])>:where(h2,h3){letter-spacing:-.025em}
:is(.w>main,.w>main>[data-tool])>h2{position:relative;margin:var(--sp-32) 0 var(--sp-16);padding:0 0 var(--sp-12);border-bottom:1px solid var(--line);font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:1.35;letter-spacing:-.025em}
:is(.w>main,.w>main>[data-tool])>h2::after{content:'';position:absolute;inset-inline-start:0;bottom:-1px;width:var(--sp-32);height:3px;background:var(--brand);border-radius:var(--r-pill)}
:is(.w>main,.w>main>[data-tool])>:where(ul,ol){padding-inline-start:var(--sp-32);margin-block:0 var(--sp-24)}
:is(.w>main,.w>main>[data-tool])>:where(ul,ol) li{padding-inline-start:var(--sp-4)}
:is(.w>main,.w>main>[data-tool])>:where(ul,ol) li+li{margin-top:var(--sp-8)}
:is(.w>main,.w>main>[data-tool])>h2+ :where(p,ul,ol){margin-top:0}
:is(.w>main,.w>main>[data-tool])>nav.bc{margin-bottom:var(--sp-24)}
:is(.w>main,.w>main>[data-tool])>.page-head{margin:0 0 var(--sp-32);padding-bottom:var(--sp-24);border-bottom:1px solid var(--line)}
:is(.w>main,.w>main>[data-tool])>.page-head+.card-grid--directory{margin-top:var(--sp-16)}
:is(.w>main,.w>main>[data-tool])>.card-grid--directory{margin-bottom:var(--sp-32)}
:is(.w>main,.w>main>[data-tool])>.tool-workspace{margin:var(--sp-24) 0 var(--sp-48)}
.hero{margin-bottom:var(--sp-24);border-radius:var(--r-l)}
.hero h1{margin:0;font-size:var(--fs-hero-page);line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:-.04em}
.hero p{margin:var(--sp-12) 0 var(--sp-16)}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--sp-16)}
.hr{display:grid;grid-template-columns:minmax(7rem,.24fr) minmax(0,1fr);align-items:center;gap:var(--sp-16);margin-bottom:var(--sp-16)}
.hr>b{font-size:var(--fs-s)}
.tl{display:grid;gap:var(--sp-16);margin:var(--sp-16) 0}
.tl label{display:flex;flex-direction:column;gap:var(--sp-8);font-weight:var(--fw-semi);font-size:var(--fs-s)}
.in{display:flex;gap:var(--sp-8);align-items:center}
.in input[type=color],.tl input[type=color]{width:50px;height:48px;flex:none;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-4);background:var(--panel);cursor:pointer}
article code{font-family:var(--font-mono);padding:var(--sp-4) var(--sp-8);background:var(--surface);border-radius:var(--r-s)}
.cvr{display:grid;grid-template-columns:minmax(7rem,.24fr) minmax(0,1fr);gap:var(--sp-16);align-items:center}

@media(max-width:560px){
 .w{padding-top:var(--sp-8)}.w>main{padding-top:var(--sp-16)}:is(.w>main,.w>main>[data-tool])>nav.bc{margin-bottom:var(--sp-16)}
 :is(.w>main,.w>main>[data-tool])>.page-head{padding-bottom:var(--sp-16);margin-bottom:var(--sp-24)}
 :is(.w>main,.w>main>[data-tool])>h2{margin-top:var(--sp-32);font-size:var(--fs-xl)}
 .row2,.hr,.cvr{grid-template-columns:minmax(0,1fr)}
}