/*
Theme Name: IELTS King Gazette
Theme URI: https://bumibahasa.com
Author: Iswara B Raharja
Description: A light, newspaper-inspired blog theme for IELTS KING. Front-page headline carousel built from featured images, a classic broadsheet masthead, and comfortable long-form reading. No jQuery, no page builder, one tiny script.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ielts-king
Tags: blog, news, featured-images, custom-menu, custom-logo, two-columns, translation-ready
*/

/* ---------- Fonts: all self-hosted, Latin subsets, about 150 KB total. No Google requests. ---------- */
@font-face{font-family:"Playfair Display";src:url("assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fonts/PlayfairDisplay-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"UnifrakturMaguntia";src:url("assets/fonts/UnifrakturMaguntia.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DejaVu Serif";src:url("assets/fonts/DejaVuSerif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DejaVu Serif";src:url("assets/fonts/DejaVuSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DejaVu Serif";src:url("assets/fonts/DejaVuSerif-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#1F2A44;          /* navy: text, rules */
  --ink-soft:#4A5470;
  --gold:#C9A227;         /* bars, rules, accents */
  --gold-text:#7E6410;    /* gold dark enough for text on paper */
  --paper:#EEEBE3;        /* newsprint */
  --paper-deep:#E3DFD3;
  --callout:#FFF4CC;
  --white:#FFFFFF;
  --f-mast:"UnifrakturMaguntia","Old English Text MT",Georgia,serif;
  --f-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"DejaVu Serif",Georgia,Cambria,serif;
  --wrap:1240px;
  --gap:clamp(1rem,2.5vw,2rem);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.72;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--gold-text)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.08;margin:0 0 .5em;font-weight:900;letter-spacing:-.01em}
p{margin:0 0 1.15em}
.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:.5rem;left:.5rem;z-index:99;background:var(--ink);color:var(--white);padding:.6rem 1rem;clip:auto;width:auto;height:auto}

/* ---------- Top strip ---------- */
.topstrip{background:var(--ink);color:var(--paper);border-bottom:4px solid var(--gold);font-size:.8125rem}
.topstrip .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0}
.topstrip span:last-child{color:var(--gold)}

/* ---------- Masthead ---------- */
.masthead{padding:clamp(1.25rem,3vw,2.25rem) 0 0;text-align:center}
.masthead .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gap)}
.ear{font-size:.8125rem;line-height:1.45;border:1px solid var(--ink);padding:.55rem .7rem;max-width:13rem;font-style:italic}
.ear--left{justify-self:start;text-align:left}
.ear--right{justify-self:end;text-align:right}
.ear strong{display:block;font-family:var(--f-head);font-style:normal;font-size:1rem}
.site-title{font-family:var(--f-mast);font-weight:400;font-size:clamp(2.9rem,9vw,7rem);line-height:1;margin:0;letter-spacing:0}
.site-title a{text-decoration:none;color:var(--ink)}
.custom-logo{max-height:110px;width:auto;margin-inline:auto}
.dateline{margin-top:1.1rem;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);font-size:.875rem}
.dateline .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-style:italic}
.dateline .wrap > *{flex:1}
.dateline .wrap > :nth-child(2){text-align:center;font-style:normal;font-family:var(--f-head);font-weight:700}
.dateline .wrap > :last-child{text-align:right}

/* ---------- Navigation ---------- */
.primary-nav{border-bottom:1px solid var(--ink)}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.primary-nav li{position:relative}
.primary-nav a{display:block;padding:.65rem 1rem;font-family:var(--f-head);font-weight:700;font-size:1rem;text-decoration:none}
.primary-nav a:hover,.primary-nav .current-menu-item > a{background:var(--ink);color:var(--paper)}
.primary-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:13rem;background:var(--paper);border:1px solid var(--ink);z-index:20;flex-direction:column}
.primary-nav li:hover > .sub-menu,.primary-nav li:focus-within > .sub-menu{display:flex}
.nav-toggle{display:none}

