/* ==========================================================================
   Component: Article Template v1.0
   Editorial header + readable article body. Deliberately does NOT reuse the
   navy internal-hero / service-page dashboard treatment - articles need a
   lighter, text-first presentation distinct from sales/service pages.
   ========================================================================== */

/* ---- Article header ---- */
.article-header{padding:44px 0 36px;background:var(--gray-100);border-bottom:1px solid var(--gray-300);}
.article-header__breadcrumb{font-size:.82rem;color:var(--gray-700);margin-bottom:16px;}
.article-header__breadcrumb a{color:var(--gray-700);text-decoration:none;transition:color .2s;}
.article-header__breadcrumb a:hover{color:var(--teal-500);}
.article-header__category{
    display:inline-block;color:var(--teal-500);font-size:.78rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px;
}
.article-header h1{
    color:var(--navy-950);font-size:2.3rem;font-weight:800;line-height:1.18;
    max-width:760px;margin-bottom:16px;
}
.article-header__deck{
    color:var(--gray-700);font-size:1.1rem;line-height:1.6;max-width:720px;margin-bottom:22px;
}
.article-header__image{
    width:100%;max-width:760px;aspect-ratio:16/9;object-fit:cover;
    border-radius:14px;margin-top:8px;display:block;
}

/* ---- Article body layout ---- */
.article-body{padding:56px 0 20px;}
.article-body__inner{max-width:760px;margin:0 auto;}

/* Table of contents - native <details>/<summary>, no JS required, works
   with keyboard out of the box. Only include on articles with 3+ H2s. */
.article-toc{
    max-width:760px;margin:0 auto 40px;background:var(--white);
    border:1px solid var(--gray-300);border-radius:12px;padding:6px 22px;
}
.article-toc summary{
    padding:14px 0;font-weight:700;color:var(--navy-950);font-size:.95rem;cursor:pointer;
    list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.article-toc summary::-webkit-details-marker{display:none;}
.article-toc summary::after{
    content:'';width:9px;height:9px;border-right:2px solid var(--teal-500);border-bottom:2px solid var(--teal-500);
    transform:rotate(45deg);transition:transform .2s ease;
}
.article-toc[open] summary::after{transform:rotate(225deg);}
.article-toc summary:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px;}
.article-toc__list{list-style:none;margin:0;padding:0 0 18px;display:grid;gap:9px;}
.article-toc__list a{color:var(--gray-700);text-decoration:none;font-size:.9rem;transition:color .2s;}
.article-toc__list a:hover,.article-toc__list a:focus-visible{color:var(--teal-500);}

/* Typography */
.article-prose{color:var(--gray-700);font-size:1.05rem;line-height:1.75;}
.article-prose h2{
    color:var(--navy-950);font-size:1.55rem;font-weight:800;line-height:1.28;
    margin:44px 0 16px;scroll-margin-top:130px;
}
.article-prose h3{
    color:var(--navy-950);font-size:1.2rem;font-weight:700;line-height:1.3;
    margin:32px 0 12px;scroll-margin-top:130px;
}
.article-prose p{margin:0 0 20px;}
.article-prose ul,.article-prose ol{margin:0 0 20px;padding-left:24px;}
.article-prose li{margin-bottom:8px;}
.article-prose a{color:var(--teal-500);text-decoration:underline;text-decoration-color:rgba(19,167,179,.35);text-underline-offset:2px;}
.article-prose a:hover,.article-prose a:focus-visible{text-decoration-color:var(--teal-500);}
.article-prose strong{color:var(--navy-950);}

.article-prose blockquote{
    margin:32px 0;padding:4px 0 4px 22px;border-left:3px solid var(--teal-500);
    color:var(--navy-950);font-size:1.15rem;font-weight:600;line-height:1.55;
}

.article-table-wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--gray-300);border-radius:10px;}
.article-prose table{width:100%;border-collapse:collapse;min-width:480px;font-size:.92rem;}
.article-prose th{
    background:var(--gray-100);color:var(--navy-950);font-weight:700;text-align:left;
    padding:12px 16px;border-bottom:2px solid var(--gray-300);white-space:nowrap;
}
.article-prose td{padding:12px 16px;border-bottom:1px solid var(--gray-300);}
.article-prose tr:last-child td{border-bottom:none;}

.article-figure{margin:32px 0;}
.article-figure img{width:100%;border-radius:12px;display:block;}
.article-figure figcaption{color:rgba(59,74,82,.75);font-size:.82rem;margin-top:10px;text-align:center;}

@media (max-width:768px){
    .article-header{padding:32px 0 28px;}
    .article-header h1{font-size:1.85rem;}
    .article-header__deck{font-size:1rem;}
    .article-body{padding:40px 0 12px;}
    .article-prose{font-size:1rem;}
    .article-prose h2{scroll-margin-top:112px;}
    .article-prose h3{scroll-margin-top:112px;}
}
@media (prefers-reduced-motion:reduce){
    .article-toc summary::after{transition:none;}
}