/* ==========================================================================
   POLICY TEMPLATE (findings 23 and 43)
   Linked after css/style.css by the six pages/policies/*.html pages. style.css has
   no policy rules except .policy-table, so this file is the whole template.

   The admin editor replaces the contents of div.policy-html and may only write bare
   elements (p, ul, ol, li, h2, h3, strong, a, table). Nothing inside .policy-html
   may depend on a class.

   Line length: the brief asked for 72ch, but ch is the width of a zero, which is about
   a third wider than the average letter, so 72ch measured 94 characters on the densest
   line in Segoe UI (Playwright, 1440px). 60ch measures 78, inside the 80 character limit.
   ========================================================================== */

/* One reading column for the title, the meta lines, the text and the related links. */
.policy-header,
.policy-content,
.related-policies {
    max-width: 60ch;
    margin-inline: auto;
}

/* ---- Header ---- */
.policy-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.policy-header h1 {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.policy-meta p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light, #6b7280);
}

/* ---- Body text: one scale for every policy ---- */
.policy-html {
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.policy-html p {
    margin: 0 0 1rem;
    line-height: 1.6;
}

.policy-html h2,
.policy-html h3 {
    color: var(--text-primary, #1f2937);
    line-height: 1.3;
    text-wrap: balance;
}

.policy-html h2 {
    font-size: 1.5rem;
    margin: 2.25rem 0 0.75rem;
}

.policy-html h3 {
    font-size: 1.2rem;
    margin: 1.75rem 0 0.5rem;
}

.policy-html > :first-child {
    margin-top: 0;
}

.policy-html strong {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.policy-html a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ---- Lists: bullets stay inside the content box, no 42px gaps between one-word items ---- */
.policy-html ul,
.policy-html ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.policy-html ul {
    list-style: disc outside;
}

.policy-html ol {
    list-style: decimal outside;
}

.policy-html li {
    color: var(--text-secondary, #4b5563);
}

.policy-html li + li {
    margin-top: 0.35rem;
}

.policy-html li > p {
    margin: 0;
}

.policy-html li > ul,
.policy-html li > ol {
    margin: 0.35rem 0 0;
}

/* ---- Tables (the cancellation fee table keeps its own rules in style.css) ---- */
.policy-html table {
    max-width: 100%;
}

@media (max-width: 480px) {
    /* Finding 43: the header row no longer breaks mid-word. The table stays its own
       horizontal scroller (style.css makes it display:block with overflow-x:auto at 600px). */
    .policy-html .policy-table th,
    .policy-html .policy-table td {
        padding: 0.5rem;
    }

    .policy-html .policy-table th {
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* ---- Related policies ---- */
.related-policies {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.related-policies h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.policy-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--text-primary, #1f2937);
    font-weight: 500;
    line-height: 1.4;
}

.policy-link:hover,
.policy-link:focus-visible {
    border-color: var(--color-primary, #F89521);
    color: var(--text-primary, #1f2937);
}