/* ---------- Headline carousel (the front page) ---------- */
.frontpage{padding:clamp(1.5rem,3vw,2.5rem) 0 0}
.carousel{position:relative;border-bottom:3px double var(--ink);padding-bottom:1.25rem}
.carousel__viewport{overflow:hidden}
.carousel__track{display:flex;transition:transform .7s cubic-bezier(.65,.05,.25,1)}
.slide{transition:visibility 0s;flex:0 0 100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:start}
.slide[aria-hidden="true"]{visibility:hidden;transition:visibility 0s .7s}
.slide__figure{margin:0;border:1px solid var(--ink);padding:6px;background:var(--paper)}
.slide__figure figcaption{font-size:.8125rem;font-style:italic;padding:.5rem .15rem 0;line-height:1.45;color:var(--ink-soft)}
.slide__text{border-left:1px solid var(--ink);padding-left:var(--gap)}
.kicker{display:inline-block;font-family:var(--f-head);font-style:italic;font-weight:400;font-size:1.05rem;color:var(--gold-text);text-decoration:none;border-bottom:2px solid var(--gold);margin-bottom:.8rem}
.slide__title{font-size:clamp(2.1rem,4.6vw,4rem);line-height:.98;margin-bottom:.9rem}
.slide__title a{text-decoration:none}
.slide__title a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold)}
.deck{font-family:var(--f-head);font-style:italic;font-weight:400;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.4;border-top:1px solid var(--ink);padding-top:.8rem;margin-bottom:1rem}
.byline{font-size:.875rem;line-height:1.5;margin-bottom:1.1rem}
.byline b{font-family:var(--f-head)}
.continued{font-style:italic;font-size:.9375rem}

/* Old-print photo: halftone, monochrome, colour returns on hover */
.newsphoto{position:relative;display:block;overflow:hidden;background:var(--ink)}
.newsphoto img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) sepia(.2) contrast(1.18) brightness(.98);transition:filter .6s ease}
.newsphoto::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(31,42,68,.55) 30%,transparent 32%);background-size:4px 4px;mix-blend-mode:multiply;opacity:.35;transition:opacity .6s ease}
a:hover > .newsphoto img,.newsphoto:hover img{filter:none}
a:hover > .newsphoto::after,.newsphoto:hover::after{opacity:0}

.carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;border-top:1px solid var(--ink);padding-top:.7rem}
.carousel__pages{display:flex;gap:.25rem;align-items:center;font-style:italic;font-size:.875rem}
.carousel__pages button{font-family:var(--f-head);font-style:normal;font-weight:700;font-size:.95rem;width:2rem;height:2rem;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer}
.carousel__pages button[aria-current="true"]{background:var(--ink);color:var(--paper)}
.carousel__pages button:hover{border-color:var(--ink)}
.carousel__arrows{display:flex;gap:.5rem}
.carousel__arrows button{font-family:var(--f-head);font-weight:700;font-size:.95rem;padding:.4rem .9rem;background:var(--paper);color:var(--ink);border:1px solid var(--ink);cursor:pointer}
.carousel__arrows button:hover{background:var(--gold);border-color:var(--gold)}

/* ---------- Section heading ---------- */
.section-head{display:flex;align-items:baseline;gap:1rem;margin:clamp(2rem,4vw,3rem) 0 1.25rem}
.section-head h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0;white-space:nowrap}
.section-head::after{content:"";flex:1;border-top:4px solid var(--gold);transform:translateY(-.35em)}

