/* شهاب — search: نتائج البحث.

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

/* ================================================================== head */
.sh-se-head{padding-top:24px}
.sh-se-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-family:var(--sh-font);font-size:14px;color:var(--sh-mute)}
.sh-se-crumbs a{color:var(--sh-mute)}
.sh-se-crumbs a::after{content:"/";margin-inline-start:9px;color:var(--color-text-faint)}
@media (hover:hover){.sh-se-crumbs a:hover{color:var(--sh-blue)}}
.sh-se-crumbs span{color:var(--sh-navy);font-weight:700}
.sh-se-title{margin:12px 0 0;font-family:var(--sh-font);font-size:clamp(34px,3.8vw,52px);font-weight:800;line-height:1.2;color:var(--sh-navy);text-wrap:balance}
.sh-se-title span{color:var(--sh-blue)}

/* the field: one white box ruled in navy that turns blue while it is in use —
   the border change is the focus ring, so the input's own outline steps aside */
.sh-se-form{display:flex;align-items:stretch;min-height:68px;margin-top:22px;border:2px solid var(--sh-navy);background:#fff;transition:border-color .2s ease}
.sh-se-form:focus-within{border-color:var(--sh-blue)}
.sh-se-form__i{flex:none;align-self:center;margin-inline:22px 14px;font-size:20px;color:var(--sh-mute)}
.sh-se-form__input{flex:1;min-width:0;padding:0;border:0;background:none;font-size:22px;font-weight:700;color:var(--sh-navy)}
[data-sh-page="search"] .sh-se-form__input:focus-visible{outline:none}
.sh-se-form__btn{flex:none;padding:0 44px;border:0;background:var(--sh-blue);color:#fff;font-size:19px;font-weight:800;cursor:pointer;transition:background .18s ease}
@media (hover:hover){.sh-se-form__btn:hover{background:var(--sh-navy)}}
.sh-se-form__btn:focus-visible{outline:2px solid var(--sh-navy);outline-offset:-6px}

.sh-se-trend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:14px;font-family:var(--sh-font);font-size:16px}
.sh-se-trend__h{color:var(--sh-mute)}
.sh-se-trend a{display:inline-flex;align-items:center;min-height:32px;font-weight:700;color:var(--sh-ink-2);white-space:nowrap}
.sh-se-trend a[aria-current]{color:var(--sh-blue)}
@media (hover:hover){.sh-se-trend a:hover{color:var(--sh-blue)}}
.sh-se-trend a:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}

/* ================================================================== body */
.sh-se-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start;margin:40px 0 72px}
.sh-se-results{min-width:0}

/* ---- the filters (js/search.js): on the soft tint, pinned under the compact
   header; chips white with a hairline, blue when pressed. The state lives in
   the URL. ---- */
