/* Khabar Express — shared site styles (approved design) */

:root{
  --maroon:#7a1128;
  --maroon-dark:#5a0c1d;
  --gold:#c9972f;
  --ink:#1b1b1f;
  --paper:#faf7f2;
  --paper-panel:#ffffff;
  --line:#e6ddd0;
  --muted:#7a746a;
  --green:#2f6b3f;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
}

/* Utility bar */
.util-bar{background:var(--maroon-dark);color:#f1e6d8;font-size:12.5px;}
.util-bar .wrap{max-width:1180px;margin:0 auto;padding:6px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.util-bar a{color:#f1e6d8;text-decoration:none;opacity:.9;}
.util-bar a:hover{opacity:1;text-decoration:underline;}
.util-social a{margin-inline-start:12px;font-weight:600;}

/* Masthead */
.masthead{background:var(--paper-panel);border-bottom:3px solid var(--maroon);padding:22px 20px 14px;text-align:center;}
.masthead a.masthead-link{text-decoration:none;}
.masthead-title{font-family:'Noto Nastaliq Urdu',serif;font-size:52px;color:var(--maroon);margin:0;line-height:1.3;}
.masthead-sub{font-size:13.5px;color:var(--muted);letter-spacing:.4px;margin-top:4px;}
.masthead-sub strong{color:var(--ink);}

/* Nav */
.nav-wrap{background:var(--maroon);position:sticky;top:0;z-index:20;}
nav.main-nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap;}
nav.main-nav a{color:#fff;text-decoration:none;padding:13px 18px;font-size:14px;font-weight:600;letter-spacing:.3px;border-bottom:3px solid transparent;}
nav.main-nav a.active,nav.main-nav a:hover{border-bottom:3px solid var(--gold);background:rgba(255,255,255,.06);}

/* Edition switcher */
.edition-bar{background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;}
.edition-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.edition-label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-inline-end:6px;}
.edition-pill{padding:6px 16px;border-radius:20px;font-size:13.5px;font-weight:600;border:1px solid var(--line);color:var(--ink);background:#fff;cursor:pointer;text-decoration:none;display:inline-block;}
.edition-pill.active{background:var(--maroon);color:#fff;border-color:var(--maroon);}
.edition-pill.no-update{color:#b6afa2;border-style:dashed;}

.container{max-width:1180px;margin:0 auto;padding:22px 20px;}

/* Ad slots */
.ad-slot{background:repeating-linear-gradient(45deg,#f1ece3,#f1ece3 10px,#e9e2d4 10px,#e9e2d4 20px);border:1px dashed #c9bfa9;display:flex;align-items:center;justify-content:center;color:#9c9282;font-size:12.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border-radius:6px;overflow:hidden;}
.ad-slot img{width:100%;height:100%;object-fit:cover;}
.ad-banner{width:100%;height:90px;margin:18px 0;}
.ad-sidebar{width:100%;height:600px;}

/* Main grid */
/* align-items is left at its default (stretch) on purpose: the sidebar ads have a fixed
   standard height (600px), and stretching makes the e-paper panel in the middle match that
   height automatically — instead of hardcoding 600px here too, which would silently go stale
   the moment the sidebar ad size ever changes. */
.main-grid{display:grid;grid-template-columns:160px 1fr 160px;gap:20px;}
@media (max-width:900px){.main-grid{grid-template-columns:1fr;} .ad-sidebar{height:120px;}}

/* E-paper panel */
.epaper-panel{background:var(--paper-panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.epaper-head{background:var(--maroon);color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;}
.epaper-head h2{margin:0;font-size:16px;font-weight:700;}
.epaper-head .cityname{font-size:13px;background:rgba(255,255,255,.15);padding:3px 10px;border-radius:14px;}
/* flex:1 lets this fill whatever extra height stretching (above) adds, and align-items:center
   keeps the front-page thumbnail + buttons centered in that space rather than stuck at the top
   with empty room below. */
.epaper-body{padding:20px;display:flex;flex:1;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center;}
.epaper-thumb{width:300px;height:480px;border-radius:6px;background:linear-gradient(160deg,#fff,#f3ede0);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(90,12,29,.10);position:relative;overflow:hidden;}
.epaper-thumb img{width:100%;height:100%;object-fit:cover;}
.epaper-thumb .front-label{font-family:'Noto Nastaliq Urdu',serif;color:var(--maroon);font-size:22px;}
.epaper-thumb .sub-label{font-size:11px;color:var(--muted);margin-top:8px;}
.epaper-thumb .badge{position:absolute;top:10px;inset-inline-start:10px;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.4px;}
.epaper-empty{color:var(--muted);font-size:14px;padding:40px 20px;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;}
.epaper-cta{display:flex;flex-direction:column;gap:10px;justify-content:center;}
.btn{display:inline-block;text-align:center;padding:10px 22px;border-radius:6px;font-size:13.5px;font-weight:700;text-decoration:none;letter-spacing:.3px;border:none;cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--maroon);color:#fff;}
.btn-outline{border:1.5px solid var(--maroon);color:var(--maroon);background:#fff;}
.epaper-meta{font-size:12px;color:var(--muted);}

/* Section titles */
.section-title{display:flex;align-items:center;gap:10px;margin:34px 0 16px;}
.section-title h2{font-size:19px;margin:0;color:var(--ink);padding-inline-start:12px;border-inline-start:5px solid var(--maroon);}
.section-title .tag{font-size:11px;color:var(--muted);background:#f1ece3;padding:3px 9px;border-radius:12px;}

/* News cards */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.news-grid{grid-template-columns:1fr;}}
.news-card{background:var(--paper-panel);border:1px solid var(--line);border-radius:8px;padding:16px;direction:rtl;display:flex;flex-direction:column;}

/* Image sits in a fixed-height, edge-to-edge box at the top of the card (position:relative +
   the img being position:absolute;inset:0 guarantees the image fills it exactly, with no gaps
   from RTL/flex quirks — the old flex+align/justify approach could leave slack around images
   whose intrinsic size didn't match the box). The animation is a slow automatic "Ken Burns"
   zoom+pan loop (no hover needed) to make the cards feel a little alive; scale never drops
   below 1.1 so the pan never reveals an edge, and overflow:hidden on the box clips it cleanly. */
/* No explicit width here on purpose — width:100% was being computed against the card's
   content-box, which (with box-sizing:border-box and the card's 1px border) came out very
   slightly narrower than the space the negative margins actually opened up, leaving a sliver
   of background showing on one side. Leaving width unset lets the browser's normal block
   layout solve for the exact right width itself, which doesn't have that mismatch. */
.news-thumb{position:relative;height:190px;border-radius:8px 8px 0 0;margin:-16px -16px 12px;background:repeating-linear-gradient(45deg,#f1ece3,#f1ece3 10px,#e9e2d4 10px,#e9e2d4 20px);overflow:hidden;}
.news-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;animation:newsThumbKenBurns 18s ease-in-out infinite;}
@keyframes newsThumbKenBurns{
  0%{transform:scale(1.1) translate(0,0);}
  25%{transform:scale(1.28) translate(0,0);}
  50%{transform:scale(1.28) translate(-4%,0);}
  75%{transform:scale(1.28) translate(4%,0);}
  100%{transform:scale(1.1) translate(0,0);}
}
@media (prefers-reduced-motion:reduce){.news-thumb img{animation:none;}}

.news-card h3{font-family:'Noto Nastaliq Urdu',serif;font-size:19px;color:var(--ink);margin:0 0 8px;line-height:2.1;}
.news-card p{font-family:'Noto Naskh Arabic',serif;font-size:15px;color:#48453f;line-height:1.9;margin:0 0 10px;}
/* margin-top:auto pins this to the bottom of the card regardless of how long the headline/excerpt
   above it are — the grid already stretches every card in a row to the same height, so this lines
   up neatly across a row even when the news items are very different lengths. */
.news-meta{direction:ltr;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:auto;}
.news-meta .src{font-weight:400;color:#a8a196;}
.news-meta a{color:var(--maroon);text-decoration:none;font-weight:600;}
.news-meta a:hover{text-decoration:underline;}
.news-empty{color:var(--muted);font-size:13px;padding:20px;grid-column:1/-1;text-align:center;}

/* Generic page panels (Archive/Tariff/Gallery/Contacts/Admin) */
.page-title{font-size:24px;margin:0 0 18px;color:var(--maroon);}
.panel{background:var(--paper-panel);border:1px solid var(--line);border-radius:10px;padding:22px;margin-bottom:20px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink);}
.form-row select, .form-row input[type=text], .form-row input[type=date], .form-row input[type=password], .form-row input[type=file]{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;
}
table.data-table{width:100%;border-collapse:collapse;font-size:14px;}
table.data-table th, table.data-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;}

/* Disclaimer / Terms / Privacy — long-form text pages */
.legal-page{font-size:14.5px;line-height:1.85;color:#48453f;max-width:820px;}
.legal-page h3{font-size:16.5px;color:var(--maroon);margin:24px 0 8px;}
.legal-page h3:first-of-type{margin-top:6px;}
.legal-page p{margin:0 0 12px;}
.legal-page a{color:var(--maroon);}
table.data-table th{background:#f6f1e8;font-weight:700;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-grid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.gallery-grid img{width:100%;height:170px;object-fit:cover;display:block;}
.gallery-grid figcaption{padding:8px 10px;font-size:12.5px;color:var(--muted);}
.alert{padding:12px 16px;border-radius:6px;font-size:13.5px;margin-bottom:16px;}
.alert-error{background:#fbe4e6;color:#7a1128;border:1px solid #f0b8bd;}
.alert-success{background:#e7f4e9;color:#2f6b3f;border:1px solid #bfe3c6;}

/* Footer */
footer{background:var(--maroon-dark);color:#f1e6d8;margin-top:40px;}
.footer-inner{max-width:1180px;margin:0 auto;padding:30px 20px 18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--gold);margin:0 0 10px;}
.footer-col p, .footer-col a{font-size:13px;color:#e9ddc9;line-height:1.9;text-decoration:none;display:block;}
.footer-social a{display:inline-block;margin-inline-end:14px;font-size:13px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:12px;color:#cdbfa6;padding:14px 20px;}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:12px;padding:12px 20px 0;}
.footer-legal a{color:#cdbfa6;text-decoration:none;margin:0 10px;}
.footer-legal a:hover{text-decoration:underline;color:#f1e6d8;}