/* ---------- News columns ---------- */
.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(2*var(--gap));border-top:1px solid var(--ink)}
.story{position:relative;padding:1.25rem 0 1.5rem;border-bottom:1px solid var(--ink)}
.story:not(:nth-child(3n))::after{content:"";position:absolute;top:0;bottom:-1px;right:calc(-1*var(--gap));border-right:1px solid var(--ink)}
.story .newsphoto{margin-bottom:.9rem}
.story h3{font-size:1.45rem;line-height:1.12;margin-bottom:.45rem}
.story h3 a,.lead h3 a{text-decoration:none}
.story h3 a:hover,.lead h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.story p{font-size:.9375rem;line-height:1.6;margin-bottom:.6rem}
.story .byline{margin:0;font-style:italic;color:var(--ink-soft)}
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);border-top:1px solid var(--ink);padding:1.25rem 0 1.5rem}
.lead h3{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.04}
.lead .newsphoto{margin:0}
.lead p{font-size:1rem}
.lead + .columns{border-top:3px double var(--ink)}

/* ---------- Single & page ---------- */
.article{max-width:46rem;margin:clamp(2rem,4vw,3.25rem) auto 0}
.article__head{text-align:center;border-bottom:1px solid var(--ink);padding-bottom:1.25rem;margin-bottom:1.75rem}
.article__title{font-size:clamp(2.3rem,5.5vw,4.25rem);line-height:1}
.article__head .deck{border:0;padding:0;max-width:38rem;margin:0 auto 1rem}
.article__wide{max-width:64rem;margin:0 auto 2rem}
.article__wide figure{margin:0;border:1px solid var(--ink);padding:6px}
.article__wide figcaption{font-size:.8125rem;font-style:italic;padding-top:.5rem;color:var(--ink-soft)}
.article__wide img{width:100%}
.entry{max-width:40rem;margin:0 auto}
.entry > p:first-of-type::first-letter{float:left;font-family:var(--f-head);font-weight:900;font-size:4.6em;line-height:.82;margin:.06em .1em 0 0;color:var(--ink);border-bottom:4px solid var(--gold);padding-bottom:.04em}
.entry h2{font-size:1.9rem;margin-top:1.8em}
.entry h3{font-size:1.45rem;margin-top:1.6em}
.entry ul,.entry ol{padding-left:1.4em}
.entry li{margin-bottom:.35em}
.entry blockquote,.entry .wp-block-quote{margin:1.6em 0;padding:1rem 1.25rem;background:var(--callout);border-left:6px solid var(--gold);font-style:italic}
.entry blockquote p:last-child{margin:0}
.entry .wp-block-pullquote{border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);font-family:var(--f-head);font-size:1.5rem;text-align:center;padding:1.2em 0}
.entry figure{margin:1.8em 0}
.entry figcaption{font-size:.8125rem;font-style:italic;color:var(--ink-soft);text-align:left}
.entry table{border-collapse:collapse;width:100%;font-size:.9375rem}
.entry th,.entry td{border:1px solid var(--ink);padding:.5rem .65rem;text-align:left}
.entry th{background:var(--ink);color:var(--paper);font-family:var(--f-head)}
.entry pre,.entry code{font-family:var(--f-body);background:var(--paper-deep);font-size:.9em}
.entry pre{padding:1rem;overflow-x:auto}
.entry hr{border:0;border-top:3px double var(--ink);margin:2.5em 0}
.alignwide{max-width:64rem;margin-inline:auto}
.alignleft{float:left;margin:.3em 1.5em 1em 0}
.alignright{float:right;margin:.3em 0 1em 1.5em}
.aligncenter{margin-inline:auto}
.tags{max-width:40rem;margin:2rem auto 0;border-top:1px solid var(--ink);padding-top:.8rem;font-size:.875rem;font-style:italic}
.tags a{font-style:normal;margin-right:.6rem}

