/* ==========================================================================
   Multifacet — shared article stylesheet
   Used by all /zh/ontario/*, /en/ontario/*, /hk/ontario/* article pages.
   Edit here once; every page linking this file picks up the change.
   ========================================================================== */

:root {
    --bg: #FAF8F4;
    --text: #232323;
    --accent: #706C63;
    --accent-dark: #17396C;
    --brand: #3A6BB0;
    --brand-tint: rgba(58,107,176,0.07);
    --border: #E7E3DA;
    --font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page { width: 100%; max-width: 720px; padding: 40px 20px 80px; }

/* ---- site header / nav ---- */
header.site-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 18px 48px; border-bottom: 1px solid var(--border); background:#fff;
}
.logo-block { display: flex; align-items: center; gap: 12px; text-decoration:none; color:inherit; }
.logo-icon { width: 40px; height: 40px; }
.logo-text-block { display: flex; flex-direction: column; line-height: 1.05; }
.logo-wordmark { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; }
.logo-tag { font-weight: 600; font-size: 8px; letter-spacing: 1.5px; color:#6B6B6B; margin-top: 2px; }
nav.site-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color:#333333; }
nav.site-nav a { text-decoration: none; color: inherit; }
.lang-switcher { position: relative; }
.lang-switcher summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-dropdown { position: absolute; top: 100%; right: 0; margin-top: 10px; background:#fff; border: 1px solid #EEEEEE; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); min-width: 140px; overflow: hidden; z-index: 10; }
.lang-dropdown a { display: block; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #333333; }
.lang-dropdown a:hover { background: #F5F8FC; color: var(--accent-dark); }

/* ---- site footer ---- */
footer.site-footer { width:100%; border-top: 1px solid var(--border); padding: 28px 48px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #8C8378; background:#fff; }
footer.site-footer nav { display:flex; gap: 20px; font-size: 13px; font-weight: 500; }
footer.site-footer a { text-decoration:none; color:inherit; }

/* ---- breadcrumb ---- */
.breadcrumb { font-size: 0.78rem; color: var(--accent); margin-bottom: 22px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; }
.breadcrumb span[aria-hidden] { margin: 0 6px; }

/* ---- article typography ---- */
article h1 {
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1.5;
    margin: 0 0 14px;
}
article p.updated {
    font-size: 0.82rem;
    color: var(--accent);
    margin: 0 0 32px;
}
article h2 {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--accent-dark);
    margin: 56px 0 20px;
    line-height: 1.55;
    display: flex;
    align-items: center;
    gap: 12px;
}
article h2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}
article p {
    font-size: 1.12rem;
    line-height: 2.0;
    margin: 0 0 22px;
    color: #333333;
}
article a { color: var(--brand); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
article a:hover { color: var(--accent-dark); }
article strong { font-style: italic; font-weight: 700; color: var(--text); }
article hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 48px 0;
}
article .closing {
    font-size: 1.12rem;
    line-height: 2.0;
    color: #333333;
}

/* Added: there was no sizing rule for inline content images at all before
   this. The .page content column is 680px (720px max-width minus 20px
   padding each side). "width: 100%" (not just max-width) is deliberate —
   max-width alone only ever shrinks an oversized image down to fit; it
   does NOT stretch an image that's naturally smaller than the column up to
   fill it, which is exactly what left a blank gap on the right the first
   time this was tried with a source photo narrower than 680px. Forcing
   width:100% makes every inserted image consistently span the full column
   regardless of its native resolution — the tradeoff is that a source
   image much smaller than 680px will look slightly soft when stretched,
   which is why the quick editor now warns at insert time if the original
   is under that width, instead of only being visible after publishing. */
article img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 28px 0;
}

/* Image + optional caption, as inserted by "插入图片" in the quick editor
   (<figure class="content-figure"><img>...<figcaption>...</figcaption></figure>).
   The figure supplies the outer spacing so the img inside isn't
   double-margined against the "article img" rule above; figcaption is
   left completely unstyled-when-empty on purpose — an uncaptioned figure
   should look identical to a bare <img>, no placeholder text baked into
   the stylesheet that could ever accidentally ship on a published page. */
.content-figure {
    margin: 28px 0;
}
.content-figure img {
    margin: 0;
}
.content-figure figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--accent);
    text-align: center;
    line-height: 1.6;
}

