/* ============================================================================
   public-tidy.css (V25): the public website, cleaner and phone-friendly

   Loaded last on every public page (includes/nav.php). Same theme, colours,
   fonts and images as before; this only tightens spacing, keeps panels in
   tidy grids, folds long text behind "Read more", and fixes phone layouts.
   ============================================================================ */

/* ── Spacing: sections breathe without feeling empty ──────────────────── */
.section{ padding:64px 0; }
.section .mb-5{ margin-bottom:2rem !important; }
.section-title{ margin-bottom:8px; }
.section-lead{ max-width:560px; }
.hero{ min-height:auto; padding:72px 0 56px; }
.page-hero, section.hero.page-hero{ padding:64px 0 48px; }
.hero-lead{ margin-bottom:28px; }
.hero-cta{ margin-bottom:0; }

/* "How to apply" cards on the dark band: the shared card surface made them
   white with white text. Keep them glassy so the text shows. */
.how-section .step-card{ background:rgba(255,255,255,.08) !important; box-shadow:none !important; }
.how-section .step-card:hover{ background:rgba(255,255,255,.14) !important; }
.how-section .step-title{ color:#fff; }
.how-section .step-desc{ color:rgba(255,255,255,.75); opacity:1; }
.how-section .step-num{ color:rgba(109,213,166,.55); }

/* ── Short text: long paragraphs stop at 2–3 lines ────────────────────── */
.prog-cat-desc, .news-excerpt, .testimonial-text, .step-desc, .sdc-desc, .flow-step-d, .tl-step-d,
.soc-card-desc, .hc-desc, .ov-text, .dd-body p{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
.prog-cat-desc, .step-desc, .sdc-desc, .soc-card-desc, .hc-desc{ -webkit-line-clamp:2; }
.news-excerpt, .testimonial-text, .flow-step-d, .tl-step-d{ -webkit-line-clamp:3; }
.ov-text{ -webkit-line-clamp:5; }
.pub-open .ov-text, .pub-open .tl-step-d, .pub-open .flow-step-d, .pub-open .sdc-desc{ -webkit-line-clamp:unset; display:block; }

/* "Read more" that opens in place */
.pub-more{ margin-top:12px; }
.pub-more > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--green, #1a6e4e); }
.pub-more > summary::-webkit-details-marker{ display:none; }
.pub-more > summary > i{ font-size:11px; transition:transform .2s; }
.pub-more[open] > summary > i{ transform:rotate(180deg); }
.pub-more[open] > summary{ margin-bottom:10px; }
.pub-clamp-btn{ background:none; border:none; padding:0; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--green, #1a6e4e); cursor:pointer; }

/* ── History: one tidy row per milestone, details on tap ──────────────── */
.pub-tl{ max-width:820px; padding-left:0; display:grid; gap:8px; }
.pub-tl::before{ display:none; }
.pub-tl .dswd-tl-item{ display:block; padding:0; background:var(--bg, #f4f6f9); border-radius:12px; }
.pub-tl .dswd-tl-item::before{ display:none; }
.pub-tl .dswd-tl-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:12px 16px; }
.pub-tl .dswd-tl-item > summary::-webkit-details-marker{ display:none; }
.pub-tl .dswd-tl-year{ flex:0 0 52px; text-align:left; padding:0; font-size:1rem; }
.pub-tl .dswd-tl-title{ flex:1; margin:0; font-size:14px; }
.pub-tl .dswd-tl-item > summary i{ color:#94a3b8; font-size:12px; transition:transform .2s; }
.pub-tl .dswd-tl-item[open] > summary i{ transform:rotate(180deg); }
.pub-tl .dswd-tl-desc{ padding:0 16px 14px 84px; margin:0; }
.pub-tl .dswd-tl-item[data-more]{ display:none; }
.pub-tl.all .dswd-tl-item[data-more]{ display:block; }
.pub-tl-more{ justify-self:center; margin-top:6px; background:#fff; border:1.5px solid var(--border, #dde3ed); color:var(--navy, #0b2545); font-weight:700; font-size:13px; border-radius:999px; padding:9px 20px; cursor:pointer; }
.pub-tl-more:hover{ border-color:var(--green, #1a6e4e); color:var(--green, #1a6e4e); }

/* ── Attached agencies title (its class name is shared with the staff header) */
.dswd-agencies .ag-title{ display:block; text-align:center; font-size:1.5rem; margin:0 0 22px; }

/* ── Footer app button: Android only ──────────────────────────────────── */
.footer-app-btns a{ min-width:150px; }

/* ── Phones and small tablets ─────────────────────────────────────────── */
@media (max-width: 991px){
  .site-nav .container{ row-gap:10px; }
  .nav-links.open{ background:#fff; border-radius:14px; padding:6px; box-shadow:0 12px 30px rgba(11,37,69,.12); }
  .nav-links.open .nav-item{ width:100%; padding:11px 14px; font-size:14.5px; }
  .nav-actions.open{ gap:8px; }
  .nav-actions.open .btn-nav{ flex:1 1 calc(50% - 4px); text-align:center; justify-content:center; display:inline-flex; align-items:center; padding:11px 12px; font-size:13.5px; }
}

@media (max-width: 767px){
  .section{ padding:44px 0; }
  .section .mb-5{ margin-bottom:1.4rem !important; }
  .section-title{ font-size:1.6rem; }
  .section-lead{ font-size:.95rem; }
  .hero, .page-hero, section.hero.page-hero{ padding:40px 0 36px; }
  .hero h1{ font-size:2rem; }
  .hero-lead{ font-size:.98rem; line-height:1.65; margin-bottom:22px; }
  .hero-eyebrow{ font-size:10.5px; padding:5px 12px; margin-bottom:16px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta > a, .hero-cta > button{ justify-content:center; width:100%; }

  /* the five programme tiles in the hero: a compact two-column grid */
  .hero-programs-mini{ grid-template-columns:1fr 1fr !important; gap:8px; margin-top:4px; }
  .hero-programs-mini > .hero-card-float{ padding:12px; display:flex !important; align-items:center; gap:10px; border-radius:12px; }
  .hero-programs-mini > .hero-card-float:last-child:nth-child(odd){ grid-column:1 / -1; }
  .hero-programs-mini .hero-float-icon{ width:36px; height:36px; font-size:.95rem; margin:0 !important; flex:0 0 auto; border-radius:10px; }
  .hero-programs-mini .hero-card-title{ font-size:13px; margin:0; }
  .hero-programs-mini .hero-card-sub{ display:none; }

  .impact-ticker{ padding:10px 0; }
  .ticker-item{ font-size:12px; }

  /* small cards two to a row */
  .offices-section .row > [class*="col-"], .partners-section .row > [class*="col-"]{ width:50%; flex:0 0 50%; }
  .offices-section .row > .oc-main-col{ width:100%; flex:0 0 100%; }
  .office-card{ padding:14px; }
  .office-province{ font-size:12.5px; }
  .office-address, .office-phone{ font-size:11.5px; }
  .partner-logo{ padding:10px; height:auto; min-height:64px; }
  .prog-cat-top{ padding:20px 18px 14px; }
  .prog-cat-footer{ padding:10px 18px; }
  .step-card{ padding:20px 18px; }
  .step-num{ font-size:1.8rem; margin-bottom:6px; }
  .news-img{ height:160px; }
  .testimonial-card{ padding:20px; }

  /* programme cards: icon beside the name, one line of text */
  .prog-overview .row.g-4{ --bs-gutter-y:.7rem; }
  .prog-cat-card .prog-cat-top{ display:grid; grid-template-columns:48px 1fr; column-gap:14px; align-items:center; padding:14px 16px !important; }
  .prog-cat-card .prog-cat-icon{ grid-row:span 2; width:48px; height:48px; font-size:1.15rem; margin:0; }
  .prog-cat-card .prog-cat-name{ margin:0; }
  .prog-cat-card .prog-cat-desc{ margin:0; font-size:12.5px; }
  .prog-cat-card .prog-cat-top > div:last-child{ display:none; }
  .prog-cat-card .prog-cat-footer{ display:none; }

  /* core values: icon beside the words */
  #mission-vision .row.g-4 > .col-md-4 > div{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; padding:16px !important; }
  #mission-vision .row.g-4 > .col-md-4 > div > div:first-child{ grid-row:span 3; width:44px !important; height:44px !important; margin:0 !important; }
  #mission-vision .row.g-4 > .col-md-4 > div > div:nth-child(3){ margin-bottom:4px !important; }
  #mission-vision .row.g-4 > .col-lg-6 > div{ padding:24px 20px !important; }

  /* how to apply: number, icon and title on one line */
  .how-section .step-card{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:16px !important; }
  .how-section .step-card .step-num{ grid-row:span 2; font-size:1.6rem; margin:0; }
  .how-section .step-card .step-icon{ display:none; }
  .how-section .step-card .step-title{ margin:0; font-size:1rem; }
  .how-section .step-card .step-desc{ grid-column:2; font-size:12.5px; }
  .how-section .row.g-4{ --bs-gutter-y:.7rem; }
  .how-section .row.mt-5{ margin-top:1.4rem !important; }
  .how-section .row.mt-5 .col-12 > div{ flex-direction:column; align-items:flex-start !important; gap:12px !important; padding:18px !important; }
  .how-section .row.mt-5 .col-12 > div > i{ display:none; }

  .pub-tl .dswd-tl-desc{ padding-left:16px; }
  .pub-tl .dswd-tl-item > summary{ gap:10px; padding:11px 12px; }

  /* footer: two columns, tighter */
  .site-footer{ padding-top:44px; }
  .site-footer .row.g-5{ --bs-gutter-y:1.6rem; }
  .site-footer .col-md-4{ width:50%; flex:0 0 50%; }
  .site-footer .col-lg-3.col-md-4:last-child{ width:100%; flex:0 0 100%; }
  .footer-desc{ margin:12px 0; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .dswd-agencies .row > [class*="col-"]{ width:50%; flex:0 0 50%; }

  /* long tables and wide blocks scroll inside their box, never the page */
  .table-responsive, .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Bootstrap's widest gutter is wider than a phone's side padding */
  .row.g-5{ --bs-gutter-x:1.5rem; }

  /* How it works: small step number beside the title, detail cards as rows */
  .big-step{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; margin-bottom:34px; }
  .big-step-num{ width:44px; height:44px; border-radius:13px; font-size:1.25rem; }
  .big-step-line{ left:21px; top:44px; bottom:-34px; }
  .big-step-content{ padding-top:4px; min-width:0; }
  .big-step-title{ font-size:1.12rem; margin-bottom:4px; }
  .big-step-sub{ font-size:13px; margin-bottom:12px; }
  .step-detail-grid{ grid-template-columns:minmax(0,1fr); gap:8px; margin-top:10px; }
  .step-detail-card{ display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:12px; align-items:center; padding:12px; }
  .step-detail-card .sdc-icon{ grid-row:span 2; width:34px; height:34px; margin:0; font-size:.85rem; }
  .step-detail-card .sdc-title{ margin:0; }
  .step-tip{ padding:11px 14px; margin-top:10px; font-size:12.5px; }
  .pfa-header{ padding:14px 16px; }
  .pfa-content{ padding:16px; }
}

@media (max-width: 400px){
  .hero h1{ font-size:1.8rem; }
  .nav-actions.open .btn-nav{ flex:1 1 100%; }
}

/* Nothing on a public page may make the page itself scroll sideways. */
html, body{ overflow-x:hidden; }
img, video, iframe{ max-width:100%; }

/* ── Contact page on phones: hotlines and social pages two to a row ───── */
@media (max-width: 767px){
  .pub-2up{ --bs-gutter-x:.6rem; --bs-gutter-y:.6rem; }
  .pub-2up > [class*="col-"]{ width:50%; flex:0 0 50%; }
  .pub-2up .hotline-card{ padding:14px 10px; height:100%; }
  .pub-2up .hotline-card .hc-icon{ width:38px; height:38px; font-size:1rem; margin-bottom:8px; border-radius:10px; }
  .pub-2up .hotline-card .hc-type{ font-size:9.5px; letter-spacing:.06em; }
  .pub-2up .hotline-card .hc-num{ font-size:1.02rem; line-height:1.3; }
  .pub-2up .hotline-card .hc-desc{ font-size:11.5px; }
  .pub-2up .soc-card{ padding:16px 10px; }
  .pub-2up .soc-card-icon{ width:46px; height:46px; font-size:1.25rem; margin-bottom:10px; border-radius:13px; }
  .pub-2up .soc-card-handle{ font-size:12px; margin-bottom:10px; word-break:break-word; }
  .pub-2up .soc-card-btn{ width:100%; justify-content:center; padding:8px 8px; font-size:12px; }
  .pub-2up .soc-followers{ font-size:11px; }
}

/* ── News & Announcements ─────────────────────────────────────────────── */
.news-item.is-folded{ display:none !important; }
.month-more{ display:block; margin:16px auto 0; background:#fff; border:1.5px solid var(--border, #dde3ed); color:var(--navy, #0b2545); font-weight:700; font-size:13px; border-radius:999px; padding:9px 20px; cursor:pointer; }
.month-more:hover{ border-color:var(--green, #1a6e4e); color:var(--green, #1a6e4e); }
.ann-excerpt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ann-item.can-open{ cursor:pointer; }
.ann-item.pub-open .ann-excerpt{ display:block; -webkit-line-clamp:unset; }
.ann-more{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--green, #1a6e4e); }
.ann-more i{ font-size:10px; }
.pub-fold{ margin-top:36px; background:var(--surface, #fff); border:1px solid var(--border, #dde3ed); border-radius:12px; }
.pub-fold > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; margin:0 !important; padding:14px 18px; }
.pub-fold > summary::-webkit-details-marker{ display:none; }
.pub-fold-n{ margin-left:auto; font-size:11.5px; font-weight:800; color:var(--muted, #64748b); background:var(--bg, #f4f6f9); border-radius:999px; padding:2px 10px; }
.pub-fold > summary > i{ font-size:12px; color:#94a3b8; transition:transform .2s; }
.pub-fold[open] > summary > i{ transform:rotate(180deg); }
.pub-fold .adv-table-wrap{ border:none; border-top:1px solid var(--border, #dde3ed); border-radius:0 0 12px 12px; }
.event-note{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
@media (min-width: 768px){ .album-more.few{ display:none; } }

@media (max-width: 767px){
  /* news: a thumbnail beside the headline; the whole card opens the story */
  .month-block{ margin-bottom:28px; }
  .month-head{ margin-bottom:12px; gap:10px; }
  .month-block .row.g-4{ --bs-gutter-y:.6rem; }
  .news-item .news-card{ display:grid; grid-template-columns:112px minmax(0,1fr); position:relative; }
  .news-item .news-img{ height:auto; min-height:100px; grid-row:1 / span 2; }
  .news-item .news-body{ padding:12px 14px; }
  .news-item .news-cat{ font-size:9.5px; padding:2px 8px; }
  .news-item .news-title{ font-size:13.5px; margin:6px 0 4px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .news-item .news-meta{ margin:0; font-size:11.5px; }
  .news-item .news-meta span + span{ display:none; }
  .news-item .news-excerpt{ display:none; }
  .news-item .news-footer{ padding:0; border:0; background:none; }
  .news-item .read-more{ position:absolute; inset:0; font-size:0; color:transparent; z-index:2; }
  .news-item .read-more:focus-visible{ outline:2px solid var(--green, #1a6e4e); outline-offset:2px; }
  .ann-item{ padding:14px 16px; }
  .pub-fold > summary{ padding:12px 14px; font-size:1rem; }
  .event-block{ padding:16px 18px; }
  /* photo albums: three across, six shown */
  .album{ padding:16px; border-radius:14px; margin-bottom:16px; }
  .album-head{ margin-bottom:12px; gap:8px; }
  .album-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
  .album-grid:not(.is-open) .album-thumb.is-extra-sm{ display:none; }
}

/* ── How it works on phones: document lists open on tap ───────────────── */
@media (max-width: 767px){
  .req-section .row.g-4{ --bs-gutter-y:.6rem; }
  .req-card.can-fold .req-card-head{ position:relative; cursor:pointer; padding:14px 44px 14px 18px; }
  .req-card.can-fold .req-chev{ position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:12px; opacity:.85; transition:transform .2s; }
  .req-card.can-fold.open .req-chev{ transform:translateY(-50%) rotate(180deg); }
  .req-card.can-fold .req-card-body{ display:none; padding:12px 18px; }
  .req-card.can-fold.open .req-card-body{ display:block; }
}

/* ── Programs on phones: badge and button on one line, the name below ─── */
@media (max-width: 767px){
  .container .cat-section{ padding:22px 0; }
  .cat-section .cat-header{ padding:18px 20px; margin-bottom:14px; border-radius:14px; }
  .cat-section .cat-h-icon{ width:44px; height:44px; font-size:1.15rem; margin-bottom:10px; border-radius:12px; }
  .cat-section .cat-h-title{ font-size:1.3rem; }
  .cat-section .prog-card{ margin-bottom:12px; }
  .prog-card .prog-header{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; padding:16px 18px; }
  .prog-card .prog-acronym{ justify-self:start; }
  .prog-card .prog-collapse-btn{ grid-column:2; grid-row:1; }
  .prog-card .prog-header-text{ grid-column:1 / -1; }
  .prog-card .prog-title{ font-size:1.05rem; }
  .prog-card .prog-tagline{ font-size:12.5px; }
  .prog-card .prog-tabs{ overflow-x:auto; scrollbar-width:none; }
  .prog-card .prog-tabs::-webkit-scrollbar{ display:none; }
  .prog-card .prog-tab{ white-space:nowrap; padding:10px 14px; }
}

/* ── Home page news on phones: thumbnail beside the headline ──────────── */
@media (max-width: 767px){
  .home-news{ --bs-gutter-y:.6rem; }
  .home-news .news-card{ display:grid; grid-template-columns:104px minmax(0,1fr); }
  .home-news .news-img{ height:auto; min-height:96px; font-size:1.5rem; }
  .home-news .news-body{ padding:12px 14px; }
  .home-news .news-cat{ font-size:9.5px; padding:2px 8px; }
  .home-news .news-title{ font-size:13.5px; margin:6px 0 4px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .home-news .news-date{ font-size:11.5px; }
  .home-news .news-excerpt{ display:none; }
}