.post-nav{max-width:46rem;margin:2.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.post-nav a{display:block;padding:1rem 0;text-decoration:none;font-family:var(--f-head);font-weight:700;font-size:1.15rem;line-height:1.25}
.post-nav span{display:block;font-family:var(--f-body);font-weight:400;font-style:italic;font-size:.8125rem;color:var(--ink-soft)}
.post-nav .next{text-align:right;border-left:1px solid var(--ink);padding-left:1rem}
.post-nav .prev{padding-right:1rem}

/* ---------- Archive / search ---------- */
.archive-head{margin-top:clamp(2rem,4vw,3rem);text-align:center;border-bottom:3px double var(--ink);padding-bottom:1rem}
.archive-head h1{font-size:clamp(2rem,4.5vw,3.4rem);margin:0}
.archive-head p{font-style:italic;margin:.4rem 0 0}
.pagination{display:flex;justify-content:center;gap:.25rem;margin:2.5rem 0 0;font-family:var(--f-head);font-weight:700}
.pagination .page-numbers{padding:.4rem .8rem;border:1px solid var(--ink);text-decoration:none}
.pagination .current{background:var(--ink);color:var(--paper)}
.empty{text-align:center;max-width:36rem;margin:3rem auto}
.search-form{display:flex;gap:.5rem;max-width:30rem;margin:1rem auto}
.search-form input[type=search]{flex:1;font:inherit;padding:.55rem .75rem;border:1px solid var(--ink);background:var(--white);color:var(--ink)}
.search-form button,.comment-form .submit{font-family:var(--f-head);font-weight:700;font-size:1rem;padding:.55rem 1.1rem;background:var(--ink);color:var(--paper);border:0;cursor:pointer}
.search-form button:hover,.comment-form .submit:hover{background:var(--gold);color:var(--ink)}

/* ---------- Comments ---------- */
.comments{max-width:40rem;margin:3rem auto 0}
.comments h2{font-size:1.6rem;border-bottom:1px solid var(--ink);padding-bottom:.5rem}
.comment-list{list-style:none;padding:0}
.comment-list .children{list-style:none;padding-left:1.5rem;border-left:2px solid var(--gold)}
.comment-body{padding:1rem 0;border-bottom:1px solid var(--paper-deep)}
.comment-meta{font-size:.8125rem;font-style:italic}
.comment-author{font-style:normal;font-family:var(--f-head);font-weight:700;font-size:1rem}
.comment-author img{display:inline-block;vertical-align:middle;margin-right:.5rem}
.comment-form label{display:block;font-size:.875rem;font-style:italic}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%;font:inherit;padding:.55rem .75rem;border:1px solid var(--ink);background:var(--white);color:var(--ink)}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(3rem,6vw,5rem);background:var(--ink);color:var(--paper);border-top:6px solid var(--gold)}
.site-footer a{color:var(--paper)}
.site-footer a:hover{color:var(--gold)}
.footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--gap);padding:2.25rem 0 1rem}
.footer-widgets h2{font-size:1.2rem;color:var(--gold)}
.footer-mast{font-family:var(--f-mast);font-size:2.4rem;line-height:1;margin:0}
.footer-bottom{border-top:1px solid rgba(238,235,227,.25)}
.footer-bottom .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.9rem 0;font-size:.8125rem}
.footer-bottom ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .slide{grid-template-columns:1fr}
  .slide__text{border-left:0;padding-left:0}
  .columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story:not(:nth-child(3n))::after{content:none}
  .story:nth-child(odd)::after{content:"";position:absolute;top:0;bottom:-1px;right:calc(-1*var(--gap));border-right:1px solid var(--ink)}
}
@media (max-width:720px){
  .masthead .wrap{grid-template-columns:1fr}
  .ear{display:none}
  .dateline .wrap > :first-child,.dateline .wrap > :last-child{display:none}
  .nav-toggle{display:block;margin:0 auto;font-family:var(--f-head);font-weight:700;font-size:1rem;background:none;border:0;color:var(--ink);padding:.65rem 1rem;cursor:pointer}
  .primary-nav ul{display:none;flex-direction:column;text-align:center}
  .primary-nav.is-open ul{display:flex}
  .primary-nav .sub-menu{position:static;display:flex;border:0}
  .columns,.lead{grid-template-columns:1fr}
  .story::after{content:none!important}
  .carousel__pages span{display:none}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{border-left:0;border-top:1px solid var(--ink);padding-left:0}
  .topstrip .wrap{font-size:.75rem}
  .topstrip span:first-child{display:none}
  .topstrip .wrap{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}