.sh-sf{position:sticky;top:calc(var(--sh-compact-h,100px) + 26px);min-width:0;max-height:calc(100vh - var(--sh-compact-h,100px) - 50px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px 22px 8px;background:var(--color-surface-soft)}
.sh-sf__toggle{display:none}
.sh-sf__row{padding:18px 0}
.sh-sf__row + .sh-sf__row{border-top:1px solid var(--color-border)}
.sh-sf__label{margin:0 0 12px;font-family:var(--sh-font);font-size:17px;font-weight:800;line-height:1.3;color:var(--sh-navy)}
.sh-sf__chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.sh-sf__chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--sh-grey-1);background:#fff;color:var(--sh-ink-2);font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.sh-sf__chip b{font-weight:700;color:var(--sh-mute);font-variant-numeric:tabular-nums}
@media (hover:hover){.sh-sf__chip:hover{border-color:var(--sh-blue);color:var(--sh-blue)}}
.sh-sf__chip[aria-pressed="true"]{background:var(--sh-blue);border-color:var(--sh-blue);color:#fff}
.sh-sf__chip[aria-pressed="true"] b{color:var(--sh-on-dark-80)}
.sh-sf__dates{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sh-sf__date{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;font-family:var(--sh-font);font-size:15px;font-weight:700;color:var(--sh-ink-2)}
.sh-sf__date input{width:100%;min-width:0;min-height:42px;padding:0 12px;border:1px solid var(--sh-grey-1);background:#fff;color:var(--sh-navy);font-size:15px;font-weight:700}
.sh-sf__chip:focus-visible,.sh-sf__toggle:focus-visible,.sh-se-sort:focus-visible,.sh-se-clear:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
[data-sh-page="search"] .sh-sf__date input:focus-visible{outline:2px solid var(--sh-blue);outline-offset:1px}

/* ---- over the results: the real count, what is applied, the sort ---- */
.sh-se-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-bottom:16px}
.sh-se-count{margin:0;font-family:var(--sh-font);font-size:18px;color:var(--sh-ink-2)}
.sh-se-count b{font-weight:800;color:var(--sh-navy);font-variant-numeric:tabular-nums}
.sh-se-applied{margin:0;font-family:var(--sh-font);font-size:15px;color:var(--sh-ink-2)}
.sh-se-clear{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--sh-navy);background:#fff;color:var(--sh-navy);font-size:14px;font-weight:700;cursor:pointer}
@media (hover:hover){.sh-se-clear:hover{background:var(--sh-navy);color:#fff}}
.sh-se-sort{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-inline-start:auto;padding:0 14px;border:1px solid var(--sh-grey-1);background:#fff;color:var(--sh-ink-2);font-size:15px;cursor:pointer}
.sh-se-sort strong{font-weight:800;color:var(--sh-navy)}
@media (hover:hover){.sh-se-sort:hover{border-color:var(--sh-blue)}}
.sh-se-applied[hidden],.sh-se-clear[hidden]{display:none}

/* ---- a result: kind, section and time; the title; two lines of summary;
   the picture at the end. The query's words carry a soft blue marker. ---- */
.sh-se-item{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:0 32px;align-items:center;padding:24px 0;border-top:1px solid var(--color-border-soft);color:var(--sh-ink)}
.sh-se-item--text{grid-template-columns:minmax(0,1fr)}
.sh-se-item[hidden]{display:none}
@media (hover:hover){.sh-se-item:hover{color:var(--sh-ink)}}
.sh-se-item:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
.sh-se-item__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.sh-se-item__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-family:var(--sh-font);font-size:14px;color:var(--sh-mute)}
.sh-se-item__kind{font-weight:700;color:var(--sh-blue)}
.sh-se-item__t{font-family:var(--sh-font);font-size:22px;font-weight:800;line-height:1.5;color:var(--sh-navy);text-wrap:pretty;transition:color .2s ease}
@media (hover:hover){.sh-se-item:hover .sh-se-item__t{color:var(--sh-blue)}}
.sh-se-item__dek{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--sh-font);font-size:16.5px;line-height:1.8;color:var(--sh-ink-2);text-wrap:pretty}
.sh-se-item__pic{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sh-navy-2)}
.sh-se-item__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.sh-se-item:hover .sh-se-item__pic img{transform:scale(1.05)}}
.sh-se-hit{padding:0 1px;background:none;color:inherit;box-shadow:inset 0 -.42em 0 rgba(27,90,166,.16)}

.sh-se-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 24px;border-top:1px solid var(--color-border-soft);background:var(--color-surface-soft);text-align:center}
.sh-se-empty[hidden]{display:none}
.sh-se-empty__t{margin:0;font-family:var(--sh-font);font-size:19px;font-weight:700;line-height:1.7;color:var(--sh-navy)}

/* ---- the pager: js/app.js swaps the shipped classes, so the current page,
   an idle step and a live step each ship once ---- */
