/* Modern, accessible presentation for every page.php?slug=... view. */
:root {
  --ppid-navy: #123047;
  --ppid-blue: #1d4ed8;
  --ppid-teal: #0f766e;
  --ppid-mist: #f2f7f8;
  --ppid-line: #dbe7e8;
}

body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

.modern-navbar { padding: 12px 0; background: linear-gradient(105deg, #0d3b5c, #145b8c 55%, #0f766e); }
.modern-navbar .navbar-brand { gap: 11px; font-size: 1.1rem; letter-spacing: -.02em; }
.modern-navbar .navbar-brand img { width: 38px; height: 38px; object-fit: contain; }
.modern-navbar .navbar-brand span { display: grid; }
.modern-navbar .navbar-brand small { font-size: .7rem; font-weight: 600; letter-spacing: .01em; opacity: .78; }
.modern-navbar .nav-link { font-size: .9rem; }

.page-shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 56px; }
.page-breadcrumb { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #66808c; font-size: .84rem; overflow: hidden; white-space: nowrap; }
.page-breadcrumb a { color: var(--ppid-teal); text-decoration: none; font-weight: 700; }
.page-breadcrumb a:hover { color: var(--ppid-blue); }
.page-breadcrumb > span { overflow: hidden; text-overflow: ellipsis; }
.page-breadcrumb .fa-chevron-right { font-size: .62rem; color: #9db0b8; }

.page-card { overflow: hidden; border: 1px solid rgba(202, 220, 223, .85); border-radius: 20px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 55px rgba(18, 48, 71, .1); }
.page-heading { position: relative; padding: 40px 48px 29px; color: #fff; background: linear-gradient(125deg, #103a58 0%, #145b7f 56%, #157b75 100%); }
.page-heading::after { position: absolute; right: -55px; bottom: -115px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.055), 0 0 0 58px rgba(255,255,255,.04); content: ""; }
.page-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #c6f1e9; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-heading h1 { position: relative; z-index: 1; max-width: 850px; margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.55rem); font-weight: 750; line-height: 1.18; letter-spacing: -.035em; }
.heading-rule { position: relative; z-index: 1; width: 64px; height: 4px; margin-top: 23px; border-radius: 99px; background: #5eead4; }

.isi { padding: 42px 48px 48px; color: #334e5c; font-size: 1rem; line-height: 1.85; }
.isi > :first-child { margin-top: 0; }
.isi > :last-child { margin-bottom: 0; }
.isi h1, .isi h2, .isi h3, .isi h4, .isi h5, .isi h6 { margin: 1.55em 0 .65em; color: var(--ppid-navy); font-weight: 750; line-height: 1.28; letter-spacing: -.018em; }
.isi h2 { font-size: 1.5rem; }.isi h3 { font-size: 1.25rem; }
.isi p, .isi ul, .isi ol { margin-bottom: 1.1em; }
.isi ul, .isi ol { padding-left: 1.35rem; }
.isi li + li { margin-top: .35rem; }
.isi a { color: #087970; font-weight: 650; text-decoration-color: rgba(8,121,112,.35); text-underline-offset: 3px; }
.isi a:hover { color: var(--ppid-blue); }
.isi img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border: 1px solid var(--ppid-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(18,48,71,.1); }
.isi table { display: block; width: 100%; max-width: 100%; margin: 1.4rem 0; overflow-x: auto; border: 1px solid var(--ppid-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; }
.isi th, .isi td { min-width: 110px; padding: 12px 14px; border-right: 1px solid var(--ppid-line); border-bottom: 1px solid var(--ppid-line); vertical-align: top; }
.isi th { color: var(--ppid-navy); background: #edf7f6; font-weight: 750; }.isi tr:last-child td { border-bottom: 0; }.isi th:last-child, .isi td:last-child { border-right: 0; }
.isi blockquote { margin: 1.5rem 0; padding: 14px 20px; border-left: 4px solid #2bb7a9; border-radius: 0 10px 10px 0; background: #f0faf8; color: #285568; }

.document-panel { margin: 0 48px 48px; overflow: hidden; border: 1px solid var(--ppid-line); border-radius: 14px; background: var(--ppid-mist); }
.document-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; color: var(--ppid-navy); font-weight: 750; }
.document-panel__head > div { display: flex; align-items: center; gap: 10px; }.document-panel__head .fa-file-pdf { color: #d74949; font-size: 1.2rem; }
.pdf-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 8px; color: #fff; background: var(--ppid-teal); font-size: .86rem; text-decoration: none; transition: transform .2s ease, background .2s ease; }.pdf-link:hover { color: #fff; background: var(--ppid-blue); transform: translateY(-1px); }
.pdf-container { position: relative; width: 100%; height: min(68vh, 740px); background: #fff; }.pdf-container iframe { width: 100%; height: 100%; border: 0; }

.footer { margin: 0; padding: 24px 16px; border: 0; background: #0b2e43; color: #c8dde2; text-align: left; }.footer__inner { display: flex; align-items: center; width: min(1160px, 100%); margin: auto; gap: 13px; }.footer img { width: 38px; height: 38px; object-fit: contain; }.footer__inner div { display: grid; gap: 2px; }.footer strong { color: #fff; font-size: .9rem; }.footer span, .footer p { margin: 0; font-size: .76rem; }.footer p { margin-left: auto; }

@media (max-width: 767.98px) { .page-shell { width: min(100% - 22px, 1160px); padding: 22px 0 36px; }.page-heading { padding: 29px 23px 24px; }.isi { padding: 28px 23px 32px; font-size: .96rem; }.document-panel { margin: 0 23px 30px; }.document-panel__head { align-items: flex-start; flex-direction: column; }.pdf-container { height: 58vh; min-height: 360px; }.footer__inner { align-items: flex-start; }.footer p { margin: 4px 0 0; }.footer__inner { flex-wrap: wrap; }.footer__inner div { flex: 1; min-width: 210px; } }