/* ===========================================================
   Capital Media Papers

   Selectors here are deliberately written as .cmp-block
   element.class, one step more specific than a page builder's
   global button styles, which are usually .kit-N button. That
   is what keeps a theme's button rules off these controls
   without a single !important.
   =========================================================== */

.cmp-block{
  --cmp-paper:#ffffff;
  --cmp-surface:#f3f1ec;
  --cmp-surface-2:#e9e6df;
  --cmp-ink:#15171c;
  --cmp-ink-2:#565b66;
  --cmp-ink-3:#8b909b;
  --cmp-rule:#dcd7ce;
  --cmp-rule-strong:#c3bcb0;
  --cmp-accent:#05783d;
  --cmp-radius:0;
  --cmp-shade:0 1px 2px rgba(20,22,28,.07), 0 12px 28px -18px rgba(20,22,28,.45);
  color:var(--cmp-ink);
  font-size:16px;
  line-height:1.5;
}

@media (prefers-color-scheme:dark){
  .cmp-block{
    --cmp-paper:#14161b;
    --cmp-surface:#0d0f13;
    --cmp-surface-2:#1c1f26;
    --cmp-ink:#eceae5;
    --cmp-ink-2:#a3a8b3;
    --cmp-ink-3:#767c88;
    --cmp-rule:#282c34;
    --cmp-rule-strong:#3a3f49;
    --cmp-shade:0 1px 2px rgba(0,0,0,.5), 0 18px 34px -20px rgba(0,0,0,.85);
  }
}

.cmp-block *,
.cmp-block *::before,
.cmp-block *::after{box-sizing:border-box}

.cmp-block img{max-width:100%; height:auto; display:block}

/* Undo whatever the theme does to buttons inside our blocks. */
.cmp-block button,
.cmp-lb button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  font-family:inherit;
  font-weight:600;
  letter-spacing:normal;
  text-transform:none;
  text-shadow:none;
  box-shadow:none;
  min-height:0;
  width:auto;
}

.cmp-h{
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  margin:0 0 12px; color:var(--cmp-ink);
}

.cmp-card{
  background:var(--cmp-paper);
  border:1px solid var(--cmp-rule);
  padding:18px 20px;
}

.cmp-notice{
  border:1px dashed var(--cmp-rule-strong);
  padding:14px 16px; font-size:14px; color:var(--cmp-ink-2);
  background:var(--cmp-surface);
}

.cmp-urdu{
  font-family:"Noto Nastaliq Urdu", serif;
  direction:rtl; line-height:2.1; display:block;
  margin:2px 0 6px; font-size:17px;
}

.cmp-i{width:16px; height:16px; flex:none; display:block}

/* ---------- buttons ---------- */

.cmp-block button.cmp-btn.cmp-btn,
.cmp-block a.cmp-btn.cmp-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--cmp-paper);
  background-image:none;
  border:1px solid var(--cmp-rule);
  border-radius:var(--cmp-radius);
  padding:8px 13px;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:var(--cmp-ink-2);
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.cmp-block button.cmp-btn.cmp-btn:hover:not(:disabled),
.cmp-block button.cmp-btn.cmp-btn:focus,
.cmp-block a.cmp-btn.cmp-btn:hover{
  border-color:var(--cmp-rule-strong);
  color:var(--cmp-ink);
  background:var(--cmp-paper);
}
.cmp-block button.cmp-btn.cmp-btn:disabled{opacity:.35; cursor:not-allowed}

.cmp-block button.cmp-btn-solid.cmp-btn-solid,
.cmp-block a.cmp-btn-solid.cmp-btn-solid{
  background:var(--cmp-accent);
  background-image:none;
  border-color:var(--cmp-accent);
  color:#fff;
}
.cmp-block button.cmp-btn-solid.cmp-btn-solid:hover:not(:disabled),
.cmp-block button.cmp-btn-solid.cmp-btn-solid:focus,
.cmp-block a.cmp-btn-solid.cmp-btn-solid:hover{
  background:var(--cmp-accent);
  border-color:var(--cmp-accent);
  color:#fff;
  filter:brightness(1.1);
}

