/* شهاب — newsletter: النشرة البريدية.

   على الأبيض: رأس فاتح، ثم عمودان ينتهيان معًا — نموذج الاشتراك (البريد
   والاسم بصناديق واضحة، الأقسام خيارات حقيقية تُرسل مع النموذج، والرد تحت الزر،
   وتحته «ماذا يصلك» نصًا في شبكة 2×2) وجنبه نموذج من رسالة الصباح كما تصل.
   لا عناوين إنجليزية، لا مجموعة قصاصات، لا زر اشتراك مكرر في آخر الصفحة. */
a{transition:color .16s ease,background .16s ease,border-color .16s ease}
input,button{font-family:var(--sh-font)}
input::placeholder{color:var(--sh-mute)}

.sh-nl{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:64px;align-items:start;margin:40px 0 72px}
.sh-nl-sign{min-width:0}
.sh-nl-h{margin:0 0 18px;font-family:var(--sh-font);font-size:clamp(24px,2.2vw,30px);font-weight:800;line-height:1.3;color:var(--sh-navy)}
.sh-nl-h--sm{font-size:22px;margin-bottom:6px}

/* ================================================================== form */
.sh-nl-form{display:flex;flex-direction:column;gap:22px}
.sh-nl-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px;padding:0;font-family:var(--sh-font);font-size:16px;font-weight:700;color:var(--sh-navy)}
.sh-nl-label small{font-size:14px;font-weight:400;color:var(--sh-mute)}
.sh-nl-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px}
.sh-nl-field{display:block;min-width:0}
.sh-nl-field input{display:block;width:100%;min-height:56px;padding:0 16px;border:1px solid var(--sh-grey-1);background:#fff;color:var(--sh-navy);font-size:18px;transition:border-color .16s ease,box-shadow .16s ease}
:root[dir="rtl"] .sh-nl-field input[dir="ltr"]{text-align:right}
[data-sh-page="newsletter"] .sh-nl-field input:focus{outline:none;border-color:var(--sh-blue);box-shadow:inset 0 0 0 1px var(--sh-blue)}
.sh-nl-topics{min-width:0;margin:0;padding:0;border:0}
.sh-nl-topics__opts{display:flex;flex-wrap:wrap;gap:10px}
.sh-nl-opt{position:relative;display:inline-flex}
.sh-nl-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sh-nl-opt span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid var(--sh-grey-1);background:#fff;color:var(--sh-ink-2);font-family:var(--sh-font);font-size:16px;font-weight:700;white-space:nowrap;transition:background .16s ease,border-color .16s ease,color .16s ease}
@media (hover:hover){.sh-nl-opt:hover span{border-color:var(--sh-blue);color:var(--sh-blue)}}
.sh-nl-opt input:checked + span{background:var(--sh-blue);border-color:var(--sh-blue);color:#fff}
.sh-nl-opt input:focus-visible + span{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-nl-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.sh-nl-send__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 40px;border:0;background:var(--sh-blue);color:#fff;font-size:18px;font-weight:800;cursor:pointer;transition:background .18s ease}
@media (hover:hover){.sh-nl-send__btn:hover{background:var(--sh-navy)}}
.sh-nl-send__btn:focus-visible{outline:2px solid var(--sh-navy);outline-offset:3px}
.sh-nl-send__btn:disabled{opacity:.6;cursor:progress}
.sh-nl-status{flex:1 1 240px;margin:0;font-family:var(--sh-font);font-size:16px;font-weight:700;line-height:1.7;color:var(--sh-ink-2)}
.sh-nl-status:empty{display:none}
.sh-nl-status[data-state="ok"]{color:#1f7a4d}
.sh-nl-status[data-state="err"]{color:var(--sh-red)}
.sh-nl-fine{margin:0;font-family:var(--sh-font);font-size:15px;line-height:1.75;color:var(--sh-mute)}
.sh-nl-fine a{font-weight:700;color:var(--sh-blue)}
@media (hover:hover){.sh-nl-fine a:hover{color:var(--sh-navy)}}

/* ---- what arrives: four short lines, text only ---- */
.sh-nl-what{margin-top:44px;padding-top:28px;border-top:1px solid var(--color-border-soft)}
.sh-nl-what dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0}
.sh-nl-what dl > div{padding:16px 0;border-bottom:1px solid var(--color-border-soft)}
.sh-nl-what dt{font-family:var(--sh-font);font-size:18px;font-weight:800;color:var(--sh-navy)}
.sh-nl-what dd{margin:6px 0 0;font-family:var(--sh-font);font-size:16px;line-height:1.7;color:var(--sh-ink-2);text-wrap:pretty}

/* ======================================================== sample issue */
.sh-nl-issue{position:sticky;top:calc(var(--sh-compact-h,100px) + 26px);min-width:0;border:1px solid var(--color-border);background:#fff}
.sh-nl-issue__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:3px solid var(--sh-blue)}
.sh-nl-issue__top img{width:auto;height:40px}
.sh-nl-issue__top span{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--sh-font)}
.sh-nl-issue__top b{font-size:17px;font-weight:800;color:var(--sh-navy)}
.sh-nl-issue__top time{font-size:14px;color:var(--sh-mute)}
.sh-nl-issue__pic{margin:0}
.sh-nl-issue__pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sh-navy-2)}
.sh-nl-issue__pic figcaption{padding:10px 22px 0;font-family:var(--sh-font);font-size:14px;color:var(--sh-mute)}
.sh-nl-issue__body{padding:18px 22px 6px}
.sh-nl-issue__h{margin:0 0 4px;font-family:var(--sh-font);font-size:20px;font-weight:800;color:var(--sh-navy)}
.sh-nl-issue__list{margin:0;padding:0;list-style:none}
.sh-nl-issue__list li{display:flex;flex-direction:column;gap:3px;padding:12px 0}
.sh-nl-issue__list li + li{border-top:1px solid var(--color-border-soft)}
.sh-nl-issue__list b{font-family:var(--sh-font);font-size:14px;font-weight:700;color:var(--sh-blue)}
.sh-nl-issue__list span{font-family:var(--sh-font);font-size:17px;font-weight:700;line-height:1.55;color:var(--sh-navy);text-wrap:pretty}
.sh-nl-issue__foot{margin:0;padding:14px 22px;background:var(--color-surface-soft);font-family:var(--sh-font);font-size:13.5px;line-height:1.6;color:var(--sh-mute)}
.sh-nl-issue__foot span{text-decoration:underline}

