/*
 * Shohay site-wide styles: design tokens, the shared components (search box, topic chips, store
 * buttons, app cards) and the top bar, header, phone menu and footer. Page styles build on these
 * (home.css). Design rules: DESIGN.md.
 */

:root {
    /* Brand */
    --sh-blue: #1565c0;
    --sh-blue-deep: #0d47a1;

    /* Secondary palette */
    --sh-coral: #f4baa6;
    --sh-blush: #efd1c6;
    --sh-butterscotch: #e6be76;
    --sh-smoke: #acb7b9;
    --sh-duck-egg: #c7d6d1;
    --sh-emerald: #6b9393;
    /* Pregnancy's own colour: a clear rose, so its large surfaces read pink, not cream (owner, 7 October 2026) */
    --sh-rose: #e9a0b7;

    /* The apps' own colours: the pregnancy app's icon blues, and lavender for the baby app */
    --sh-app-blue: #2f67c1;
    --sh-app-blue-ink: #074397;
    --sh-app-blue-tint: #eaf1fd;
    --sh-lavender: #b9a6dd;
    --sh-lavender-ink: #5b4691;
    --sh-lavender-tint: #f2edfa;

    /* Deeper shades for text and icons (4.5:1 or better on light surfaces) */
    --sh-coral-ink: #964a32;
    --sh-butterscotch-ink: #855f1d;
    --sh-smoke-ink: #56646a;
    --sh-emerald-ink: #3e6b6b;
    --sh-rose-ink: #9b3a5e;

    /* Soft tints for large surfaces */
    --sh-linen: #f7f3f0;
    --sh-blush-tint: #f9ede8;
    --sh-coral-tint: #fbe7df;
    --sh-butterscotch-tint: #f8eedb;
    --sh-smoke-tint: #eceff0;
    --sh-duck-egg-tint: #e9f0ed;
    --sh-rose-tint: #fceef3;

    /* Neutrals */
    --sh-ink: #121212;
    --sh-ink-2: #3d3d42;
    --sh-muted: #6b6b72;
    --sh-line: rgba(18, 18, 18, .09);
    --sh-surface: #ffffff;
    --sh-surface-2: #f4f4f2;
    /* A cool, light neutral for large surfaces; it replaces linen, which read as cream (owner, 7 October 2026) */
    --sh-mist: #f3f5f6;

    /* Shape and depth */
    --sh-radius-sm: 10px;
    --sh-radius-btn: 12px;
    --sh-radius: 14px;
    --sh-radius-lg: 20px;
    --sh-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
    --sh-shadow-hover: 0 2px 6px rgba(16, 24, 40, .05), 0 16px 36px rgba(16, 24, 40, .10);
    --sh-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Palette tones: set on a component to colour its accents */
.sh-tone--coral        { --tone: var(--sh-coral);        --tone-ink: var(--sh-coral-ink);        --tone-tint: var(--sh-coral-tint); }
.sh-tone--rose         { --tone: var(--sh-rose);         --tone-ink: var(--sh-rose-ink);         --tone-tint: var(--sh-rose-tint); }
.sh-tone--blush        { --tone: var(--sh-blush);        --tone-ink: var(--sh-coral-ink);        --tone-tint: var(--sh-blush-tint); }
.sh-tone--butterscotch { --tone: var(--sh-butterscotch); --tone-ink: var(--sh-butterscotch-ink); --tone-tint: var(--sh-butterscotch-tint); }
.sh-tone--smoke        { --tone: var(--sh-smoke);        --tone-ink: var(--sh-smoke-ink);        --tone-tint: var(--sh-smoke-tint); }
.sh-tone--duck-egg     { --tone: var(--sh-duck-egg);     --tone-ink: var(--sh-emerald-ink);      --tone-tint: var(--sh-duck-egg-tint); }
.sh-tone--emerald      { --tone: var(--sh-emerald);      --tone-ink: var(--sh-emerald-ink);      --tone-tint: var(--sh-duck-egg-tint); }
.sh-tone--app-blue     { --tone: var(--sh-app-blue);     --tone-ink: var(--sh-app-blue-ink);     --tone-tint: var(--sh-app-blue-tint); }
.sh-tone--lavender     { --tone: var(--sh-lavender);     --tone-ink: var(--sh-lavender-ink);     --tone-tint: var(--sh-lavender-tint); }

.sh-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 575.98px) { .sh-container { padding: 0 16px; } }

