/* =========================================================
   POLICY.CSS
   Shared styles for privacy.html, safeguarding.html,
   code-of-conduct.html
   ========================================================= */

/* =========================================================
   POLICY HERO
   ========================================================= */
.policy-hero {
  background: var(--color-navy);
  padding: calc(var(--header-height) + var(--space-3xl)) var(--gutter) var(--space-3xl);
  border-bottom: 4px solid var(--color-red);
}

.policy-hero--welfare {
  border-bottom-color: var(--color-welfare);
}

.policy-hero__inner {
  max-width: 820px;
  margin: 0 auto;
}

.policy-hero__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-md);
}

.policy-hero--welfare .policy-hero__badge { color: var(--color-welfare-tint); }

.policy-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.policy-hero__meta {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.5);
}

/* =========================================================
   ALERT STRIP (safeguarding)
   ========================================================= */
.policy-alert {
  background: #fff8f0;
  border-left: 5px solid var(--color-red);
  padding: var(--space-lg) var(--gutter);
}

.policy-alert__inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  font-size: var(--fs-base);
  color: #333;
}

.policy-alert__inner svg { flex-shrink: 0; color: var(--color-red); margin-top: 2px; }
.policy-alert__inner strong { display: block; margin-bottom: 4px; color: var(--color-navy); font-weight: 700; }

/* =========================================================
   POLICY BODY
   ========================================================= */
.policy-wrap {
  padding: var(--space-4xl) var(--gutter);
}

.policy-content {
  max-width: 820px;
  margin: 0 auto;
}

.policy-intro {
  font-size: var(--fs-md);
  color: var(--color-grey);
  line-height: 1.8;
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 2px solid var(--color-navy-25);
}

.policy-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-navy-25);
  letter-spacing: 0.02em;
}

.policy-content h2:first-of-type { margin-top: 0; }

.policy-content p {
  font-size: var(--fs-base);
  color: var(--color-grey);
  line-height: 1.85;
  margin-bottom: var(--space-md);
}

/* base.css turns every list marker off across the site. In running policy
   copy a list should read as a list, so the markers come back here. */
.policy-content ul { list-style: disc; }
.policy-content ol { list-style: decimal; }

.policy-content ul,
.policy-content ol {
  margin: 0 0 var(--space-lg) var(--space-lg);
  padding: 0 0 0 var(--space-md);
}

.policy-content li::marker { color: var(--color-welfare); }

.policy-content li {
  font-size: var(--fs-base);
  color: var(--color-grey);
  line-height: 1.75;
  margin-bottom: var(--space-sm);
  padding-left: var(--space-xs);
}

.policy-content a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.policy-content a:hover { color: var(--color-red); }

.policy-content strong { color: var(--color-navy); font-weight: 600; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
  .policy-hero {
    padding: calc(var(--header-height) + var(--space-2xl)) var(--gutter-mobile) var(--space-2xl);
  }

  .policy-wrap { padding: var(--space-2xl) var(--gutter-mobile); }
  .policy-alert { padding: var(--space-md) var(--gutter-mobile); }
  .policy-alert__inner { flex-direction: column; gap: var(--space-md); }
}

/* =========================================================
   AT A GLANCE (safeguarding)
   Four short assurances under the hero. Colour and structure without a
   photo, so the page stops reading as a wall of text immediately. Every
   claim here is expanded on further down the page.
   ========================================================= */
.sg-assure {
  background: var(--color-welfare-wash);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2xl) var(--gutter);
}

.sg-assure__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.sg-assure__item svg {
  color: var(--color-welfare);
  margin-bottom: var(--space-sm);
}

/* An h2 for the document outline, sized as the label it actually is. */
.sg-assure__item h2 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
  line-height: 1.25;
}

.sg-assure__item p {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* =========================================================
   IN-PAGE PHOTOS
   Photographs sit between sections rather than in one band, so the colour
   is spread down the page and each picture sits with the copy it belongs
   to. Paths are written in the page because every photo here is chosen
   for its position; check-image-paths.ps1 proves each one resolves.
   ========================================================= */
.policy-figure {
  margin: var(--space-2xl) 0;
}

.policy-figure img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: var(--radius-lg);
}

/* A portrait photo in this letterbox loses whichever end the crop favours.
   The default 30% suits a landscape shot; --low drops the window far
   enough to hold faces that sit below the middle of a portrait one. */
.policy-figure--low img { object-position: center 52%; }

.policy-figure figcaption {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 3px solid var(--color-welfare);
}

/* A portrait photo beside its text, rather than cropped into a letterbox. */
.policy-split {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin: var(--space-2xl) 0;
}

.policy-split__img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border-radius: var(--radius-lg);
}

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

/* =========================================================
   REPORTING ROUTES
   The three ways to raise a concern, as steps rather than bullets: this
   is the part of the page someone reads when they are worried.
   ========================================================= */
.sg-routes {
  list-style: none;
  counter-reset: sg-route;
  margin: var(--space-lg) 0 var(--space-xl);
  padding: 0;
}

.sg-routes li {
  counter-increment: sg-route;
  position: relative;
  padding: 0 0 var(--space-lg) calc(var(--space-2xl) + var(--space-xs));
  margin: 0;
}

.sg-routes li::before {
  content: counter(sg-route);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-welfare);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
}

/* The line joining the steps, so they read as one route through. */
.sg-routes li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 44px;
  bottom: 6px;
  width: 2px;
  background: var(--color-navy-25);
}

.sg-routes h3 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  margin-bottom: 4px;
  padding-top: 9px;
}

.sg-routes p {
  margin-bottom: 0;
  font-size: var(--fs-base);
  color: var(--color-grey);
  line-height: 1.75;
}