.sh-se-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-top:28px;border-top:1px solid var(--color-border-soft);font-family:var(--sh-font);font-size:16px;font-weight:700}
.sh-se-pager[hidden]{display:none}
.sh-se-pager .sh-pager__btn{width:44px;height:44px}
.sh-se-pager__cur,.sh-se-pager__cur:hover{color:#fff}   /* base.css a:hover would paint the label blue on blue */
.sh-se-pager__cur{width:44px;height:44px;display:grid;place-items:center;background:var(--sh-blue);font-variant-numeric:tabular-nums}
.sh-se-pager__step{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;color:var(--sh-grey-3);cursor:default}
.sh-se-pager__step--on{color:var(--sh-blue);cursor:pointer}
@media (hover:hover){.sh-se-pager__step--on:hover{gap:11px;color:var(--sh-navy)}}

/* ============================================================ narrower */
@media (max-width:1100px){
  .sh-se-body{grid-template-columns:260px minmax(0,1fr);gap:40px}
  .sh-sf{padding-inline:18px}
  .sh-se-item{grid-template-columns:minmax(0,1fr) 200px;gap:0 24px}
  .sh-se-item__t{font-size:20px}
}
/* one column: the filters fold under one button above the results */
@media (max-width:900px){
  .sh-se-body{grid-template-columns:minmax(0,1fr);gap:20px;margin:28px 0 56px}
  .sh-sf{position:static;max-height:none;overflow:visible;padding:0;background:none}
  .sh-sf__toggle{display:inline-flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 16px;border:1px solid var(--sh-navy);background:#fff;color:var(--sh-navy);font-size:16px;font-weight:800;cursor:pointer}
  .sh-sf__toggle .sh-i{font-size:14px}
  .sh-sf__toggle b{display:grid;place-items:center;min-width:24px;height:24px;margin-inline-start:auto;background:var(--sh-blue);color:#fff;font-size:13px;font-variant-numeric:tabular-nums}
  .sh-sf__toggle b[hidden]{display:none}
  .sh-sf__toggle[aria-expanded="true"]{background:var(--sh-navy);color:#fff}
  .sh-sf__panel{padding:4px 16px 6px;background:var(--color-surface-soft)}
  .sh-sf[data-collapsed] .sh-sf__panel{display:none}
  .sh-sf__dates{flex-direction:row}
  .sh-sf__date{flex:1 1 0}
}
@media (max-width:640px){
  .sh-se-head{padding-top:18px}
  .sh-se-crumbs{font-size:13px}
  .sh-se-title{font-size:30px;margin-top:8px}
  .sh-se-form{min-height:56px;margin-top:16px}
  .sh-se-form__i{margin-inline:14px 10px;font-size:17px}
  .sh-se-form__btn{padding:0 20px;font-size:17px}
  .sh-se-trend{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0 18px;margin-inline:calc(var(--sh-gutter,16px) * -1);padding-inline:var(--sh-gutter,16px);font-size:15px}
  .sh-se-trend::-webkit-scrollbar{display:none}
  .sh-se-trend a,.sh-se-trend__h{flex:none;min-height:44px;display:inline-flex;align-items:center}
  .sh-sf__chip{min-height:44px}
  .sh-sf__dates{flex-direction:column}
  .sh-se-bar{padding-bottom:12px}
  .sh-se-count{font-size:16px}
  .sh-se-item{grid-template-columns:minmax(0,1fr) 120px;gap:0 14px;align-items:start;padding:18px 0}
  .sh-se-item__pic{aspect-ratio:4/3}
  .sh-se-item__t{font-size:17.5px;line-height:1.55}
  .sh-se-item__meta{font-size:13px;gap:2px 10px}
  .sh-se-item__dek{display:none}
  .sh-se-empty{padding:40px 18px}
  .sh-se-empty__t{font-size:17px}
  .sh-se-pager{justify-content:center;gap:4px}
}
@media (pointer:coarse){.sh-sf__chip,.sh-se-sort,.sh-se-clear{min-height:44px}}

/* responsive.css makes every input and submit button 100% wide under 900px (a
   layered !important); inside the head's flex form that would leave the field
   at 0px. The override has to sit in the same layer to outrank it. */
@layer responsive{
  @media (max-width:900px){
    [data-sh-page="search"] .sh-se-form__input{width:auto!important;min-height:0;font-size:18px!important}
    [data-sh-page="search"] .sh-se-form__btn{width:auto!important;min-height:0}
  }
}

/* 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="search"] :where(.sh-more,.sh-pager__btn,.sh-chip,.sh-tag,.sh-btn):active{
  background:var(--sh-navy);color:#fff;border-color:var(--sh-navy);
}
body[data-sh-page="search"] :where(.sh-se-item):active{
  background:var(--color-surface-soft);
}

/* 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="search"] .sh-nav-toggle span,
  body[data-sh-page="search"] header nav .sh-menu > a > span:last-child{transition:none}
  .sh-se-form,.sh-sf__chip,.sh-se-item__t,.sh-se-item__pic img{transition:none}
  .sh-se-item:hover .sh-se-item__pic img{transform:none}
}