/*
Theme Name: Priority People
Theme URI: https://prioritypeople.org
Author: Priority People
Description: Editorial magazine theme for Priority People - product reviews and buying guides. Typographic, rule-driven layout built for long comparison articles with embedded product cards.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: prioritypeople
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#000;
  --paper:#fff;
  --muted:#6e6e73;
  --muted-2:#96969b;
  --rule:#e3e3e3;
  --rule-strong:#000;
  --accent:#e2211c;
  --accent-ink:#fff;
  --wash:#f5f5f3;

  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* Khung ngoai: theo % man hinh, chi chan tran o man hinh rat rong. */
  --wrap:min(1440px, 94vw);
  /* Cot bai: KHONG dat so co dinh. Lay 100% be ngang khung (khung da chay theo
     94vw o tren) nen moi man hinh duoi ~1150px deu chiem tron chieu ngang;
     tren nguong do chan lai o 68rem de dong chu khong dai vo han.
     Muon bo chan tran hoan toan: doi thanh '--measure:100%'. */
  --measure:min(100%, 68rem);
  --measure-wide:var(--measure); /* tit, bang, the san pham dung chung mep voi than bai */
  --gap:2rem;
  --gap-s:1.25rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.06;margin:0}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:10px 14px;z-index:999}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   2. SHARED EDITORIAL BITS
   ============================================================ */
.rubric{
  font-family:var(--sans);font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  text-decoration:none;display:inline-block;margin-bottom:.5rem;
}
.rubric:hover{text-decoration:underline;text-underline-offset:3px}
.rubric--ink{color:var(--ink)}

.byline{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.byline a{color:var(--ink);text-decoration:none}
.byline a:hover{text-decoration:underline;text-underline-offset:3px}
.byline .sep{margin:0 .5rem;color:var(--muted-2)}

.dek{font-family:var(--serif);font-size:1.0625rem;line-height:1.5;color:var(--muted);margin:.75rem 0 0}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-top:2px solid var(--ink);padding-top:.7rem;margin-bottom:1.5rem;
}
.section-head h2{
  font-size:.8125rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.section-head a{
  font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);white-space:nowrap;
}
.section-head a:hover{color:var(--accent)}

.thumb{display:block;position:relative;overflow:hidden;background:var(--wash)}
.thumb::before{content:"";display:block;padding-top:66.6%}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card:hover .thumb img{transform:scale(1.04)}
.thumb--square::before{padding-top:100%}

.card{display:flex;flex-direction:column;gap:.85rem}
.card__title{font-size:1.25rem;line-height:1.12}
.card__title a{text-decoration:none}
.card__title a:hover{color:var(--accent)}

/* ============================================================
   3. MASTHEAD
   ============================================================ */
.masthead{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.masthead__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;height:64px}
.masthead__left,.masthead__right{display:flex;align-items:center;gap:.9rem}
.masthead__right{justify-content:flex-end}

.wordmark{
  font-family:var(--sans);font-weight:900;font-size:1.5rem;letter-spacing:-.045em;
  text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;
}
.wordmark span{color:var(--accent)}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink);
}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

.btn-sub{
  font-family:var(--sans);font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);text-decoration:none;padding:.6rem 1rem;white-space:nowrap;
}
.btn-sub:hover{background:var(--accent)}

.catbar{border-top:1px solid var(--rule);background:var(--paper)}
.catbar ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.catbar ul::-webkit-scrollbar{display:none}
.catbar a{
  display:block;padding:.7rem 0;font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;
  border-bottom:2px solid transparent;
}
.catbar a:hover,.catbar .current-menu-item>a{border-bottom-color:var(--accent);color:var(--accent)}

