/* HDmall upgrade layer (2026-09) — loaded last on every page by the build.
   Brand font, app banners, header "โหลดแอป" link, site footer, evergreen sign text. */

/* LINE Seed Sans TH (same as /hdcare/, /health-tools/, /plants-herbs/) — SIL Open Font License */
@font-face { font-family: 'LINE Seed Sans TH'; src: url('../fonts/LINESeedSansTH_W_Rg.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'LINE Seed Sans TH'; src: url('../fonts/LINESeedSansTH_W_Bd.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
body, button, input, select, textarea {
    font-family: 'LINE Seed Sans TH', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Thai', sans-serif;
}

/* ---- App banners ---- */
.hdm-banner { margin: 24px 0; text-align: center; }
.hdm-banner a { display: block; width: var(--hdm-banner-width, 100%); margin: 0 auto; }
.hdm-banner img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* ---- Header "โหลดแอป" link (added as the header bar's last child) ----
   The site's headers are position: fixed, which already anchors this absolutely-positioned link.
   (Don't change the headers' position — the floating tab menus are placed relative to them.) */
.hdm-header-cta {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 4px;
    color: #338BFF; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; z-index: 2;
}
.hdm-header-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Pages whose header already has a share button on the right: sit just left of it, short label */
.hdm-cta-short { display: none; }
.header:has(.share-btn) .hdm-header-cta,
.header-bar:has(.share-button) .hdm-header-cta { right: 60px; }
.header:has(.share-btn) .hdm-cta-long,
.header-bar:has(.share-button) .hdm-cta-long { display: none; }
.header:has(.share-btn) .hdm-cta-short,
.header-bar:has(.share-button) .hdm-cta-short { display: inline; }

/* ---- Evergreen sign text on horoscope pages ---- */
.hdm-evergreen { margin: 24px 0; line-height: 1.7; color: #333; }
.hdm-evergreen h2 { font-size: 20px; margin: 24px 0 8px; }
.hdm-evergreen h3 { font-size: 16px; margin: 16px 0 4px; }
.hdm-evergreen p { margin: 0 0 12px; color: #555; }
.hdm-evergreen ul { margin: 0 0 12px; padding-left: 20px; color: #555; }
.hdm-evergreen a { color: #338BFF; font-weight: 700; text-decoration: none; }

/* ---- Site footer ---- */
.hdm-site-footer { max-width: 480px; margin: 32px auto 0; padding: 20px 16px 120px; border-top: 1px solid #E5E5E5; }
.hdm-site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.hdm-site-footer a { font-size: 14px; font-weight: 700; color: #338BFF; text-decoration: none; }
.hdm-site-footer p { font-size: 12px; color: #999; line-height: 1.6; margin: 0; }

/* ---- 404 ---- */
.hdm-404 { max-width: 480px; margin: 80px auto; padding: 0 16px; text-align: center; }
.hdm-404 a { color: #338BFF; font-weight: 700; }