/* =====================================================================
   The two documents nobody reads until they need to.

   Shared by privacy.html and terms.html. Deliberately NOT the landing
   page's stylesheet: that page is a case being made - blobs, stat chips,
   a hero - and this is a reference document a parent may be reading on a
   phone because they are worried about something. The palette carries
   over so it is recognisably the same programme; the layout does not.

   One column, 34rem of measure, generous leading, and headings that can
   be scanned. No animation: there is nothing here to delight anybody
   with.
   ===================================================================== */

:root {
    --orange:      #F08A0C;
    --orange-soft: #FBE3C0;
    --orange-ink:  #A85400;   /* orange you are allowed to read - the fill
                                 measures 2.39:1 on the page ground */
    --blue:        #0038A8;
    --ink:         #141414;
    --muted:       #4A4740;
    --rule:        #E4E0D8;
    --white:       #FFFFFF;
    --ground:      #FAF9F7;
    --cream:       #FDF3E3;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

.wrap {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---- the bar back to the site ---------------------------------------- */
.topbar {
    border-bottom: 1px solid var(--rule);
    background: var(--white);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    flex-wrap: wrap;
}

/* The same logo as the landing page (4 October 2026): the RCOF sun over an
   open book, beside the name and the programme. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    text-decoration: none;
    color: #0F2B5B;
}

.brand .mark {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 0.55rem;
    box-shadow: 0 1px 0 rgba(15, 43, 91, .25), 0 8px 16px -10px rgba(15, 43, 91, .7);
}

.brand .word { display: flex; flex-direction: column; }
.brand .name { font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.brand .name i { font-weight: 600; }
.brand .sub {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--orange-ink);
    margin-top: 0.15rem;
}

.topbar nav {
    display: flex;
    gap: 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.topbar nav a {
    color: var(--muted);
    text-decoration: none;
    padding-block: 0.4rem;   /* a 44px-tall target without a visible box */
}

/* "Back to the panel", shown only to staff who came from the panel
   (legal.js): the panel's blue, so it reads as the way out of the public
   site rather than one more page of it. */
.topbar nav a.to-panel { color: var(--blue); white-space: nowrap; }

/* On a narrow screen it takes a row of its own above the other three, rather
   than breaking over two lines or pushing Terms onto a row alone. */
@media (max-width: 30rem) {
    .topbar nav { flex-wrap: wrap; row-gap: 0; }
    .topbar nav a.to-panel { flex-basis: 100%; }
}

.topbar nav a:hover,
.topbar nav a[aria-current] { color: var(--orange-ink); }

/* Hidden means hidden, whatever display a rule above gives the element. */
[hidden] { display: none !important; }

/* ---- the document ---------------------------------------------------- */
main { padding-block: 3rem 5rem; }

/* No heading ends on a lone word, and no paragraph on one either - the same
   rules the landing page uses. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

h1 {
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.dateline {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 2rem;
}

h2 {
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    margin: 3rem 0 0.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}

h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2rem; }

h3 {
    font-size: 1.05rem;
    margin: 2rem 0 0.5rem;
}

p, li { color: var(--muted); }
p { margin: 0 0 1.1rem; }

/* Set like the printed paper, as the landing page is (4 October 2026):
   justified, hyphenated, each paragraph indented. Not the date line, the
   callout's label, or anything in a table or the footer. */
main p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-indent: 2em; }
main .dateline, main .notice p, main td p, main th p { text-indent: 0; }
main .dateline { text-align: left; }

strong { color: var(--ink); }

a { color: var(--orange-ink); }

ul, ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.5rem; }

/* ---- the callout that says this is not signed off yet ----------------- */
.notice {
    background: var(--cream);
    border: 1px solid var(--orange-soft);
    border-left: 4px solid var(--orange);
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin: 0 0 2.5rem;
}

.notice p:last-child { margin-bottom: 0; }

.notice .label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange-ink);
    margin-bottom: 0.4rem;
}

/* ---- what is actually held ------------------------------------------- */
.table-scroll {
    overflow-x: auto;
    margin: 0 0 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--white);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

th, td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

th {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--ground);
}

tbody tr:last-child td { border-bottom: 0; }
td { color: var(--muted); }
td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* ---- who to write to -------------------------------------------------- */
.contact {
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.contact p:last-child { margin-bottom: 0; }

/* An address block, not a paragraph of the paper: no indent, ragged right.
   The longest address is wider than a 320px phone, so it may break. */
main .contact p { text-indent: 0; text-align: left; }
.contact a { overflow-wrap: anywhere; }

footer {
    border-top: 1px solid var(--rule);
    background: var(--white);
    padding-block: 2rem;
    font-size: 0.9rem;
}

footer p { margin: 0 0 0.5rem; }
footer p:last-child { margin-bottom: 0; }

/* ---- back to the top (4 October 2026) ---------------------------------
   The landing page's round button, here instead: on these pages the logo
   goes to the landing page, so a long document had no quick way back up.
   Navy like the logo's square, with a cream arrow and a cream edge so it
   stays distinct over text. A link to #top - no script on these pages.

   Where the browser can tie an animation to scrolling, it fades in over the
   first screen of scroll and is not there (nor reachable by Tab) at the top,
   where it would be clutter. Where it cannot (Firefox today), it is simply
   always there. Fixed to the corner, over the text as it scrolls past - the
   same trade every back-to-top button makes; 3rem is a full thumb target. */
html { scroll-behavior: smooth; }

.to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #0F2B5B;
    color: #FFF8E7;
    border: 2px solid #FFF8E7;
    box-shadow: 0 1px 0 rgba(15, 43, 91, .35), 0 12px 24px -12px rgba(15, 43, 91, .8);
    transition: background-color .16s ease, transform .12s ease;
}
.to-top svg { width: 1.4rem; height: 1.4rem; }
.to-top:active { transform: scale(.94); }
.to-top:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .to-top:hover { background: #1E4D8C; }
}
@media (max-width: 30rem) {
    .to-top { width: 3rem; height: 3rem; }
}
/* At the very end of the page on a phone, the footer's last line - the
   DepEd.gov.ph link, at 320px - sat under the button. Room below it. */
@media (max-width: 47.99rem) {
    footer { padding-bottom: 5.5rem; }
}

@supports (animation-timeline: scroll()) {
    .to-top {
        opacity: 0;
        visibility: hidden;
        animation: to-top-in linear both;
        animation-timeline: scroll(root);
        animation-range: 30vh 70vh;
    }
    @keyframes to-top-in {
        to { opacity: 1; visibility: visible; }
    }
}

@media print {
    .to-top { display: none; }
}

/* Nothing else here animates, so there is little to turn off - but the
   rule is kept so anything added later inherits it rather than being
   forgotten. The button's fade follows the scroll, not the clock, so it
   is unaffected; the smooth jump to the top is not. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}