/* Small palette dot used in chips and eyebrows */
.sh-chip__dot {
    flex: none; width: 9px; height: 9px; border-radius: 50%;
    background: var(--tone, var(--sh-blue)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ---------- Page layout: the header sits in the page and sticks to the top ---------- */

html { scroll-padding-top: 84px; }
#main { padding-top: 0; }
.sh-skip-link {
    position: absolute; top: -80px; left: 12px; z-index: 2000; padding: 10px 16px; border-radius: 10px;
    background: var(--sh-blue); color: #fff; font-weight: 600; text-decoration: none;
}
.sh-skip-link:focus { top: 12px; color: #fff; }

/* ---------- Search box (home hero and header) ---------- */
.sh-search {
    display: flex; align-items: center; gap: 4px;
    margin: 0; padding: 8px 8px 8px 22px;
    background: #fff; border: 1px solid var(--sh-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px rgba(16, 24, 40, .07);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sh-search:focus-within { border-color: var(--sh-blue); box-shadow: 0 0 0 3px rgba(21, 101, 192, .22), 0 10px 30px rgba(16, 24, 40, .08); }
.sh-search__icon { flex: none; width: 22px; height: 22px; color: var(--sh-muted); }
.sh-search__field { position: relative; display: flex; flex: 1; min-width: 0; }
.sh-search__input {
    flex: 1; width: 0; min-width: 0; padding: 14px 12px;
    border: 0; outline: 0; background: transparent; box-shadow: none;
    color: var(--sh-ink); font: inherit; font-size: 1.1rem;
    -webkit-appearance: none; appearance: none;
}
.sh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Clicking into the box drew a second ring inside it; the box's own soft ring is enough */
.sh-search .sh-search__input:focus,
.sh-search .sh-search__input:focus-visible { outline: 0; box-shadow: none; }
.sh-search__button {
    flex: none; padding: 13px 28px; border: 0; border-radius: var(--sh-radius-sm); cursor: pointer;
    background: var(--sh-blue); color: #fff; font: inherit; font-size: 1.04rem; font-weight: 600;
    transition: background-color .2s ease;
}
.sh-search__button:hover, .sh-search__button:focus { background: var(--sh-blue-deep); }

/* Example questions take turns after "যেমন:" in the empty box; they step aside as soon as you type */
.sh-search__hint {
    position: absolute; inset: 0; display: flex; align-items: center; gap: .3em;
    padding: 0 12px; pointer-events: none; white-space: nowrap;
    color: var(--sh-muted); font-size: 1.1rem; line-height: 1.5; transition: color .2s ease;
}
.sh-search__hint-label { flex: none; }
.sh-cycle { display: grid; flex: 1; min-width: 0; overflow: hidden; }
.sh-cycle__item {
    grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; padding: .1em 0;
    animation-delay: calc(var(--i, 0) * 3.5s); animation-iteration-count: 3; animation-fill-mode: backwards;
}
/* Moving words must be easy to stop: they pause while the box is pointed at or in use, and after
   three rounds they rest on the first example */
.sh-search:hover .sh-cycle__item, .sh-search:focus-within .sh-cycle__item { animation-play-state: paused; }
.sh-cycle__item:not(:first-child) { opacity: 0; }
.sh-cycle--n2 .sh-cycle__item { animation-name: sh-hint-2; animation-duration: 7s; }
.sh-cycle--n3 .sh-cycle__item { animation-name: sh-hint-3; animation-duration: 10.5s; }
.sh-cycle--n4 .sh-cycle__item { animation-name: sh-hint-4; animation-duration: 14s; }
.sh-cycle--n5 .sh-cycle__item { animation-name: sh-hint-5; animation-duration: 17.5s; }
.sh-search__input:focus + .sh-search__hint { color: #8b8b92; }
.sh-search__input:not(:placeholder-shown) + .sh-search__hint { visibility: hidden; }
@media (max-width: 575.98px) {
    .sh-search { padding: 6px 6px 6px 16px; }
    .sh-search__input { padding: 12px 8px; font-size: 1.02rem; }
    .sh-search__hint { padding: 0 8px; font-size: 1.02rem; }
    .sh-search__button { padding: 12px 16px; font-size: 1rem; }
}

/* ---------- Topic chips ---------- */

.sh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-chips .sh-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .78); border: 1px solid var(--sh-line);
    color: var(--sh-ink-2); font-size: .95rem; line-height: 1.5; text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.sh-chips .sh-chip:hover, .sh-chips .sh-chip:focus { color: var(--sh-ink); border-color: var(--tone, var(--sh-blue)); background: #fff; }

/* ---------- App store buttons ----------
   Ink, with the platform's mark, like the stores' own badges: recognised at a glance, and kept apart
   from the blue of the page's main action. */

.sh-stores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-stores .sh-store {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 10px; border-radius: 8px;
    background: var(--sh-ink); color: #fff; font-size: .84rem; font-weight: 600; line-height: 1.5; text-decoration: none;
    transition: background-color .2s ease;
}
.sh-stores .sh-store:hover, .sh-stores .sh-store:focus { background: var(--sh-ink-2); color: #fff; }
.sh-stores .sh-store:focus-visible { outline: 3px solid var(--sh-blue); outline-offset: 2px; }
.sh-store__mark { flex: none; width: 14px; height: 14px; }

/* ---------- The pregnancy app card: under the pregnancy calculator, on week pages and their list ----------
   In the app's own blue, lit like its icon (template-parts/tool/app.php). */

.sh-toolapp {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 20px 0 0; overflow: hidden;
    padding: clamp(22px, 3.6vw, 32px) clamp(22px, 3.6vw, 32px) 0;
    border-radius: var(--sh-radius-lg); background: linear-gradient(45deg, #eef3fd 0%, #d4e2fa 100%); text-align: left;
}
.sh-toolapp__kicker { margin: 0; color: var(--sh-app-blue-ink); font-size: .88rem; font-weight: 600; line-height: 1.5; }
.sh-toolapp__title { margin: 2px 0 0; color: var(--sh-ink); font-size: clamp(1.12rem, 1.04rem + .35vw, 1.28rem); font-weight: 600; line-height: 1.5; }
.sh-toolapp__text { margin: 10px 0 16px; color: var(--sh-ink-2); font-size: 1rem; line-height: 1.75; }
.sh-toolapp .sh-stores { margin-top: 0; gap: 8px; }
.sh-toolapp .sh-stores .sh-store { gap: 7px; padding: 7px 15px 7px 12px; font-size: .9rem; }
.sh-toolapp .sh-store__mark { width: 16px; height: 16px; }
/* The app's home screen in a phone (the owner's screenshot), rising from the card's lower edge: under the
   words on phones, beside them from 576px */
.sh-toolapp__shot { position: relative; height: 236px; margin-top: 24px; }
.sh-toolapp__phone {
    position: absolute; top: 0; left: 50%; width: 180px; padding: 7px; border-radius: 30px; background: #15171c;
    box-shadow: 0 22px 44px rgba(7, 67, 151, .22), 0 6px 14px rgba(7, 67, 151, .12); transform: translateX(-50%);
}
/* The camera island, over the screenshot's empty middle of the status bar */
.sh-toolapp__phone::before {
    content: ""; position: absolute; top: 14px; left: 50%; z-index: 1; width: 30%; height: 13px;
    border-radius: 999px; background: #15171c; transform: translateX(-50%);
}
.sh-toolapp__phone img { display: block; width: 100%; height: auto; border-radius: 23px; background: #f2f4f8; }
@media (min-width: 576px) {
    .sh-toolapp { grid-template-columns: 196px minmax(0, 1fr); grid-template-areas: "shot head" "shot body"; column-gap: clamp(24px, 4vw, 40px); }
    .sh-toolapp__head { grid-area: head; }
    .sh-toolapp__body { grid-area: body; padding-bottom: clamp(22px, 3.6vw, 32px); }
    .sh-toolapp__shot { grid-area: shot; height: auto; min-height: 250px; margin: 0; }
    .sh-toolapp__phone { left: 0; width: 196px; transform: none; }
}
/* Wide: across a page's full width (topic pages, the list of weeks), the phone, then the app's name, then
   its words and stores, so the lines stay a readable length */
@media (min-width: 992px) {
    .sh-toolapp--wide { grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "shot head body"; align-items: center; column-gap: 48px; padding: 36px 48px 0; }
    .sh-toolapp--wide .sh-toolapp__head,
    .sh-toolapp--wide .sh-toolapp__body { padding-bottom: 36px; }
    .sh-toolapp--wide .sh-toolapp__shot { align-self: stretch; min-height: 300px; }
    .sh-toolapp--wide .sh-toolapp__phone { width: 230px; }
    .sh-toolapp--wide .sh-toolapp__text { margin-top: 0; }
    .sh-toolapp--wide .sh-toolapp__title { font-size: 1.4rem; }
}

/* ---------- Top bar: the app promo, in the pregnancy app's own blue ---------- */

.sh-topbar { position: relative; background: linear-gradient(45deg, #eef3fd 0%, #d9e6fb 100%); color: var(--sh-app-blue-ink); }
.sh-topbar-off .sh-topbar { display: none; }
.sh-topbar__inner { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
.sh-topbar__icon img { display: block; width: 24px; height: 24px; border-radius: 6px; }
.sh-topbar__msg { margin: 0; font-size: .95rem; line-height: 1.5; }
.sh-topbar__text { font-weight: 600; }
.sh-topbar .sh-topbar__link { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--sh-blue); font-weight: 600; white-space: nowrap; text-decoration: none; }
.sh-topbar .sh-topbar__link:hover, .sh-topbar .sh-topbar__link:focus { color: var(--sh-blue-deep); text-decoration: underline; text-underline-offset: 4px; }
.sh-topbar__link svg { width: 14px; height: 14px; }
.sh-topbar__close {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--sh-app-blue-ink); cursor: pointer; transition: background-color .2s ease;
}
.sh-topbar__close:hover { background: rgba(7, 67, 151, .08); }
.sh-topbar__close svg { width: 16px; height: 16px; }

/* ---------- Header: frosted glass, sticks to the top ---------- */

/* Taller at the top of the page (76px), compact while reading (64px). The header always takes 76px in
   the page and sticks 12px above the screen edge, so it settles to 64px as it reaches the top without
   moving anything else on the page; header.js keeps its content centred in the part that shows.
   Phones: 64px, settling to 56px. */
#masthead.sh-header {
    --sh-header-h: 76px; --sh-header-trim: 12px;
    position: sticky; top: calc(var(--sh-header-trim) * -1); z-index: 1030;
    background: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(18, 18, 18, .07);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    transform: none; will-change: auto; transition: transform .3s var(--sh-ease);
}
.admin-bar #masthead.sh-header { top: calc(32px - var(--sh-header-trim)); }
@media (max-width: 782px) { .admin-bar #masthead.sh-header { top: calc(46px - var(--sh-header-trim)); } }
@media (max-width: 600px) { .admin-bar #masthead.sh-header { top: calc(var(--sh-header-trim) * -1); } }
/* Phones: the header slides away while reading down a page and returns on the way up */
@media (max-width: 767.98px) { #masthead.sh-header--hidden { transform: translateY(-100%); } }

.sh-header__bar { display: flex; align-items: center; gap: 8px; height: var(--sh-header-h); transform: translateY(var(--sh-header-shift, 0px)); }
.sh-header__brand { display: flex; align-items: center; flex: none; }
.sh-header__brand img { display: block; width: auto; height: 32px; }
.sh-header__badge { padding: 2px 8px; border-radius: 999px; background: var(--sh-butterscotch); color: var(--sh-ink); font-size: .68rem; font-weight: 600; letter-spacing: .04em; }

.sh-nav { display: none; margin-left: auto; }
@media (min-width: 992px) { .sh-nav { display: block; } }
.sh-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sh-header .sh-nav a {
    display: block; padding: 8px 12px; border-radius: 10px;
    color: var(--sh-ink-2); font-size: .98rem; line-height: 1.5; text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
}
.sh-header .sh-nav a:hover, .sh-header .sh-nav a:focus { background: rgba(18, 18, 18, .05); color: var(--sh-ink); }
.sh-header .sh-nav .current-menu-item > a,
.sh-header .sh-nav .current-menu-ancestor > a,
.sh-header .sh-nav .current-menu-parent > a,
.sh-header .sh-nav .current-page-ancestor > a,
.sh-header .sh-nav .current-post-ancestor > a { color: var(--sh-ink); font-weight: 600; }

.sh-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
@media (min-width: 992px) { .sh-header__actions { margin-left: 4px; } }
.sh-icon-btn {
    display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px;
    background: transparent; color: var(--sh-ink-2); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.sh-icon-btn:hover, .sh-icon-btn[aria-expanded="true"] { background: rgba(18, 18, 18, .06); color: var(--sh-ink); }
.sh-icon-btn svg { width: 22px; height: 22px; }
.sh-header__menu-btn .sh-i-close,
.sh-header__menu-btn[aria-expanded="true"] .sh-i-menu { display: none; }
.sh-header__menu-btn[aria-expanded="true"] .sh-i-close { display: block; }
@media (min-width: 992px) { .sh-header__menu-btn { display: none; } }

/* Search opens as a panel under the header, with the same search box as the home page */
.sh-search-panel {
    position: absolute; top: 100%; left: 0; right: 0; padding: 22px 0 26px;
    background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--sh-line); box-shadow: 0 24px 48px rgba(16, 24, 40, .10);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s var(--sh-ease), transform .25s var(--sh-ease), visibility 0s linear .25s;
}
.sh-search-panel[data-open] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sh-search-panel .sh-search { max-width: 720px; margin: 0 auto; }
.sh-search-panel__chips { justify-content: center; max-width: 720px; margin: 16px auto 0; }

/* ---------- Phone and tablet menu: a full-screen sheet under the header ---------- */

.sh-menu {
    position: fixed; top: var(--sh-sheet-top, 64px); left: 0; right: 0; bottom: 0; z-index: 1029;
    overflow-y: auto; overscroll-behavior: contain; background: #fff;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--sh-ease), transform .25s var(--sh-ease), visibility 0s linear .25s;
}
.sh-menu[data-open] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 992px) { .sh-menu { display: none; } }
html.sh-menu-open { overflow: hidden; }
.sh-menu__inner { padding-top: 6px; padding-bottom: 44px; }
.sh-menu__topics { margin: 0; padding: 0; list-style: none; }
.sh-menu .sh-menu__topics a {
    display: flex; align-items: center; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--sh-line);
    color: var(--sh-ink); font-size: 1.2rem; font-weight: 600; line-height: 1.45; text-decoration: none;
}
.sh-menu__topics .sh-chip__dot { width: 10px; height: 10px; }
.sh-menu__topics svg { width: 18px; height: 18px; margin-left: auto; color: #a3a3aa; }
.sh-menu .sh-menu__label { margin: 28px 2px 8px; color: var(--sh-muted); font-size: .85rem; font-weight: 600; line-height: 1.5; }
.sh-menu__tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.sh-menu .sh-menu__tools a { display: block; padding: 9px 2px; color: var(--sh-ink-2); font-size: 1rem; line-height: 1.5; text-decoration: none; }

/* ---------- The apps as compact cards (footer and phone menu) ---------- */

.sh-apps { display: grid; gap: 10px; }
.sh-apps__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--sh-radius); }
.sh-apps__item--pregnancy { background: linear-gradient(45deg, #f3f7fe 0%, #e3ecfc 100%); }
.sh-apps__item--baby { background: linear-gradient(45deg, #f7f4fc 0%, #ebe4f7 100%); }
.sh-apps__icon img { display: block; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 4px 12px rgba(7, 67, 151, .14); }
.sh-apps__cal {
    display: flex; flex-direction: column; flex: none; width: 52px; height: 52px; overflow: hidden;
    border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(91, 70, 145, .12);
}
.sh-apps__cal small { padding: 3px 0 2px; background: var(--sh-lavender); color: #2b2147; font-size: .58rem; font-weight: 600; line-height: 1.25; text-align: center; }
.sh-apps__cal b { display: grid; place-items: center; flex: 1; color: var(--sh-ink); font-size: 1.35rem; font-weight: 600; line-height: 1; }
.sh-apps__body { min-width: 0; }
.sh-apps .sh-apps__name { margin: 0; color: var(--sh-ink); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.sh-apps .sh-apps__when { margin: 2px 0 0; color: var(--sh-lavender-ink); font-size: .88rem; font-weight: 600; line-height: 1.5; }
.sh-apps .sh-stores { margin-top: 6px; }

/* ---------- Footer (light grey, from the Smoke palette colour) ---------- */

.sh-footer { background: var(--sh-smoke-tint); color: var(--sh-ink-2); font-size: .95rem; line-height: 1.6; }
.sh-footer__top { display: grid; gap: 28px; padding: 56px 0 36px; border-bottom: 1px solid var(--sh-line); }
@media (min-width: 992px) { .sh-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 48px; } }
.sh-footer__brand img { display: block; width: auto; height: 36px; }
.sh-footer .sh-footer__brand p { max-width: 30em; margin: 14px 0 0; color: var(--sh-ink-2); font-size: 1rem; line-height: 1.75; }
.sh-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 36px 0; }
@media (min-width: 768px) { .sh-footer__links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-footer .sh-footer__title { margin: 0 0 10px; color: var(--sh-ink); font-size: .9rem; font-weight: 600; line-height: 1.5; }
.sh-footer__list { margin: 0; padding: 0; list-style: none; }
.sh-footer .sh-footer__list a {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 0;
    color: var(--sh-ink-2); font-size: .95rem; line-height: 1.5; text-decoration: none; transition: color .2s ease;
}
.sh-footer .sh-footer__list a:hover, .sh-footer .sh-footer__list a:focus { color: var(--sh-blue); }
.sh-footer__list .sh-chip__dot { width: 8px; height: 8px; }
.sh-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-footer .sh-social a {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--sh-line); color: var(--sh-ink-2); text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}
.sh-footer .sh-social a:hover, .sh-footer .sh-social a:focus { color: var(--sh-blue); border-color: rgba(21, 101, 192, .35); }
.sh-social svg { width: 18px; height: 18px; }
.sh-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 20px 0 32px;
    border-top: 1px solid var(--sh-line); color: var(--sh-muted); font-size: .86rem;
}
.sh-footer .sh-footer__bottom p { margin: 0; }

/* ---------- Ads ---------- */

/* Every ad is marked "বিজ্ঞাপন", as the About page promises: the site's own ad slots and the ones
   Google places by itself. The mark appears with the ad, so an empty slot shows nothing. */
.banner-container:has(ins.adsbygoogle[data-ad-status="filled"])::before,
.google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"])::before {
    content: "বিজ্ঞাপন"; display: block; margin: 0 0 6px;
    color: var(--sh-muted); font-size: .78rem; font-weight: 400; line-height: 1.4; text-align: center;
}

/* ---------- Focus and phones ---------- */

/* One clear focus ring everywhere a keyboard can land: solid brand blue (5.7:1 on white). The softer
   45% blue it replaced measured about 2:1, too faint to follow (accessibility review, October 2026). */
/* Hung on the body's .sh-site class: WP Rocket's unused-CSS trimming keeps rules under .sh- (its safelist)
   but drops a bare :focus-visible, which matches nothing when the page is analysed. :where() keeps the
   specificity of a plain :focus-visible. */
:where(.sh-site) :focus-visible { outline: 3px solid var(--sh-blue); outline-offset: 2px; }
.sh-topbar :focus-visible, .sh-header :focus-visible, .sh-menu :focus-visible, .sh-footer :focus-visible, .sh-skip-link:focus-visible {
    outline: 3px solid var(--sh-blue); outline-offset: 2px;
}

@media (max-width: 575.98px) {
    /* Phones: always two fixed lines (the words, then the link), so the bar keeps its height when the
       Bangla web font replaces the fallback font. It used to wrap differently in each font, and the
       whole page jumped 15px when the font arrived (Google's "layout shift", 0.22 on every page). */
    .sh-topbar__inner { justify-content: flex-start; gap: 10px; height: 58px; min-height: 0; padding: 0 48px 0 16px; }
    .sh-topbar__msg { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; font-size: .88rem; line-height: 21px; }
    .sh-topbar__text, .sh-topbar .sh-topbar__link { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .sh-topbar .sh-topbar__link { margin-left: 0; }
    #masthead.sh-header { --sh-header-h: 64px; --sh-header-trim: 8px; }
    .sh-header__brand img { height: 28px; }
    .sh-search-panel { padding: 14px 0 18px; }
    .sh-search-panel__chips { justify-content: flex-start; }
    .sh-footer__top { padding-top: 44px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .sh-cycle__item { animation: none !important; }
    #masthead.sh-header, .sh-search-panel, .sh-menu, .sh-icon-btn, .sh-chips .sh-chip, .sh-stores .sh-store { transition: none !important; }
}

/* Example questions in the search box: each slides in from the right, holds, then slides away to the left */
@keyframes sh-hint-2 {
    0% { opacity: 0; transform: translateX(1.2em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    8.571%, 45% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    50.714%, 100% { opacity: 0; transform: translateX(-1.2em); }
}
@keyframes sh-hint-3 {
    0% { opacity: 0; transform: translateX(1.2em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    5.714%, 30% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    33.81%, 100% { opacity: 0; transform: translateX(-1.2em); }
}
@keyframes sh-hint-4 {
    0% { opacity: 0; transform: translateX(1.2em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    4.286%, 22.5% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    25.357%, 100% { opacity: 0; transform: translateX(-1.2em); }
}
@keyframes sh-hint-5 {
    0% { opacity: 0; transform: translateX(1.2em); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    3.429%, 18% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
    20.286%, 100% { opacity: 0; transform: translateX(-1.2em); }
}