/* off-canvas */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
.drawer[aria-hidden="false"]{visibility:visible}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s}
.drawer[aria-hidden="false"] .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;left:0;bottom:0;width:min(420px,88vw);background:var(--paper);
  border-right:1px solid var(--ink);padding:1.5rem 1.75rem 3rem;overflow-y:auto;
  transform:translateX(-100%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.drawer[aria-hidden="false"] .drawer__panel{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.drawer h3{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin:2rem 0 .75rem;color:var(--muted)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer ul a{
  display:block;padding:.55rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
}
.drawer ul a:hover{color:var(--accent)}
.searchform{display:flex;border:1px solid var(--ink)}
.searchform input[type=search]{
  flex:1;border:0;padding:.7rem .8rem;font-family:var(--sans);font-size:.9rem;background:none;color:inherit;
}
.searchform input[type=search]:focus{outline:none}
.searchform button{
  border:0;background:var(--ink);color:var(--paper);padding:0 1rem;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

/* ============================================================
   4. HOME
   ============================================================ */
.lead{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap);padding:2.5rem 0;border-bottom:1px solid var(--ink)}
.lead__body{display:flex;flex-direction:column;justify-content:center}
.lead h1{font-size:clamp(2rem,4.4vw,3.5rem);letter-spacing:-.035em}
.lead h1 a{text-decoration:none}
.lead h1 a:hover{color:var(--accent)}
.lead .dek{font-size:1.15rem;margin-top:1rem}
.lead .byline{margin-top:1.25rem}
.lead .thumb::before{padding-top:72%}

.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--ruled>*{border-top:1px solid var(--rule);padding-top:1.1rem}

.block{padding:2.75rem 0;border-bottom:1px solid var(--rule)}
.block:last-child{border-bottom:0}

.split{display:grid;grid-template-columns:1fr 340px;gap:3.5rem}
.rail .rail__item{display:grid;grid-template-columns:34px 1fr;gap:.9rem;padding:1rem 0;border-top:1px solid var(--rule)}
.rail .rail__num{font-family:var(--sans);font-weight:900;font-size:1.5rem;color:var(--accent);line-height:1}
.rail .rail__title{font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:-.015em}
.rail .rail__title a{text-decoration:none}
.rail .rail__title a:hover{color:var(--accent)}

.stack__item{display:grid;grid-template-columns:1fr 150px;gap:1.25rem;padding:1.4rem 0;border-top:1px solid var(--rule);align-items:start}
.stack__item .thumb::before{padding-top:100%}
.stack__item h3{font-size:1.15rem;line-height:1.14}
.stack__item h3 a{text-decoration:none}
.stack__item h3 a:hover{color:var(--accent)}

/* ============================================================
   5. ARTICLE
   ============================================================ */
.article-head{padding:2.5rem 0 1.5rem}
.article-head h1{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.035em}
.article-head .dek{font-size:clamp(1.05rem, 1rem + .3vw, 1.35rem);margin-top:1.1rem;max-width:min(100%, calc(var(--measure) * .84))}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0;margin-top:1.6rem;
  padding-top:1.1rem;border-top:1px solid var(--rule)}
.hero{margin:0 auto 2.5rem;border-bottom:1px solid var(--rule);padding-bottom:1.25rem}
.hero img{margin:0 auto;max-height:62vh;width:auto}
.hero figcaption{font-family:var(--sans);font-size:.75rem;color:var(--muted);margin-top:.75rem;text-align:center}

.article-head{margin-inline:auto}
.hero{max-width:none}

.entry{
  margin-inline:auto;
  font-size:clamp(1.0625rem, 1rem + .28vw, 1.25rem);line-height:1.72;
  /* Do "tran" moi ben. Man hinh hep -> 0; man hinh rong -> toi da (56rem-43rem)/2. */
  --bleed:clamp(0rem, calc((100vw - 48px - var(--measure)) / 2), calc((var(--measure-wide) - var(--measure)) / 2));
}
/* Bang so sanh va the san pham ACMS rong hon cot chu: khong bi bop con 688px nua.
   Khoi block width:auto tu gian ra dung bang 2*bleed khi margin am. */
.entry>.table-scroll,
.entry>.acms-list,
.entry>.acms-products,
.entry>figure,
.entry>.wp-block-image{margin-inline:calc(-1 * var(--bleed))}
.entry>.acms-list{max-width:none}
.entry>h2{font-size:1.75rem;margin:2.5rem 0 .9rem;letter-spacing:-.025em}
.entry>h3{font-size:1.3rem;margin:2rem 0 .7rem;letter-spacing:-.018em}
.entry a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:rgba(0,0,0,.32)}
.entry a:hover{color:var(--accent);text-decoration-color:currentColor}
.entry ul,.entry ol{padding-left:1.35rem;margin:0 0 1.3rem}
.entry li{margin-bottom:.45rem}
.entry blockquote{
  margin:2rem 0;padding:0 0 0 1.5rem;border-left:3px solid var(--accent);
  font-family:var(--sans);font-weight:600;font-size:1.3rem;line-height:1.35;letter-spacing:-.02em;
}
.entry blockquote p:last-child{margin-bottom:0}
/* Dung margin-block, KHONG dung shorthand 'margin': shorthand se ghi de
   margin-inline am o rule tran phia tren (cung specificity, nam sau -> thang). */
.entry img{margin-block:1.75rem}
.entry figure{margin-block:2rem}
/* img la inline-replaced: 'margin:auto' theo chieu ngang tinh ra 0, anh khong bao gio
   canh giua duoc. Phai cho block thi auto moi an. */
.entry figure img,.entry>p>img{display:block;margin-inline:auto}
/* Link chi boc moi cai anh thi khong gach chan. */
.entry figure a{display:block;text-decoration:none}
.entry a:has(>img){text-decoration:none}
.entry figcaption{font-family:var(--sans);font-size:.8rem;color:var(--muted);
  text-align:center;margin-top:.7rem}
.entry table{width:100%;border-collapse:collapse;margin:2rem 0;font-family:var(--sans);font-size:.9375rem}
.entry table th,.entry table td{border-bottom:1px solid var(--rule);padding:.7rem .6rem;text-align:left;vertical-align:top}
.entry table th{font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:2px solid var(--ink);background:var(--paper)}
.entry table tr:hover td{background:var(--wash)}
.table-scroll{overflow-x:auto;margin-block:2rem;-webkit-overflow-scrolling:touch}
.entry>.table-scroll>table{min-width:34rem}
.table-scroll table{margin:0}
.entry>p:first-of-type::first-letter{
  float:left;font-family:var(--sans);font-weight:900;font-size:3.9rem;line-height:.82;
  padding:.06em .1em 0 0;color:var(--ink);
}

.author-box{display:grid;grid-template-columns:72px 1fr;gap:1.25rem;margin:3.5rem auto 0;
  padding:1.75rem 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:900;font-size:1.5rem}
.author-box h3{font-size:1.15rem}
.author-box p{font-size:.95rem;color:var(--muted);margin:.5rem 0 0;line-height:1.55}

/* ============================================================
   6. ARCHIVE / AUTHOR / 404
   ============================================================ */
.page-head{padding:3rem 0 1.75rem;border-bottom:2px solid var(--ink);margin-bottom:2.25rem}
.page-head h1{font-size:clamp(2.2rem,5.5vw,4rem);letter-spacing:-.04em;text-transform:uppercase}
.page-head p{max-width:min(100%, calc(var(--measure) * .72));color:var(--muted);margin:1rem 0 0;font-size:1.05rem}
.page-head .count{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:1rem}

.profile{display:grid;grid-template-columns:120px 1fr;gap:2rem;align-items:center;
  padding:3rem 0 2rem;border-bottom:2px solid var(--ink);margin-bottom:2.25rem}
.profile .avatar{width:120px;height:120px;font-size:2.5rem}
.profile h1{font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.035em}
.profile .role{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;display:block}
.profile p{margin:.85rem 0 0;color:var(--muted);max-width:min(100%, calc(var(--measure) * .8));font-size:1.05rem}

.err{padding:5rem 0;text-align:center}
.err .code{font-family:var(--sans);font-weight:900;font-size:clamp(6rem,22vw,14rem);line-height:.8;
  letter-spacing:-.06em;color:var(--ink)}
.err h1{font-size:clamp(1.5rem,4vw,2.5rem);margin:1.5rem 0 .75rem}
.err p{color:var(--muted);max-width:min(100%, 34rem);margin:0 auto 2rem}
.err .searchform{max-width:min(100%, 26rem);margin:0 auto}

/* pagination */
.pager{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:3rem 0;
  border-top:1px solid var(--rule);margin-top:2rem}
.pager .page-numbers{
  font-family:var(--sans);font-size:.875rem;font-weight:700;min-width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .8rem;
  border:1px solid var(--rule);text-decoration:none;
}
.pager .page-numbers:hover{border-color:var(--ink)}
.pager .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager .dots{border-color:transparent}

/* static pages */
.page-body{padding:2.5rem 0 4rem}
.page-body h2{font-size:1.6rem;margin:2.5rem 0 .8rem;letter-spacing:-.025em;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.page-body h3{font-size:1.2rem;margin:1.8rem 0 .6rem}
.page-body table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-family:var(--sans);font-size:.9375rem}
.page-body th,.page-body td{border-bottom:1px solid var(--rule);padding:.65rem .6rem;text-align:left}
.page-body th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.page-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.page-body a:hover{color:var(--accent)}
.page-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--wash);padding:.15em .4em}
.page-body blockquote{margin:2rem 0;padding:1.25rem 1.5rem;background:var(--wash);border-left:3px solid var(--accent)}
.page-body blockquote p:last-child{margin-bottom:0}

