/*
Theme Name: Amlak
Description: Presentation for amlakqatar.qa. Site logic lives in the must-use plugin amlak-core; every choice (counts, labels, menu) in config.php. Colours, fonts and spacing are the tokens below.
Version: 0.1.0
Text Domain: amlak
*/

@font-face{font-family:'Noto Kufi Arabic';font-weight:400 700;font-display:swap;src:url(assets/fonts/kufi-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Noto Kufi Arabic';font-weight:400 700;font-display:swap;src:url(assets/fonts/kufi-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  /* colours: the old site's own */
  --gold:#b08f26; --gold-dark:#8a6f1a; --ink:#101010; --text:#434343; --muted:#777; --line:#e4e4e4;
  --paper:#fff; --tint:#faf7ef; --page:#f2f2f2; --band:rgba(176,143,38,.55); --dark:#212121; --black:#101010;
  --fb:#3b5998; --tw:#1da1f2;
  /* type */
  --font:'Noto Kufi Arabic','Droid Arabic Kufi',Tahoma,Arial,sans-serif;
  /* layout (keep --bp equal to the 900px media query below) */
  --wrap:1170px; --side:330px; --gap:30px; --read:760px; --radius:0; --head-h:96px;
  --hero-h:clamp(340px,32vw,470px); --cover-ratio:.83;   /* the covers are about 0.83 wide to tall */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 15px/1.8 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);line-height:1.55;font-family:var(--font)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.no-pic{display:block;width:100%;height:100%;background:var(--tint)}

/* ---- top bar */
.topbar{background:var(--black);color:#fff;font-size:12px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:32px}
.tb-start,.tb-end{display:flex;align-items:center;gap:16px}
.topbar a:hover{color:var(--gold)}
.tb-ic{display:grid;place-items:center;width:22px;height:22px;font:700 13px/1 Arial,sans-serif}
.tb-search{display:flex;background:#fff;height:22px}
.tb-search input{border:0;padding:0 8px;width:150px;font:inherit;font-size:12px;color:var(--ink);background:#fff;outline:0}
.tb-search button{border:0;background:#fff;color:var(--ink);padding:0 8px;cursor:pointer;font-size:14px}

/* ---- header and menu (sticky) */
.head{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 8px rgba(0,0,0,.08)}
.head .wrap{display:flex;align-items:center;gap:28px;min-height:var(--head-h)}
.logo img{height:calc(var(--head-h) - 20px);width:auto}
.menu{flex:1;display:flex;justify-content:flex-start}
.menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px clamp(10px,1.7vw,26px);flex-wrap:nowrap;white-space:nowrap}
.menu a,.menu .sub-toggle{font:700 clamp(12.5px,1.12vw,14px)/1 var(--font);color:var(--ink);background:none;border:0;padding:10px 0;cursor:pointer;display:block;border-bottom:2px solid transparent}
.menu a:hover,.menu .sub-toggle:hover{color:var(--gold)}
.menu .is-current>a{color:var(--gold);border-bottom-color:var(--gold)}
.has-sub{position:relative}
.menu .sub{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:190px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.14);border-top:2px solid var(--gold);padding:6px 0;z-index:60;flex-direction:column;gap:0}
.menu .sub li a{padding:9px 18px;font-weight:400;white-space:nowrap;border-bottom:0}
.menu .has-sub:hover>.sub,.menu .has-sub.open>.sub{display:flex}
.menu>ul>li:last-child>.sub{inset-inline-start:auto;inset-inline-end:auto;left:0;right:auto}   /* the last item is at the left edge: open inwards, not off the screen */
.burger{display:none;margin-inline-start:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.burger span{display:block;height:3px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ---- hero: the issue covers, each shown whole (never cropped), the title under it */
.hero{position:relative;background:var(--black)}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.hero-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:calc(var(--hero-h) * var(--cover-ratio));scroll-snap-align:start;display:flex;flex-direction:column;border-inline-end:1px solid rgba(255,255,255,.08)}
.slide .shot{display:block;height:var(--hero-h);background:var(--black);overflow:hidden}
.slide img{width:100%;height:100%;object-fit:contain;transition:transform .6s}
.slide:hover img{transform:scale(1.03)}
.cap{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;background:var(--black);color:#fff}
.slide-go{background:var(--gold);color:#fff;font-weight:700;font-size:12px;padding:5px 18px;letter-spacing:.3px}
.slide:hover .slide-go{background:var(--gold-dark)}
.slide-name{font-weight:700;font-size:14px}
.hero-arrow{position:absolute;z-index:3;top:calc(var(--hero-h) / 2);transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.5);cursor:pointer;padding:0}
/* the chevron is drawn, not typed: typed arrows are mirrored on a right-to-left page and would point the wrong way */
.hero-arrow::before{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;border:solid #fff;border-width:3px 3px 0 0}
.hero-arrow.prev{right:14px}    /* the start of the list is on the right: points right */
.hero-arrow.prev::before{transform:translate(-65%,-50%) rotate(45deg)}
.hero-arrow.next{left:14px}     /* the older issues are to the left: points left */
.hero-arrow.next::before{transform:translate(-35%,-50%) rotate(-135deg)}
.hero-arrow:hover{background:var(--gold)}

/* ---- two columns: stories, then the side column */
.two{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:var(--gap);padding-top:34px;padding-bottom:40px;align-items:start}
.sh{font-size:17px;font-weight:700;color:var(--ink);padding-bottom:6px;margin:30px 0 14px;border-bottom:1px solid var(--line);position:relative}
.sh::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:60px;height:3px;background:var(--gold)}
.lead{margin:0 0 var(--gap)}
.lead .pic{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.lead .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s}
.lead .pic:hover img{transform:scale(1.03)}
.lead .over{position:absolute;inset:auto 0 0;padding:70px 26px 22px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;text-align:center}
.lead h2{color:#fff;font-size:26px;font-weight:700}
.tab{display:inline-block;background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:2px 14px;margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);position:relative;transition:box-shadow .25s}
.card:hover{box-shadow:0 10px 28px rgba(0,0,0,.12)}
.card .pic{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tint)}
.card .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.card .tab{position:absolute;inset-inline-end:0;bottom:0;margin:0;padding:3px 16px}
.card .plus{position:absolute;inset-inline-start:14px;bottom:-1px;width:40px;height:40px;border-radius:50% 50% 0 0;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:24px;line-height:1}
.card .txt{padding:18px 18px 20px}
.card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.card h3 a:hover{color:var(--gold)}
.card .ex{margin:0;font-size:13.5px;color:var(--text);line-height:1.9}

/* ---- a signed column: the writer's portrait beside the lead, then a dated list */
.ceo{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.col-lead{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start;padding-bottom:26px;border-bottom:1px solid var(--line)}
.col-lead .who{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--tint);border-top:4px solid var(--gold)}
.col-lead .by{position:absolute;inset:auto 0 0;padding:6px 10px;background:rgba(16,16,16,.78);color:#fff;font-size:13px;font-weight:700;text-align:center}
.col-lead .date,.col-item .date{display:block;font-size:12px;color:var(--gold-dark);font-weight:700}
.col-lead h2{font-size:24px;margin:2px 0 8px}
.col-lead h2 a:hover,.col-item h3 a:hover{color:var(--gold)}
.col-lead .ex,.col-item .ex{margin:0 0 10px;font-size:14.5px;color:var(--text);line-height:2}
.col-lead .more{display:inline-block;background:var(--gold);color:#fff;font-size:12px;font-weight:700;padding:4px 18px}
.col-lead .more:hover{background:var(--gold-dark)}
.col-item{padding:18px 0;border-bottom:1px solid var(--line)}
.col-item h3{font-size:17px;margin:2px 0 4px}
.author-pic{float:right;width:170px;margin:0 0 12px 24px;border-top:3px solid var(--gold)}
.author-pic img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.author-pic figcaption{background:var(--black);color:#fff;font-size:12px;font-weight:700;text-align:center;padding:3px 6px}

/* ---- side column */
.side{display:flex;flex-direction:column;gap:12px}
.soc{display:flex;align-items:center;height:52px;color:#fff;font-weight:700;font-size:13px}
.soc.fb{background:var(--fb)}
.soc.tw{background:var(--tw)}
.soc .ic{width:58px;align-self:stretch;display:grid;place-items:center;background:rgba(0,0,0,.14);font:700 17px Arial,sans-serif}
.soc .lb{flex:1;padding:0 14px}
.soc .pl{width:26px;height:26px;border:2px solid #fff;border-radius:50%;margin-inline-end:14px;display:grid;place-items:center;font-size:17px;line-height:1}
.publisher{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);padding:6px 10px;font-weight:700;color:var(--ink)}
.publisher img{width:auto;max-height:84px}
.side .sh{margin-top:24px}
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.row .pic{flex:0 0 84px;aspect-ratio:4/3;background:var(--tint);overflow:hidden}
.row .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.row h4{font-size:13.5px;font-weight:400;line-height:1.8;color:var(--ink)}
.row h4 a:hover{color:var(--gold)}
.row .sec{font-size:11px;color:var(--gold);font-weight:700}
.side-cover{display:block;max-width:210px;margin:0 auto;text-align:center;font-weight:700}
.side-cover img{box-shadow:0 6px 18px rgba(0,0,0,.2);margin-bottom:8px}

/* ---- issues band (tan, as the old site) */
.band{background:var(--band);padding:50px 0 34px}
.issue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px var(--gap)}
.issue .cv{display:block;aspect-ratio:3/4;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:transform .3s}
.issue .cv:hover{transform:translateY(-4px)}
.issue .cv img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.issue h3{text-align:center;font-size:17px;font-weight:700;margin:14px 0 0}
.issue h3 a:hover{color:#fff}
.issue p{text-align:center;margin:0;font-size:12px;text-transform:uppercase;color:var(--ink)}
.issue p a{text-decoration:underline}
.band .all{text-align:center;margin:28px 0 0;font-weight:700}
.band .all a{background:var(--ink);color:#fff;padding:9px 28px}
.band-page{min-height:50vh}

/* ---- clients */
.clients{padding:40px 0 50px}
.clients .sh{text-align:center;border:0;margin-top:0}
.clients .sh::after{inset-inline:0;margin:0 auto}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 26px;margin-top:26px}
.logos span{flex:0 0 150px;height:84px;display:grid;place-items:center}
.logos img{max-width:100%;max-height:78px;width:auto;object-fit:contain}

/* ---- inner pages: banner */
.banner{background:var(--tint);border-bottom:1px solid var(--line);padding:24px 0 20px}
.banner h1{font-size:28px;font-weight:700}
.banner .note{margin:2px 0 0;color:var(--muted);font-size:13px}
.crumb{font-size:12px;color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.kick{display:inline-block;color:var(--gold-dark);font-size:12px;font-weight:700}
.pager{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pager .page-numbers{border:1px solid var(--line);padding:3px 14px;font-size:14px}
.pager .current,.pager a:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---- an article */
.read{min-width:0}
.hero-pic{margin:0 0 6px;background:var(--tint);text-align:center}
.hero-pic img{width:100%;height:auto;max-height:680px;object-fit:contain;margin:0 auto}   /* shown whole: an infographic must not be cropped to a banner */
.meta{margin:0 0 10px;font-size:13px;color:var(--muted)}
.text{max-width:var(--read);font-size:17px;line-height:2.05;color:var(--text)}
.text p{margin:0 0 1.1em}
.text h2,.text h3{margin:1.4em 0 .5em}
.text img{margin:1em auto}
.in-pic{margin:1.4em 0;text-align:center}
.in-pic img{margin:0 auto;max-height:620px;width:auto}
.in-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}
.in-row .in-pic{margin:0;flex:1 1 220px}
.share{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.share a{border:1px solid var(--line);padding:2px 14px}
.share a:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.more-from{margin-top:30px}
.ad{margin:16px 0;text-align:center}

/* ---- footer */
.foot{background:var(--dark);color:#d6d6d6;margin-top:0}
.foot .cols{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:40px;padding-top:46px;padding-bottom:36px}
.foot h5{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px;letter-spacing:.3px}
.foot .about p{font-size:13.5px;line-height:2;margin:14px 0 0}
.logo-box{display:inline-block;background:#fff;padding:6px 10px}
.foot .row{border-color:rgba(255,255,255,.12)}
.foot .row .pic{flex-basis:56px}
.foot .row h4,.foot .row h4 a{color:#fff}
.foot .row h4{font-size:13px}
.contact{list-style:none;margin:0;padding:0;font-size:14px;line-height:2.2}
.contact a:hover{color:var(--gold)}
.foot-copy{background:var(--black);color:#fff;text-align:center;padding:16px 0;font-size:13px}
.to-top{position:fixed;right:20px;bottom:20px;width:42px;height:42px;background:var(--gold);color:#fff;display:none;place-items:center;font-size:20px;z-index:40}
.to-top.show{display:grid}
.to-top:hover{background:var(--gold-dark)}

/* ---- phone: its own layout, not the desktop shrunk (keep 900px equal to the sticky/menu logic in site.js) */
@media (max-width:900px){
  :root{--head-h:64px;--hero-h:78vw;--gap:16px}
  .topbar .tel,.topbar .place,.tb-search{display:none}
  .topbar .wrap{min-height:30px}
  .head .wrap{gap:12px}
  .burger{display:block}
  .menu{display:none;position:absolute;inset:100% 0 auto;background:#fff;border-top:2px solid var(--gold);box-shadow:0 12px 24px rgba(0,0,0,.14);padding:6px 20px 14px}
  .head.open .menu{display:block}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;white-space:normal}
  .menu>ul>li:last-child>.sub{left:auto;right:auto}
  .menu a,.menu .sub-toggle{width:100%;text-align:start;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  .menu .sub{position:static;display:none;box-shadow:none;border:0;padding:0 14px}
  .menu .has-sub.open>.sub{display:flex}
  .menu .has-sub:hover>.sub{display:none}
  .menu .has-sub.open:hover>.sub{display:flex}
  .hero-arrow{display:none}
  .two{grid-template-columns:minmax(0,1fr);padding-top:20px}
  .lead h2{font-size:19px}
  .lead .over{padding:50px 16px 16px}
  .grid,.grid.three{grid-template-columns:minmax(0,1fr);gap:14px}
  .grid .card{display:grid;grid-template-columns:118px minmax(0,1fr)}   /* picture beside the headline */
  .grid .card .pic{aspect-ratio:auto;width:100%;height:100%;min-height:96px}   /* fills its 118px column; aspect-ratio would make it wider than the column and cover the headline */
  .grid .card .plus,.grid .card .ex,.grid .card .tab{display:none}
  .grid .card .txt{padding:12px 14px}
  .grid .card h3{font-size:14.5px;margin:0}
  .issue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .band{padding:34px 0 24px}
  .logos span{flex-basis:110px;height:64px}
  .col-lead{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .col-lead h2{font-size:18px}
  .col-lead .ex{display:none}
  .author-pic{width:96px;margin-left:14px}
  .banner h1{font-size:22px}
  .text{font-size:16px}
  .foot .cols{grid-template-columns:minmax(0,1fr);gap:24px}
  .to-top{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}