.cmp-block :focus-visible{outline:2px solid var(--cmp-accent); outline-offset:3px; border-radius:var(--cmp-radius)}

/* ---------- calendar ---------- */

.cmp-cal{
  background:var(--cmp-paper);
  border:1px solid var(--cmp-rule);
  padding:16px;
}
.cmp-calhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:13px}
.cmp-calhead b{font-size:14.5px; font-weight:700}
.cmp-calnav{display:flex; gap:4px}

.cmp-block .cmp-cal .cmp-calnav button{
  background:var(--cmp-paper);
  background-image:none;
  border:1px solid var(--cmp-rule);
  border-radius:var(--cmp-radius);
  width:28px; height:28px;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--cmp-ink-2);
  font-size:15px; line-height:1;
}
.cmp-block .cmp-cal .cmp-calnav button:hover,
.cmp-block .cmp-cal .cmp-calnav button:focus{
  border-color:var(--cmp-accent);
  color:var(--cmp-accent);
  background:var(--cmp-paper);
}

.cmp-dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
  font-size:12px; font-weight:700; color:var(--cmp-ink-3);
  text-align:center; margin-bottom:8px;
}
.cmp-cgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}

/*
 * Every date reads in the ink colour. Days with no paper are the same colour
 * held back, rather than a different grey, so the grid stays one family and
 * still shows at a glance which days have something on them.
 */
.cmp-block .cmp-day.cmp-day{
  aspect-ratio:1;
  border:1px solid transparent;
  border-radius:var(--cmp-radius);
  background:none;
  background-image:none;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
  color:var(--cmp-ink);
  opacity:.4;
  text-decoration:none; position:relative; padding:0;
}
.cmp-block a.cmp-day.cmp-day.is-on{
  color:var(--cmp-ink);
  opacity:1;
  border-color:var(--cmp-rule);
  background:var(--cmp-paper);
  font-weight:700;
  cursor:pointer;
}
.cmp-block a.cmp-day.cmp-day.is-on::after{
  content:""; position:absolute; bottom:5px;
  width:5px; height:5px; background:var(--cmp-accent);
}
.cmp-block a.cmp-day.cmp-day.is-on:hover{
  border-color:var(--cmp-accent);
  color:var(--cmp-accent);
}
.cmp-block a.cmp-day.cmp-day.is-sel,
.cmp-block a.cmp-day.cmp-day.is-sel:hover,
.cmp-block a.cmp-day.cmp-day.is-sel:focus{
  background:var(--cmp-accent);
  border-color:var(--cmp-accent);
  color:#fff;
  opacity:1;
}
.cmp-block a.cmp-day.cmp-day.is-sel::after{background:#fff}
.cmp-block .cmp-day.cmp-day.is-today{box-shadow:inset 0 0 0 1px var(--cmp-ink-3)}

/* ---------- recent papers ---------- */

.cmp-issues{list-style:none; margin:0; padding:0}
.cmp-issues li + li{border-top:1px solid var(--cmp-rule)}
.cmp-issues a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; text-decoration:none; color:var(--cmp-ink);
}
.cmp-issues a:hover .cmp-issue-date{color:var(--cmp-accent)}
.cmp-issue-date{font-size:14.5px; font-weight:700}
.cmp-issue-dow{font-size:12px; color:var(--cmp-ink-3); font-weight:600}
.cmp-empty-line{margin:0; padding:9px 0; font-size:13px; color:var(--cmp-ink-3)}

.cmp-recent .cmp-h{
  padding-bottom:12px; margin-bottom:0;
  border-bottom:1px solid var(--cmp-rule-strong);
}

/* ---------- advertising ---------- */

.cmp-advert-body{margin:0 0 16px; font-size:14.5px; color:var(--cmp-ink-2); line-height:1.6}
.cmp-block .cmp-advert a.cmp-btn-solid{padding:11px 18px; font-size:14px}

