/*
 * Visual refinement of the public ministry website.
 * Navigation, URLs, text, photographs, CMS and editor scripts are unchanged.
 * All colours derive from the existing ministry palette in portal.css.
 */

:root {
  --surface-shadow: 0 8px 30px #233c5508;
  --surface-hover: 0 16px 34px #233c5512;
}

body { background: var(--wash); }
.site-header { background: white; }
.masthead { min-height: 130px; }
.brand-wordmark strong { letter-spacing: -.035em; }
.header-service { background: #f3f8fa; border-color: #d5e4eb; }

/* The six original tabs retain their order, labels and destinations. */
.nav-line { background: var(--blue); border-color: var(--blue); }
.primary-nav > a,
.nav-office summary { color: white; }
.primary-nav > a:hover,
.nav-office summary:hover,
.nav-office[open] summary { color: var(--cream); }
.primary-nav > a[aria-current="page"] { color: white; }
.primary-nav > a[aria-current="page"]::after { background: var(--sky); height: 3px; }
.primary-nav a:focus-visible,
.nav-office summary:focus-visible { outline-color: var(--cream); }
.nav-office-list {
  border: 1px solid #d4e2e9;
  border-top: 3px solid var(--sky);
  border-radius: 0 0 10px 10px;
  padding: 10px;
  box-shadow: 0 18px 40px #233c5520;
}
.nav-office-list > a { color: var(--navy); padding-inline: 16px; }
.nav-office-list > a:hover { background: #edf5f9; }
.nav-office-list a:focus-visible { outline-color: var(--blue); }
.menu-toggle { color: var(--blue); border-color: #b8cfdb; }

/* Government portal entrance, using the same content and images. */
.hero {
  background: radial-gradient(ellipse at 85% 0, #30708d44, transparent 58%), var(--navy);
}
.hero::before {
  border-color: #a7cee126;
  box-shadow: 0 0 0 24px #a7cee106, 0 0 0 48px #a7cee106, 0 0 0 72px #a7cee106;
}
.hero-grid { gap: 60px; padding-block: 46px 68px; }
.hero-copy h1 { font-size: clamp(2.1rem, 3.3vw, 3.2rem); line-height: 1.65; }
.hero-description { max-width: 480px; font-size: 1.02rem; line-height: 2.15; }
.hero .eyebrow { letter-spacing: .015em; }
.hero-feature {
  padding: 10px;
  background: #ffffff0b;
  border: 1px solid #a7cee140;
  border-radius: 15px;
}
.feature-card { border-radius: 8px; box-shadow: 0 12px 38px #0d263a24; }
.feature-media { background: #eaf0f4; height: 285px; }
.feature-content { padding: 22px 26px 24px; }
.feature-content h2 { font-size: 1.13rem; line-height: 1.95; }
.feature-content .read-link { margin-top: 16px; }
.hero-actions .button { border-radius: 6px; line-height: 1.8; max-width: 100%; }
.hero-link { border-color: #a7cee166; }
.quick-services {
  border-radius: 10px;
  border-top: 3px solid var(--sky);
  box-shadow: 0 10px 35px #233c550d;
  margin-top: -25px;
}
.quick-services .quick-intro h2 { color: var(--navy); font-size: 1.25rem; }
.quick-services > a { min-height: 104px; }
.quick-services strong { font-size: .88rem; line-height: 1.95; }
.quick-services > a:hover { background: #f0f7fa; }
.section-heading { margin-bottom: 30px; }
.section-heading h2 { position: relative; padding-bottom: 12px; }
.section-heading h2::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue);
}
.news-actions { column-gap: 28px; }
.vision-band { background: #edf3f7; border-color: #dce7ed; }
.vision-grid { padding-block: 64px; }
.vision-grid h2 { font-size: 2rem; }
.minister-message { border-inline-start-color: #ccdce6; }
.minister-message blockquote { font-size: .96rem; }
.minister-message a { margin-inline-end: 12px; }

/* Shared interior title panels. The decorative geometry is CSS only. */
body:not([data-page="home"]) #main { min-height: 55vh; }
#page-content.section { padding-block: 24px 72px; }
.breadcrumb {
  font-size: .8rem;
  min-height: 28px;
  margin-bottom: 16px;
  gap: 12px;
  line-height: 1.9;
}
.breadcrumb a { font-weight: 700; color: var(--blue); }
.page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: white;
  border-radius: 12px;
  border-inline-start: 5px solid var(--sky);
  padding: 26px 34px 28px;
  margin-bottom: 28px;
}
.page-intro::before,
.page-heading::before {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  inset-inline-end: -120px;
  top: -150px;
  transform: rotate(45deg);
  border: 1px solid #a7cee128;
  box-shadow: 0 0 0 25px #a7cee108, 0 0 0 50px #a7cee108, 0 0 0 75px #a7cee108;
  z-index: -1;
  pointer-events: none;
}
.page-intro h1 { color: white; font-size: clamp(1.8rem, 2.8vw, 2.2rem); line-height: 1.55; }
.page-intro .eyebrow { color: var(--sky); font-size: .76rem; margin-bottom: 6px; }
.page-intro .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--sky); }
.page-intro > p:not(.eyebrow) { color: #d7e4ed; font-size: .9rem; line-height: 1.95; margin-top: 10px; max-width: 800px; }
.page-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 44px 48px;
  color: white;
  background: var(--navy);
  border-bottom: 4px solid var(--sky);
}
.page-heading h1 { color: white; }
.page-heading p:not(.eyebrow) { color: #d7e4ed; line-height: 2; }
.page-heading .eyebrow { color: var(--sky); }

/* News archive: one lead article, then a balanced two-column edition. */
.news-card {
  border: 1px solid #dbe6ec;
  border-radius: 10px;
  box-shadow: var(--surface-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.news-card:hover { border-color: #a7cee1; box-shadow: var(--surface-hover); transform: translateY(-3px); }
.news-image { background: #e8eff3; }
.news-image img,
.feature-media img,
.article-image img { object-fit: contain; }
.news-content { padding: 23px 25px; }
.news-content h3 { font-size: 1.04rem; line-height: 2; }
.news-meta:empty { display: none; }
.news-content .read-link {
  border-top: 1px solid #e5edf1;
  padding-top: 14px;
  margin-top: 20px;
  font-size: .8rem;
}
body[data-page="news"] .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
body[data-page="news"] .news-image { height: 255px; }
body[data-page="news"] .news-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
}
body[data-page="news"] .news-card:first-child .news-image { height: 100%; min-height: 320px; }
body[data-page="news"] .news-card:first-child .news-content { padding: 34px 38px; justify-content: center; }
body[data-page="news"] .news-card:first-child .news-content h3 { flex: none; }
body[data-page="news"] .news-card:first-child h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.95; }
.filters { gap: 10px; margin-block: 24px 28px; }
.filter { border-radius: 6px; padding: 10px 21px; min-height: 46px; }
a.filter { display: inline-flex; align-items: center; }
.filter:hover { box-shadow: 0 4px 12px #233c5508; background: #eef5f9; }
.filter[aria-pressed="true"]:hover { background: var(--navy); }
.pagination {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 24px;
  gap: 32px;
  box-shadow: var(--surface-shadow);
}
.pagination span { font-weight: 700; color: var(--navy); }
.pagination button { border-radius: 6px; min-height: 46px; }

/* Reading layout: the stored editor HTML and every image remain intact. */
.article-wrap { max-width: 1060px; }
.article-wrap > article {
  background: white;
  border: 1px solid #d7e3ea;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--surface-shadow);
}
.article-header {
  background: var(--navy);
  color: white;
  padding: 32px 44px 0;
  border-top: 4px solid var(--sky);
}
.article-header > .text-link { color: var(--pale); font-size: .84rem; }
.article-header h1 { color: white; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.9; margin-block: 15px 27px; }
.article-tools { margin: 0; padding-block: 17px; border-color: #ffffff28; border-bottom: 0; }
.article-tools .news-meta { color: #e2edf3; }
.article-tools > div:last-child { margin-inline-start: auto; display: flex; gap: 10px; }
.article-tools button { background: #ffffff10; color: white; border: 1px solid #ffffff35; border-radius: 5px; min-height: 44px; padding: 8px 18px; }
.article-tools button:hover { background: #ffffff22; }
.article-tools button:focus-visible,
.article-header a:focus-visible { outline-color: var(--cream); }
.article-image { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #edf2f5; padding: 22px; }
.article-image img { max-height: 610px; height: auto; width: auto; max-width: 100%; }
.article-body { max-width: 810px; width: calc(100% - 88px); margin-inline: auto; padding-block: 28px 40px; font-size: 1.1rem; line-height: 2.25; }
.article-body p { margin-block: 1.15em; }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }
.article-body img { margin-block: 10px; }
.article-body a { text-underline-offset: 4px; }
.article-body blockquote { border-inline-start: 3px solid var(--sky); margin-inline: 0; padding-inline-start: 22px; color: var(--navy); }
.article-lead { max-width: 810px; width: calc(100% - 88px); margin: 30px auto 0; line-height: 2; font-size: 1.12rem; }
.article-wrap > .section { padding-block: 28px 0; }
[lang="en"] .article-body { line-height: 1.95; }

/* Service, directory and biography surfaces share the same visual grammar. */
.search-field {
  background: white;
  border: 1px solid #d8e5ec;
  border-radius: 10px;
  box-shadow: var(--surface-shadow);
  padding: 22px 26px;
  margin-top: 24px;
}
.search-field label { color: var(--navy); font-size: .9rem; margin-bottom: 4px; }
.search-field input { max-width: none; border-color: #bed2de; background: #fbfdfe; min-height: 54px; }
.search-field input:focus { background: white; }
.result-count { font-weight: 600; font-size: .84rem; margin-block: 22px; }
.services-grid { gap: 24px; }
.service-card {
  border-radius: 10px;
  padding: 27px;
  border: 1px solid #d8e5ec;
  box-shadow: var(--surface-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.service-card:hover { border-color: #a7cee1; box-shadow: var(--surface-hover); transform: translateY(-3px); }
.service-card > .line-icon,
.leader-card > .line-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: #edf5f9;
  border: 1px solid #dcebf2;
  border-radius: 11px;
  margin-bottom: 20px;
}
.service-card > .line-icon svg,
.leader-card > .line-icon svg { width: 26px; height: 26px; }
.service-card .tag { background: #eef4f7; border: 1px solid #e0ebf0; color: #365c73; border-radius: 4px; padding: 4px 9px; }
.service-card h2 { font-size: 1.04rem; line-height: 2; margin-bottom: 2px; }
.service-card p { margin-top: 10px; line-height: 2; font-size: .8rem; }
.service-card > a { border-top: 1px solid #e6edf2; width: 100%; padding-top: 15px; margin-top: 20px; justify-content: space-between; font-size: .84rem; }
.directory-grid { gap: 20px; }
.directory-card {
  position: relative;
  background: white;
  border-radius: 9px;
  padding: 25px 27px;
  min-height: 100px;
  border-color: #d8e5ec;
  border-inline-start: 3px solid var(--sky);
  box-shadow: var(--surface-shadow);
  font-size: .98rem;
  line-height: 1.9;
}
.directory-card:hover { background: white; border-color: var(--blue); box-shadow: var(--surface-hover); }
.directory-section { margin-top: 40px; }
.directory-section h2 { padding-inline-start: 15px; border-inline-start: 3px solid var(--blue); }
.leader-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  background: white;
  border-radius: 10px;
  border-color: #d8e5ec;
  border-top: 3px solid var(--sky);
  box-shadow: var(--surface-shadow);
}
.leader-card h2 { font-size: 1.18rem; line-height: 1.9; }
.leader-card p { line-height: 2; margin-block: 12px 20px; flex: 1; }
.leader-card .text-link { border-top: 1px solid #e5edf2; width: 100%; padding-top: 16px; margin-top: 0; }
.prose { max-width: 880px; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 38px 44px 44px; box-shadow: var(--surface-shadow); }
.prose h2 { color: var(--blue); padding-bottom: 13px; border-bottom: 1px solid #e0eaf0; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.06rem; line-height: 2.25; color: #40596a; }
.prose .button { margin-top: 10px; }
.legal-text { background: white; border: 1px solid #d9e5ec; border-radius: 10px; padding: 32px 44px 42px; box-shadow: var(--surface-shadow); line-height: 2.35; }
.notice { background: #edf5f9; border-color: #d3e3ec; border-inline-start-color: var(--blue); line-height: 2; }
.contact-card { background: white; border-radius: 10px; border-color: #d8e5ec; padding: 32px; box-shadow: var(--surface-shadow); }
.contact-card h2 { font-size: 1.35rem; }
.contact-card p { line-height: 2.15; }
.original-service-links { gap: 24px; }
.original-service-links .service-card { border-inline-start: 3px solid var(--sky); padding-inline: 30px; }

/* The legacy CV retains its editable field IDs, portrait and Bootstrap layout. */
.legacy-cv main .jumbotron { background: white !important; border-radius: 10px; border-color: #d9e5ec; box-shadow: var(--surface-shadow); padding: 26px !important; }
.legacy-cv main .jumbotron h2 { color: var(--navy) !important; font-size: 1.2rem; line-height: 1.8; margin-bottom: 19px; }
.legacy-cv main .list-group-item { text-align: start !important; border: 0; border-inline-start: 2px solid var(--sky); background: #f4f8fa; margin-bottom: 8px; padding: 13px 16px; }
.legacy-cv #cvImage { border: 1px solid #d6e3eb; background: white; padding: 8px; border-radius: 10px !important; margin-bottom: 24px; box-shadow: var(--surface-shadow); }
.legacy-cv main > .container { padding-inline: 0; }

.site-footer { border-top: 4px solid var(--sky); padding-top: 50px; }
.site-footer h3 { color: #f2f7fa; padding-bottom: 14px; border-bottom: 1px solid #ffffff25; margin-bottom: 12px; }
.site-footer a { color: #dce7ee; line-height: 1.9; }
.footer-grid { padding-bottom: 40px; }
.footer-bottom { border-color: #ffffff25; }

@media (max-width: 1100px) {
  .hero-grid { gap: 35px; }
  .feature-media { height: 250px; }
  .hero-copy h1 { font-size: 2.5rem; }
  .quick-services strong { font-size: .78rem; }
  body[data-page="news"] .news-card:first-child .news-content { padding: 28px; }
  body[data-page="news"] .news-card:first-child .news-image { min-height: 290px; }
  .service-card { padding: 23px; }
}

@media (max-width: 800px) {
  .masthead { min-height: 115px; }
  .nav-office-list { border: 0; border-inline-start: 2px solid var(--sky); border-radius: 4px; box-shadow: none; margin-block: 0 12px; }
  .primary-nav.is-open { padding-block: 12px; }
  .primary-nav > a,
  .nav-office summary { padding-inline: 13px; border-radius: 4px; }
  .primary-nav > a:hover,
  .nav-office summary:hover { background: #ffffff0c; }
  .primary-nav > a[aria-current="page"]::after { background: var(--sky); inset-inline-start: 0; height: 22px; bottom: 12px; width: 3px; }
  .hero-grid { gap: 26px; padding-block: 34px 54px; }
  .hero-copy h1 { font-size: 2rem; }
  .hero-description { font-size: .9rem; }
  .hero-feature { padding: 7px; border-radius: 12px; }
  .feature-media { height: 215px; }
  .feature-content { padding: 18px; }
  .feature-content h2 { font-size: .97rem; }
  .quick-services strong { font-size: .85rem; }
  .quick-services > a { min-height: 105px; }
  .page-intro { padding: 31px 32px; border-radius: 9px; }
  #page-content.section { padding-top: 26px; padding-bottom: 50px; }
  body[data-page="news"] .news-card:first-child { grid-template-columns: 1fr; }
  body[data-page="news"] .news-card:first-child .news-image { height: auto; min-height: 0; aspect-ratio: 1.8; }
  body[data-page="news"] .news-card:first-child .news-content { padding: 25px; }
  body[data-page="news"] .news-card:first-child h3 { font-size: 1.35rem; }
  body[data-page="news"] .news-image { height: 210px; }
  .news-content { padding: 20px; }
  .article-header { padding-inline: 30px; }
  .article-body,
  .article-lead { width: calc(100% - 60px); }
  .prose { padding: 28px 30px 34px; }
  .legal-text { padding: 25px 30px; }
  .leader-card { padding: 27px; }
  .vision-grid { padding-block: 45px; }
}

@media (max-width: 540px) {
  .masthead { min-height: 99px; }
  .hero-grid { padding-block: 26px 46px; }
  .hero-copy h1 { font-size: 2.1rem; line-height: 1.7; }
  .hero-description { font-size: .94rem; line-height: 2.2; }
  .hero-feature { padding: 6px; }
  .feature-media { height: auto; aspect-ratio: 1.7; }
  .feature-content { padding: 18px 19px; }
  .feature-content h2 { font-size: 1rem; }
  .quick-services { margin-top: -18px; }
  .quick-services > a { min-height: 88px; }
  .quick-services strong { font-size: .86rem; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px 20px; }
  .section-heading h2 { font-size: 1.4rem; padding-bottom: 9px; }
  .section-heading h2::after { width: 30px; }
  .news-actions { gap: 8px 22px; }
  #page-content.section { padding-block: 20px 40px; }
  .breadcrumb { font-size: .73rem; margin-bottom: 16px; gap: 9px; }
  .page-intro { padding: 25px 22px 28px; margin-bottom: 25px; border-inline-start-width: 4px; }
  .page-intro h1 { font-size: 1.7rem; line-height: 1.75; }
  .page-intro .eyebrow { font-size: .68rem; }
  .page-intro > p:not(.eyebrow) { font-size: .85rem; line-height: 2.1; }
  .page-heading { padding-block: 30px 34px; }
  .page-heading h1 { font-size: 1.7rem; line-height: 1.8; }
  body[data-page="news"] .news-grid { grid-template-columns: 1fr; gap: 22px; }
  body[data-page="news"] .news-card:first-child { display: flex; grid-column: auto; }
  body[data-page="news"] .news-image,
  body[data-page="news"] .news-card:first-child .news-image { height: auto; aspect-ratio: 1.65; min-height: 0; }
  body[data-page="news"] .news-card:first-child .news-content,
  .news-content { padding: 21px; }
  body[data-page="news"] .news-card:first-child h3,
  .news-content h3 { font-size: 1rem; line-height: 2; }
  .news-grid .news-card:last-child:nth-child(3) { display: flex; grid-column: auto; }
  .filters { gap: 8px; margin-block: 20px 23px; }
  .filter { font-size: .76rem; padding: 9px 14px; min-height: 44px; }
  .pagination { gap: 12px; padding: 15px 12px; margin-top: 25px; }
  .pagination span { font-size: .8rem; }
  .pagination button { min-width: 75px; font-size: .78rem; padding-inline: 10px; }
  .article-header { padding: 22px 21px 0; }
  .article-header h1 { font-size: 1.48rem; line-height: 1.95; margin-block: 10px 20px; }
  .article-header > .text-link { font-size: .76rem; }
  .article-tools { padding-block: 14px; gap: 10px; }
  .article-tools > div:last-child { gap: 8px; }
  .article-tools button { padding-inline: 14px; font-size: .75rem; }
  .article-image { padding: 12px; }
  .article-body,
  .article-lead { width: calc(100% - 42px); font-size: 1rem; line-height: 2.2; }
  .article-body { padding-block: 22px 30px; }
  .article-lead { margin-top: 24px; }
  .article-wrap > .section { padding-top: 22px; }
  .search-field { padding: 19px; margin-block: 20px; }
  .search-field label { font-size: .85rem; }
  .search-field input { font-size: .88rem; min-height: 50px; padding-inline: 13px; }
  .services-grid { gap: 20px; }
  .service-card { padding: 23px; }
  .service-card h2 { font-size: 1rem; }
  .directory-card { min-height: 88px; padding: 22px; font-size: .94rem; }
  .directory-grid { gap: 15px; }
  .leader-card { padding: 25px; }
  .leader-card h2 { font-size: 1.1rem; }
  .contact-card { padding: 25px; }
  .contact-card h2 { font-size: 1.2rem; }
  .prose { padding: 25px 22px 30px; }
  .prose p { font-size: 1rem; line-height: 2.2; }
  .prose h2 { font-size: 1.25rem; }
  .legal-text { padding: 24px 22px; font-size: .97rem; line-height: 2.3; }
  .original-service-links .service-card { padding-inline: 23px; font-size: .94rem; }
  .legacy-cv main .jumbotron { padding: 22px !important; }
  .legacy-cv main .jumbotron h2 { font-size: 1.15rem; }
  .site-footer { padding-top: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-card,
  .service-card { transition: none; }
  .news-card:hover,
  .service-card:hover { transform: none; }
}

@media print {
  body { background: white !important; }
  .page-intro,
  .page-heading,
  .article-header { background: white !important; color: black !important; border: 0; padding: 0; }
  .page-intro::before,
  .page-heading::before { display: none; }
  .article-header h1,
  .page-intro h1,
  .page-heading h1 { color: black !important; }
  .article-header > .text-link,
  .page-intro > p,
  .page-heading p { color: black !important; }
  .article-wrap > article,
  .prose,
  .legal-text { box-shadow: none; border: 0; padding: 0; }
  .article-body,
  .article-lead { width: 100%; max-width: none; font-size: 12pt; line-height: 1.8; }
  .article-image { background: white; padding: 0; }
  .article-image img { max-height: 350px; }
}