/* ============================================================ narrower */
@media (max-width:1100px){
  .sh-nl{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  .sh-nl-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .sh-nl{grid-template-columns:minmax(0,1fr);margin:28px 0 56px}
  .sh-nl-issue{position:static;max-width:560px}
  .sh-nl-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media (max-width:640px){
  .sh-nl-row{grid-template-columns:minmax(0,1fr);gap:20px}
  .sh-nl-topics__opts{gap:8px}
  .sh-nl-opt span{min-height:44px;padding:0 14px;font-size:15px}
  .sh-nl-send__btn{width:100%}
  .sh-nl-what{margin-top:36px}
  .sh-nl-what dl{grid-template-columns:minmax(0,1fr)}
  .sh-nl-issue__top,.sh-nl-issue__body,.sh-nl-issue__foot{padding-inline:16px}
  .sh-nl-issue__pic figcaption{padding-inline:16px}
  .sh-nl-issue__top img{height:34px}
}

/* A press has to answer on a touch screen, where :hover never fires: the ground
   steps to navy for as long as the control is held. No transform and no radius —
   the timing is the colour transition the control already carries. */
body[data-sh-page="newsletter"] :where(.sh-more,.sh-pager__btn,.sh-chip,.sh-tag,.sh-btn):active{
  background:var(--sh-navy);color:#fff;border-color:var(--sh-navy);
}

/* the burger and its chevron live in the shared css/responsive.css, which feeds
   the four locked pages, so their guard is written here, per page */
@media (prefers-reduced-motion:reduce){
  body[data-sh-page="newsletter"] .sh-nav-toggle span,
  body[data-sh-page="newsletter"] header nav .sh-menu > a > span:last-child{transition:none}
  body[data-sh-page="newsletter"] a,.sh-nl-field input,.sh-nl-opt span,.sh-nl-send__btn{transition:none}
}