/* ---------- reader ---------- */

.cmp-reader{
  background:var(--cmp-paper);
  border:1px solid var(--cmp-rule);
  box-shadow:var(--cmp-shade);
}
.cmp-vbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--cmp-rule);
}

.cmp-vdate{display:flex; align-items:center; gap:8px; min-width:0}
.cmp-vdate-text{min-width:0}
.cmp-headline{
  font-size:12px; font-weight:700; color:var(--cmp-accent);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
}
.cmp-vbar .cmp-issue{font-weight:700; font-size:15px; letter-spacing:-.015em}
.cmp-vbar .cmp-sub{font-size:12.5px; color:var(--cmp-ink-3); font-weight:500}

.cmp-block .cmp-step.cmp-step{
  width:30px; height:30px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cmp-rule); border-radius:var(--cmp-radius);
  color:var(--cmp-ink-2); text-decoration:none;
  background:var(--cmp-paper); background-image:none;
}
.cmp-block a.cmp-step.cmp-step:hover{border-color:var(--cmp-accent); color:var(--cmp-accent)}
.cmp-block .cmp-step.is-off{opacity:.28}

.cmp-vtools{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.cmp-block .cmp-btn-icon .cmp-i{opacity:.75}
.cmp-block .cmp-btn-solid .cmp-i{opacity:1}

.cmp-vbody{display:grid; grid-template-columns:96px 1fr}
.cmp-vbody.no-rail{grid-template-columns:1fr}

.cmp-rail{
  border-right:1px solid var(--cmp-rule);
  padding:14px 12px; display:flex; flex-direction:column; gap:10px;
  background:var(--cmp-surface);
}
.cmp-block .cmp-rail button.cmp-thumb.cmp-thumb,
.cmp-block .cmp-rail button.cmp-thumb.cmp-thumb:hover,
.cmp-block .cmp-rail button.cmp-thumb.cmp-thumb:focus,
.cmp-block .cmp-rail button.cmp-thumb.cmp-thumb:active{
  background:transparent;
  background-image:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  color:inherit;
  cursor:pointer;
  text-align:center;
  display:block;
  width:100%;
}
.cmp-rail img{
  width:100%; min-width:64px;
  border:1px solid var(--cmp-rule-strong); background:#fff;
}
.cmp-block .cmp-rail button.cmp-thumb:hover img{border-color:var(--cmp-accent)}
.cmp-block .cmp-rail button.cmp-thumb[aria-current="true"] img{
  outline:2px solid var(--cmp-accent); outline-offset:1px;
  border-color:var(--cmp-accent);
}
.cmp-rail small{display:block; font-size:11px; color:var(--cmp-ink-3); margin-top:4px; font-weight:600}

.cmp-sheet{padding:20px; background:var(--cmp-surface-2); display:grid; place-items:start center}
.cmp-sheet img{
  width:100%; max-width:780px; background:#fff;
  border:1px solid var(--cmp-rule-strong); box-shadow:var(--cmp-shade);
  cursor:zoom-in; grid-area:1/1;
}
.cmp-sheet .cmp-page{display:none}
.cmp-sheet .cmp-page.is-on{display:block}

.cmp-empty{padding:58px 26px; text-align:center; background:var(--cmp-surface-2)}
.cmp-empty h3{font-size:19px; margin:0 0 9px}
.cmp-empty p{margin:0 auto; max-width:46ch; font-size:14.5px; color:var(--cmp-ink-2)}

@media (max-width:820px){
  .cmp-vtools{margin-left:0; width:100%}
  .cmp-block .cmp-btn-icon span{display:none}
  .cmp-block .cmp-btn-icon{padding:9px 11px}
}

@media (max-width:700px){
  .cmp-vbody{grid-template-columns:1fr}
  .cmp-rail{
    flex-direction:row; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--cmp-rule);
  }
  .cmp-block .cmp-rail button.cmp-thumb{flex:0 0 62px; width:62px}
  .cmp-sheet{padding:12px}
}