/* ---- "advice" callout box ---- */
article .tip-box {
    background: var(--brand-tint);
    border-left: 3px solid var(--brand);
    border-radius: 14px;
    padding: 20px 24px;
    margin: 28px 0;
}
article .tip-box .tip-label {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand);
    margin: 0 0 8px;
}
article .tip-box p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.85;
}

/* ---- byline / sources footer note ---- */
article p.byline {
    font-size: 0.82rem;
    color: var(--accent);
    margin-top: 20px;
    font-style: normal;
}

/* ---- tool cross-promo card ---- */
.tool-cta {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 22px;
    text-align: center;
    background: #fff;
    margin-top: 48px;
}
.tool-cta p.eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
}
.tool-cta h3 { font-size: 1.05rem; font-weight: 500; margin: 0 0 10px; }
.tool-cta p.desc { font-size: 0.85rem; color: var(--accent); line-height: 1.6; margin: 0 0 18px; }
.tool-cta a.btn {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.88rem;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s;
}
.tool-cta a.btn:hover { border-color: var(--accent-dark); color: var(--accent-dark); background: #f5f8fc; }

/* ---- related articles ("延伸阅读") ---- */
.related-articles {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}
.related-articles__heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-dark);
    margin: 0 0 16px;
}
.related-articles__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.related-articles__list li {
    padding-left: 18px;
    position: relative;
}
.related-articles__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}
.related-articles__list a {
    font-size: 1rem;
    color: var(--text);
    text-decoration: none;
    line-height: 1.6;
}
.related-articles__list a:hover { color: var(--brand); text-decoration: underline; }

/* ---- engagement bar: like (thumb) + favorite (heart) ---- */
.engagement-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 32px 0;
}
.engagement-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.15s;
}
.engagement-bar button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.engagement-bar button:hover:not(:disabled) { background: var(--brand-tint); color: var(--brand); }
.engagement-bar button:disabled { cursor: default; opacity: 0.6; }
.engagement-bar button.active { color: var(--brand); }
.engagement-bar button.active svg { fill: var(--brand); }
.engagement-count {
    font-size: 0.9rem;
    color: var(--accent);
    margin-right: 14px;
    min-width: 1.2em;
}
.engagement-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-dark);
    color: #fff;
    font-size: 0.88rem;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1000;
    animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---- comments ---- */
.comments__heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-dark);
    margin: 48px 0 16px;
}
.comments__list { margin-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.comment { border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.comment__meta { font-size: 0.8rem; color: var(--accent); margin-bottom: 4px; }
.comment__content { font-size: 0.98rem; line-height: 1.7; }
.comments__empty { color: var(--accent); font-size: 0.95rem; }
.comments__form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.comments__form input[type="text"],
.comments__form textarea {
    font-family: var(--font);
    font-size: 0.95rem;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    resize: vertical;
}
.comments__form button {
    align-self: flex-start;
    padding: 9px 20px;
    border-radius: 8px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font-family: var(--font);
    font-size: 0.9rem;
    cursor: pointer;
}
.comments__form button:hover { opacity: 0.9; }
.comments__note { font-size: 0.78rem; color: var(--accent); margin: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- mobile ---- */
@media (max-width: 640px) {
    header.site-header { padding: 14px 20px; flex-wrap: wrap; gap: 10px; }
    nav.site-nav { gap: 14px; font-size: 13px; flex-wrap: wrap; }
    footer.site-footer { padding: 20px; flex-direction: column; gap: 12px; }
    article h1 { font-size: 1.7rem; }
}

/* ---- header dropdown ("安省指南"), shared with article-cards.css ---- */
.nav-dropdown { position: relative; }
.nav-dropdown > button {
  font: inherit; color: #333; background: none; border: none; cursor: pointer;
  padding: 0; display: flex; align-items: center; gap: 4px;
}
.nav-dropdown > button::after { content: "▾"; font-size: 10px; color: #999; }
.nav-dropdown-panel {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px;
  z-index: 20;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel { display: block; }
.nav-dropdown-panel-inner {
  background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 10px; width: 480px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.nav-dropdown-panel-inner a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: #333; text-decoration: none; font-size: 13.5px;
}
.nav-dropdown-panel-inner a:hover { background: #f0f4fa; color: #3D66AC; }
.nav-dropdown-panel-inner .see-all {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
  border-top: 1px solid #eee; text-align: center;
  font-weight: 700; color: #3D66AC;
}