.sg-emergency {
  background: #fff8f0;
  border-left: 5px solid var(--color-red);
  padding: var(--space-md) var(--space-lg);
}

/* =========================================================
   WHERE ELSE TO GET HELP
   Independent organisations, as cards. No logos: these are other people's
   marks and we have no licence to reproduce them, and a wall of borrowed
   branding would read as endorsement in both directions.
   ========================================================= */
.sg-help {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4xl) var(--gutter);
}

.sg-help__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sg-help__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.sg-help__intro {
  font-size: var(--fs-md);
  color: var(--color-text-soft);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: var(--space-2xl);
}

.sg-help__group {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-welfare);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-navy-25);
}

.sg-help__group + .sg-links { margin-bottom: var(--space-2xl); }

.sg-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.sg-link {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-welfare);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.sg-link:hover,
.sg-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.sg-link__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.sg-link__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--space-md);
}

/* The number is the point of the card, so it is set like a heading. */
.sg-link__tel {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-welfare);
  line-height: 1.2;
}

.sg-link__tel small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.sg-link__more {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
}

.sg-link__more::after { content: ' \2192'; }

/* =========================================================
   RESPONSIVE (safeguarding components)
   ========================================================= */
@media (max-width: 1000px) {
  .sg-assure__inner { grid-template-columns: repeat(2, 1fr); }
  .sg-links { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .sg-assure { padding: var(--space-xl) var(--gutter-mobile); }
  .sg-help   { padding: var(--space-2xl) var(--gutter-mobile); }

  .policy-figure img { height: 220px; }

  /* A portrait photo above its text reads better than a narrow column of
     it beside an even narrower column of words. */
  .policy-split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .policy-split__img { max-height: 300px; object-position: center 20%; }
}

@media (max-width: 560px) {
  .sg-assure__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .sg-links { grid-template-columns: 1fr; }
}

/* Logos on the support cards. The file is optional: if it is not there
   the slot removes itself and the card reads as it does now. */
/* No markup uses these two rules at present: the support-organisation
   logos were never supplied and the cards were changed to read as name,
   description, and phone number instead. Kept because they are the whole
   of what is needed to put logos back; add a
   <span class="sg-link__logo"><img ...></span> as the first child of an
   .sg-link and it works again. */
.sg-link__logo {
  display: flex;
  align-items: center;
  height: 34px;
  margin-bottom: var(--space-sm);
}

.sg-link__logo img {
  max-height: 100%;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* =========================================================
   POLICIES PAGE
   policies.html carries the document library, the Code of Conduct,
   and the Privacy Policy on one page. The two long policies were
   pages of their own until this one replaced them; .htaccess keeps
   the old addresses working.
   ========================================================= */

/* Sticky jump bar, the same shape as the About page's. */
.policy-nav {
  background: var(--color-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: var(--sticky-top);
  z-index: 10;
}

.policy-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.policy-nav__inner::-webkit-scrollbar { display: none; }

.policy-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: var(--space-md);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.policy-nav__link:hover,
.policy-nav__link:focus-visible {
  color: var(--color-white);
  border-bottom-color: var(--color-red);
}

/* ── Sections ─────────────────────────────────────────── */
.policy-section {
  padding: var(--space-4xl) var(--gutter);
  /* The sticky bar would otherwise cover the heading jumped to. */
  scroll-margin-top: calc(var(--sticky-top) + 52px);
}

/* Alternating grounds, so three long sections do not run together. */
.policy-section--alt {
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.policy-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.policy-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.policy-section__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.policy-section__intro {
  font-size: var(--fs-md);
  color: var(--color-text-soft);
  line-height: 1.7;
  max-width: 640px;
  margin-bottom: var(--space-2xl);
}

/* The long policies keep the reading column they had as pages. */
.policy-section .policy-content { margin: 0; }

/* Inside a section the running headings drop a level, so the page has
   one h1, three h2s, and the policy headings beneath them. They are
   styled as .policy-content h2 is on the single-policy pages. */
.policy-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-navy-25);
  letter-spacing: 0.02em;
}

.policy-content .policy-intro + h3 { margin-top: 0; }

/* ── Document library ─────────────────────────────────── */
.doc-group { margin-bottom: var(--space-2xl); }
.doc-group:last-child { margin-bottom: 0; }

.doc-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-welfare);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-navy-25);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.doc-card {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-left-color var(--transition);
}

.doc-card:hover,
.doc-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-left-color: var(--color-red);
}

.doc-card__icon {
  color: var(--color-navy);
  flex-shrink: 0;
  margin-top: 2px;
}

.doc-card__body { display: flex; flex-direction: column; }

.doc-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: 4px;
}

.doc-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: 1.55;
}

.doc-card__meta {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.policy-library-empty {
  font-size: var(--fs-base);
  color: var(--color-grey);
  line-height: 1.8;
  background: var(--color-bg-light);
  border-left: 5px solid var(--color-navy-25);
  padding: var(--space-lg);
}

/* ── Closing call to action ───────────────────────────── */
.policy-cta {
  background: var(--color-navy);
  padding: var(--space-4xl) var(--gutter);
  text-align: center;
}

.policy-cta__inner { max-width: 620px; margin: 0 auto; }

.policy-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.policy-cta p {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: var(--space-xl);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1000px) {
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .policy-nav__inner { padding: 0 var(--gutter-mobile); }
  .policy-nav__link  { padding: var(--space-sm) var(--space-md); }

  .policy-section { padding: var(--space-2xl) var(--gutter-mobile); }
  .policy-cta     { padding: var(--space-2xl) var(--gutter-mobile); }

  .doc-grid { grid-template-columns: 1fr; }
}