/* ---------- newspaper cards ---------- */

.cmp-titles{display:grid; gap:18px; grid-template-columns:repeat(3, minmax(0,1fr))}
.cmp-cols-1{grid-template-columns:1fr}
.cmp-cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.cmp-cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}

.cmp-papercard{
  display:block; text-decoration:none; color:inherit;
  background:var(--cmp-paper); border:1px solid var(--cmp-rule);
  padding:0 0 20px; overflow:hidden;
}
.cmp-papercard:hover{border-color:var(--cmp-rule-strong); box-shadow:var(--cmp-shade)}
.cmp-title-mark{display:block; height:5px; background:var(--cmp-accent)}
.cmp-papercard-img img{width:100%; height:auto; display:block}
.cmp-papercard-body{display:block; padding:18px 20px 0}
.cmp-title-name{display:block; font-size:19px; font-weight:800; letter-spacing:-.02em}
.cmp-title-blurb{display:block; font-size:14px; color:var(--cmp-ink-2); line-height:1.55; margin-top:8px}
.cmp-title-meta{display:block; margin-top:14px; font-size:12px; font-weight:700; color:var(--cmp-accent)}
.cmp-papercard.is-soon{opacity:.82}
.cmp-papercard.is-soon .cmp-title-meta{color:var(--cmp-ink-3)}

@media (max-width:860px){
  .cmp-titles{grid-template-columns:1fr !important}
}

/* ---------- lightbox ---------- */

.cmp-lb{
  position:fixed; inset:0; z-index:99999;
  background:rgba(10,12,16,.95);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:64px 16px 56px;
}
.cmp-lb[hidden]{display:none}

.cmp-lb-stage{
  grid-column:2;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
}
.cmp-lb-stage img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  background:#fff; cursor:zoom-out;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.9);
}

.cmp-lb button.cmp-lb-nav.cmp-lb-nav,
.cmp-lb button.cmp-lb-close.cmp-lb-close{
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  color:#fff;
  border-radius:0;
  cursor:pointer;
  padding:0;
  backdrop-filter:blur(6px);
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.cmp-lb button.cmp-lb-nav.cmp-lb-nav{width:52px; height:52px}
.cmp-lb button.cmp-lb-nav .cmp-i{width:24px; height:24px}
.cmp-lb button.cmp-lb-nav.cmp-lb-nav:hover,
.cmp-lb button.cmp-lb-nav.cmp-lb-nav:focus,
.cmp-lb button.cmp-lb-close.cmp-lb-close:hover,
.cmp-lb button.cmp-lb-close.cmp-lb-close:focus{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
}
.cmp-lb button.cmp-lb-nav.cmp-lb-nav:disabled{opacity:.2; cursor:default}

/* The display rules above are specific enough to beat [hidden], so say it. */
.cmp-lb button.cmp-lb-nav[hidden],
.cmp-lb .cmp-lb-count[hidden]{display:none}
.cmp-lb-prev{grid-column:1}
.cmp-lb-next{grid-column:3}

.cmp-lb button.cmp-lb-close.cmp-lb-close{
  position:fixed; top:14px; right:16px;
  width:44px; height:44px;
}
.cmp-lb button.cmp-lb-close .cmp-i{width:20px; height:20px}

.cmp-lb-count{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  color:rgba(255,255,255,.85);
  font-size:13px; font-weight:600; letter-spacing:.02em;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  padding:6px 14px; border-radius:0;
  backdrop-filter:blur(6px);
}

@media (max-width:700px){
  .cmp-lb{padding:60px 8px 56px; gap:4px}
  .cmp-lb button.cmp-lb-nav{width:40px; height:40px}
  .cmp-lb button.cmp-lb-nav .cmp-i{width:18px; height:18px}
}

@media (prefers-reduced-motion:reduce){
  .cmp-block *,
  .cmp-lb *{transition:none !important}
}