/* V16.0.2 — Frontend Design Refresh
   Presentation-only layer. Keeps existing PHP, database, URLs and interactions intact.
   Goals: calmer editorial hierarchy, stable widths, no nav overflow, predictable responsive layout. */
:root{
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-border:#e5eaf1;
  --ui-border-strong:#d8e0eb;
  --ui-text:#172033;
  --ui-muted:#667085;
  --ui-accent:var(--hf-nav-hover,#2455b8);
  --ui-accent-soft:#edf3ff;
  --ui-radius:18px;
  --ui-shadow:0 8px 26px rgba(15,23,42,.07);
  --ui-shadow-hover:0 14px 34px rgba(15,23,42,.11);
}

html{overflow-x:hidden}
body{overflow-x:hidden;background:#f6f8fb;color:var(--ui-text)}
body:has(.mag-home-v6){background:#f4f7fb}
.wrap{width:min(1180px,calc(100% - 40px));}

/* Header: compact, centered and width-safe. */
.top{background:rgba(255,255,255,.96)!important;box-shadow:0 1px 0 rgba(15,23,42,.06),0 8px 26px rgba(15,23,42,.045)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand{width:min(1180px,calc(100% - 40px));min-width:0;gap:28px}
.brand>a{min-width:0;flex:1 1 auto}
.brand>a>span:last-child{min-width:0}
.brand b{font-size:18px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand form{flex:0 1 340px;max-width:340px;min-width:180px}
.brand input{height:40px;background:#f8fafc;border-color:var(--ui-border);outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.brand input:focus{background:#fff;border-color:#9bb6e8;box-shadow:0 0 0 4px rgba(36,85,184,.09)}
.brand button{height:40px;background:var(--ui-accent-soft);color:var(--ui-accent);cursor:pointer}

nav{border-top:1px solid rgba(15,23,42,.055)!important;background:rgba(255,255,255,.98)!important}
.navinner{width:min(1180px,calc(100% - 40px));min-width:0;gap:12px}
.links{min-width:0;flex:1 1 auto;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.links::-webkit-scrollbar{display:none}
.links a{padding:12px 11px!important;color:var(--hf-nav-text,#344054)!important;font-size:13px;font-weight:750;line-height:1.1;position:relative}
.links a:after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:99px;background:var(--hf-nav-hover,#2455b8);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.links a:hover:after,.links a:focus-visible:after{transform:scaleX(1)}
.login{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:11px;background:var(--ui-accent);color:#fff!important;font-size:12px;font-weight:800;box-shadow:0 6px 14px rgba(36,85,184,.16)}
.auth-nav-actions{flex:0 0 auto;min-width:0}
.logout-nav-btn{min-height:38px;padding:0 12px;border-radius:11px;background:#fff;border-color:var(--ui-border-strong);font-size:12px}

/* Generic pages: cleaner cards, forms and content measure. */
.pagehead{padding:38px 0 18px}
.pagehead h1{font-size:clamp(30px,4vw,42px);letter-spacing:-.035em}
.card,.lead,.mini-card,.formcard,.auth,.comment,.epaper-card,.gallery figure{border:1px solid var(--ui-border);box-shadow:var(--ui-shadow)}
.card,.lead,.mini-card,.formcard,.auth,.comment,.epaper-card,.gallery figure{border-radius:var(--ui-radius)}
.card:hover{box-shadow:var(--ui-shadow-hover);transform:translateY(-2px)}
.card{transition:transform .18s ease,box-shadow .18s ease}
.pad h3{font-size:16px;letter-spacing:-.01em}
.formcard{background:var(--ui-surface);padding:28px}
.formcard input,.formcard select,.formcard textarea,.auth input{background:#fbfcfe;border-color:var(--ui-border-strong)}
.btn{border-radius:11px;background:var(--ui-accent);color:#fff;box-shadow:0 6px 16px rgba(36,85,184,.14)}

/* Homepage: replace the oversized colorful canvas with a restrained magazine layout. */
.mag-home-v6{
  margin-left:calc((min(1180px,calc(100vw - 40px)) - 100vw)/2)!important;
  margin-right:calc((min(1180px,calc(100vw - 40px)) - 100vw)/2)!important;
  padding:0 max(20px,calc((100vw - 1180px)/2)) 64px!important;
  background:#f4f7fb!important;
  overflow:visible!important;
}
.mag-home-v6:before{display:none!important}
.mag-home-v6>*{max-width:1180px!important}
.mag-ticker{height:40px!important;border:0!important;border-radius:0 0 12px 12px;box-shadow:0 5px 18px rgba(15,23,42,.07)!important}
.mag-ticker-label{background:#173b8f!important;color:#fff!important;font-size:9px!important;padding:0 13px!important}
.mag-ticker-track{padding:0 16px!important}
.mag-ticker-date{font-size:9px!important}
.mag-hero{grid-template-columns:minmax(0,1.65fr) minmax(260px,.72fr)!important;gap:20px!important;margin-top:20px!important}
.mag-hero-main,.mag-hero-side{border:1px solid var(--ui-border)!important;border-radius:20px!important;box-shadow:var(--ui-shadow)!important;background:#fff!important}
.mag-hero-main{min-width:0;grid-template-columns:minmax(0,1.18fr) minmax(260px,.82fr)!important}
.mag-hero-image{min-width:0;min-height:350px!important}
.mag-hero-copy{padding:30px!important}
.mag-hero-copy h1{font-size:clamp(25px,2.7vw,39px)!important;letter-spacing:-.04em!important}
.mag-hero-copy p{font-size:13px!important;color:#667085!important}
.mag-badge{background:#173b8f!important;box-shadow:none!important}
.mag-pill{background:#edf3ff!important;color:#2455b8!important}
.mag-button{background:#173b8f!important;border-radius:10px!important;box-shadow:none!important}
.mag-hero-side{padding:17px!important}
.mag-side-title{border-bottom:1px solid var(--ui-border)!important;padding-bottom:10px!important;color:#172033!important}
.mag-side-item{padding:10px 4px!important}
.mag-side-item img,.mag-mini-placeholder{border-radius:10px!important}
.mag-section{margin-top:38px!important}
.mag-section-heading{margin-bottom:14px!important}
.mag-kicker{border-left:3px solid #f2c500!important;font-size:10px!important;color:#667085!important}
.mag-section-heading h2{font-size:21px!important;letter-spacing:-.02em}
.mag-section-heading>a{font-size:11px!important}
.mag-news-layout,.mag-latest-grid{gap:20px!important}
.mag-news-feature,.mag-news-list,.mag-rubric-feature,.mag-popular-card,.mag-horizontal-card,.mag-topic-row article{border:1px solid var(--ui-border)!important;box-shadow:var(--ui-shadow)!important}
.mag-news-feature,.mag-news-list,.mag-rubric-feature,.mag-popular-card{border-radius:18px!important}
.mag-news-image{height:270px!important}
.mag-news-body{padding:20px!important}
.mag-news-body h3{font-size:21px!important}
.mag-news-list{padding:10px 13px!important}
.mag-outline-button{border-color:#b8c9e8!important;color:#2455b8!important}
.mag-stats{border-radius:16px!important;margin-top:20px!important;box-shadow:none!important;padding:20px 8px!important}
.mag-stats strong{color:#f2c500!important;font-size:28px!important}
.mag-rubric-tabs{gap:8px!important}
.mag-rubric-tab{background:#fff!important;color:#172033!important;border:1px solid var(--ui-border)!important;box-shadow:none!important;border-radius:12px!important}
.mag-rubric-tab.active{outline:2px solid #2455b8!important;outline-offset:-2px}
.mag-rubric-feature{background:#fff!important;padding:18px!important}
.mag-rubric-mini a{background:#f8fafc!important;border:1px solid #eef2f6}
.mag-horizontal-card{background:#fff!important;border-radius:16px!important;padding:9px!important}
.mag-horizontal-card h3{font-size:15px!important}
.mag-popular-card{background:#fff!important}
.mag-topic-row{gap:14px!important}
.mag-topic-row article{background:#fff!important;border-radius:15px!important}
.mag-collab{margin-top:38px!important;border-radius:18px!important;padding:28px!important;box-shadow:none!important}

/* Creative block: keep it but remove the competing second visual language. */
.creative-home-section{width:min(1180px,100%)!important;margin:38px auto 0!important;padding:34px 30px 36px!important;border-radius:20px!important;background:#fff!important;border:1px solid var(--ui-border)!important;box-shadow:var(--ui-shadow)!important}
.creative-heading h2{font-size:23px!important}
.creative-heading p{color:#667085!important}
.creative-grid{gap:18px!important}
.creative-albums,.creative-videos{gap:16px!important}
.creative-album-card,.creative-video-card{border-radius:15px!important;box-shadow:none!important}
.creative-quote{width:min(1180px,100%)!important;margin:0 auto!important;border-radius:0 0 20px 20px!important}

/* Footer: editorial but quiet. */
.site-footer{margin-top:64px!important;border-top:1px solid var(--ui-border)!important;background:#fff!important}
.site-footer .footer-grid{gap:34px!important}
.site-footer h2{font-size:19px!important}
.site-footer .footer-column a,.site-footer .footer-contact p{font-size:14px!important}
.footer-brand p{font-size:14px!important;color:#667085!important}
.footer-bottom{font-size:12px!important;border-top:1px solid var(--ui-border)!important}

/* Tablet: never let navigation or two-column content force the viewport wider. */
@media (max-width:1100px){
  .brand,.navinner{width:min(1180px,calc(100% - 32px))}
  .brand form{flex-basis:300px;max-width:300px}
  .mag-home-v6{padding-left:16px!important;padding-right:16px!important}
  .mag-hero{grid-template-columns:1fr!important}
  .mag-hero-main{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr)!important}
}

@media (max-width:768px){
  .wrap{width:calc(100% - 28px)}
  .brand{width:calc(100% - 28px);gap:12px}
  .brand form{min-width:0;flex-basis:100%;max-width:none}
  .brand b{font-size:16px}
  .navinner{width:100%}
  .mag-home-v6{margin-left:-14px!important;margin-right:-14px!important;padding:0 14px 52px!important}
  .mag-hero{margin-top:16px!important}
  .mag-hero-main{grid-template-columns:1fr!important}
  .mag-hero-image{min-height:250px!important}
  .mag-hero-copy{padding:24px!important}
  .mag-hero-copy h1{font-size:30px!important}
  .mag-news-image{height:230px!important}
  .mag-section{margin-top:32px!important}
  .mag-section-heading h2{font-size:19px!important}
  .mag-horizontal-card{grid-template-columns:120px minmax(0,1fr)!important}
  .creative-home-section{width:100%!important;padding:28px 18px 32px!important}
  .site-footer{margin-top:46px!important}
}

@media (max-width:560px){
  .wrap{width:calc(100% - 24px)}
  .brand{width:calc(100% - 24px)}
  .brand small{display:none}
  .mag-home-v6{margin-left:-12px!important;margin-right:-12px!important;padding-left:12px!important;padding-right:12px!important}
  .mag-ticker{border-radius:0 0 10px 10px!important}
  .mag-hero-main,.mag-hero-side,.mag-news-feature,.mag-news-list,.mag-rubric-feature,.mag-popular-card{border-radius:15px!important}
  .mag-hero-image{min-height:220px!important}
  .mag-hero-copy h1{font-size:27px!important}
  .mag-stats{grid-template-columns:repeat(2,1fr)!important;gap:0!important}
  .mag-rubric-tabs{grid-template-columns:repeat(2,1fr)!important}
  .mag-horizontal-card{grid-template-columns:1fr!important}
  .mag-horizontal-image{height:180px!important}
  .mag-topic-row{grid-template-columns:1fr 1fr!important}
  .mag-collab{padding:22px!important}
  .creative-home-section{border-radius:16px!important}
}

@media (max-width:390px){
  .mag-topic-row{grid-template-columns:1fr!important}
  .mag-rubric-tabs{grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  .card,.links a:after{transition:none!important}
}