/* ============================================================
   7. FOOTER
   ============================================================ */
.newsletter{background:var(--ink);color:var(--paper);padding:3.5rem 0;margin-top:4rem}
.newsletter__inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.newsletter h2{font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.03em}
.newsletter p{color:#b9b9bd;margin:.9rem 0 0;font-size:1rem}
.newsletter .searchform{border-color:var(--paper)}
.newsletter .searchform input{color:var(--paper)}
.newsletter .searchform input::placeholder{color:#8a8a90}
.newsletter .searchform button{background:var(--paper);color:var(--ink)}

.site-foot{background:var(--ink);color:#b9b9bd;padding:3rem 0 2.5rem;font-family:var(--sans);font-size:.875rem}
.site-foot a{color:#e7e7ea;text-decoration:none}
.site-foot a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem;padding-bottom:2.5rem;
  border-bottom:1px solid #2b2b2e}
.foot__grid h4{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#7c7c84;margin-bottom:1rem}
.foot__grid ul{list-style:none;margin:0;padding:0}
.foot__grid li{margin-bottom:.55rem}
.foot__brand .wordmark{color:var(--paper);font-size:1.4rem}
.foot__brand p{color:#8a8a90;margin:1rem 0 0;font-size:.875rem;line-height:1.55;font-family:var(--sans)}
.foot__legal{padding-top:1.75rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.75rem;color:#7c7c84}
.foot__legal nav{display:flex;gap:1.25rem;flex-wrap:wrap}

/* ============================================================
   8. KHOI CUA PLUGIN ACMS
   ------------------------------------------------------------
   Plugin tu lo toan bo style cho the san pham. Van de: nhieu the ben trong
   the (img, a bao quanh anh) KHONG co class, nen cac rule typography chung
   cua bai (.entry img, .entry a, .entry ul...) an vao va pha vo can le.
   Cu the: plugin dat .acms-list__image 140x140 overflow:hidden nhung KHONG
   khai bao margin cho img ben trong -> '.entry img{margin:1.75rem auto}'
   thang, day anh san pham xuong 28px va bi cat mat.

   Cac reset duoi day chi tra ve mac dinh nhung gi plugin khong khai bao;
   style.css nap TRUOC frontend.css cua plugin nen khi trung do uu tien,
   plugin van thang -> khong de len thiet ke cua plugin.
   ============================================================ */
/* CHI cham cac the KHONG co class. The nao co class la plugin dang tu style no
   (.acms-btn, .acms-list__title...) -> khong dung toi, neu khong reset se de len
   chinh thiet ke cua plugin (vd '.entry [class*=acms-] a' co do uu tien (0,2,1),
   cao hon '.acms-btn' (0,1,0), se an mat mau nut Amazon). */
.entry [class*="acms-"] img:not([class]){margin:0}
.entry [class*="acms-"] a:not([class]){text-decoration:none;color:inherit}
.entry [class*="acms-"] :is(ul,ol):not([class]){padding-left:0;margin:0;list-style:none}
.entry [class*="acms-"] li:not([class]){margin:0}
.entry [class*="acms-"] p:not([class]){margin:0}
.entry [class*="acms-"] blockquote:not([class]){margin:0;padding:0;border:0;font:inherit}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .split{grid-template-columns:1fr;gap:2.5rem}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:860px){
  .lead{grid-template-columns:1fr;gap:1.25rem;padding:1.75rem 0}
  .lead__media{order:-1}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .newsletter__inner{grid-template-columns:1fr;gap:1.5rem}
  .profile{grid-template-columns:84px 1fr;gap:1.25rem}
  .profile .avatar{width:84px;height:84px;font-size:1.8rem}
}
@media(max-width:620px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .masthead__bar{height:56px}
  .wordmark{font-size:1.2rem}
  .btn-sub{display:none}
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .stack__item{grid-template-columns:1fr 104px;gap:.9rem}
  .entry{font-size:1.0625rem}
  .entry>p:first-of-type::first-letter{font-size:3.1rem}
  .author-box{grid-template-columns:56px 1fr}
  .avatar{width:56px;height:56px;font-size:1.2rem}
  .foot__grid{grid-template-columns:1fr}
  .article-head{padding-top:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .masthead,.catbar,.newsletter,.site-foot,.drawer{display:none}
  .entry{max-width:none}
}