/* ==========================================================================
   Safeguarding — page stylesheet
   Loaded only on /safeguarding/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it.

   THE MOTIF IS PROTECTION WITHOUT ENCLOSURE. Everything drawn on this
   page is an ARC — open at both ends, never a closed ring. No shield, no
   padlock, no warning triangle, no boundary a child sits inside, and no
   red anywhere. Cover, not containment.

   The page has two movements and the colour carries them: the first half
   is warm and light (being known), the second turns to shell, then to a
   single deep-green field where the independent oversight sits. That is
   the argument — the home should feel safe, and nobody should have to
   take its word for it.

   Sections
     1. Opening
     2. Recognition
     3. THE SIGNATURE MOMENT — nested shelter arcs
     4. What is not published here
     5. A child's own routes
     6. When the concern is about us
     7. Independent oversight (the deep-green field)
     8. Raising a concern / next
     9. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening. Headline, then the motif introduced once and quietly: a
      single shelter arc drawn across the full width beneath it. It is a
      top border on an empty box with a large elliptic radius — the same
      curve the homepage uses where the hero meets the page, so the page
      opens in a shape the site already owns.
   -------------------------------------------------------------------------- */
.oasis-sg-open__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-open h1 {
	margin-top: 0.4rem;
	max-width: 20ch;
	text-wrap: balance;
}
.oasis-sg-open__arc {
	display: block;
	width: min(100%, 40rem);
	height: clamp(2.5rem, 5.5vw, 4.75rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
	border: 1.5px solid var(--oasis-green-leaf);
	border-bottom: 0;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	opacity: 0.72;
}
.oasis-sg-open__body { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.oasis-sg-open__lede {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.02rem + 1.25vw, 2rem);
	line-height: 1.38;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	max-width: 25ch;
}
.oasis-sg-open__para {
	margin-top: 1.2rem;
	color: var(--oasis-ink-soft);
	max-width: 54ch;
}
@media (min-width: 900px) {
	.oasis-sg-open__body {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-sg-open__para { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   2. Recognition. Heading in the margin, the argument beside it.
   -------------------------------------------------------------------------- */
.oasis-sg-known__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-known h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-sg-known__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-sg-known__body p { color: var(--oasis-ink-soft); max-width: 56ch; }
/* the pull line: a beat between paragraphs, and the sentence the section
   actually turns on */
.oasis-sg-known__pull {
	margin-top: 1.5rem;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-green-leaf);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.16rem, 1.02rem + 0.72vw, 1.55rem);
	line-height: 1.42;
	letter-spacing: -0.01em;
	color: var(--oasis-green-deep) !important;
	max-width: 32ch !important;
}
@media (min-width: 960px) {
	.oasis-sg-known__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-sg-known__body { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   3. THE SIGNATURE MOMENT — nested shelter arcs.

      Four arcs on one baseline, each wider and taller than the last, with
      a small mark at their centre. They are half-ellipses drawn with a
      top border and an elliptic radius, so each one is OPEN AT THE BOTTOM
      and open at both sides. Nothing encloses anything.

      The figure is decorative and aria-hidden; the four statements
      beneath it carry every piece of meaning, so a screen reader loses
      nothing by not seeing it.
   -------------------------------------------------------------------------- */
.oasis-sg-layers__head { max-width: var(--oasis-w-wide); }
.oasis-sg-layers__head h2 { margin-top: 0.35rem; max-width: 26ch; text-wrap: balance; }

.oasis-sg-layers__figure {
	position: relative;
	width: min(100%, 37rem);
	height: clamp(8rem, 18vw, 13.5rem);
	margin: clamp(3rem, 6vw, 4.5rem) auto clamp(2rem, 4vw, 3rem);
}
.oasis-sg-arc {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border: 1.25px solid var(--oasis-green-leaf);
	border-bottom: 0;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* the innermost is the firmest line and each one outward is quieter — cover
   thinning as it spreads, not four identical rings */
.oasis-sg-arc--1 { width: 25%; height: 28%; opacity: 0.95; }
.oasis-sg-arc--2 { width: 49%; height: 52%; opacity: 0.74; }
.oasis-sg-arc--3 { width: 73%; height: 76%; opacity: 0.55; }
.oasis-sg-arc--4 { width: 97%; height: 100%; opacity: 0.4; }
/* the child, at the centre of all of it */
.oasis-sg-arc__node {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 0 -0.3rem -0.3rem;
	border-radius: 50%;
	background: var(--oasis-green-leaf);
}

/* Motion (brief §21: quieter than elsewhere): the arcs settle rather than
   sweep — each rises a little and fades up, outermost last, 800ms. It is
   the only animation on the page and it says "cover arriving", which is
   the section's meaning. */
.js .oasis-sg-arc {
	transition: transform var(--oasis-dur-image) var(--oasis-ease-out),
		opacity var(--oasis-dur-image) var(--oasis-ease-out);
}
.js .oasis-sg-layers__figure.is-pending .oasis-sg-arc {
	transform: translateX(-50%) translateY(0.5rem) scaleY(0.82);
	opacity: 0;
}
.js .oasis-sg-arc--2 { transition-delay: 90ms; }
.js .oasis-sg-arc--3 { transition-delay: 180ms; }
.js .oasis-sg-arc--4 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
	.js .oasis-sg-arc { transition: none; }
	.js .oasis-sg-layers__figure.is-pending .oasis-sg-arc {
		transform: translateX(-50%);
		opacity: 1;
	}
	.js .oasis-sg-layers__figure.is-pending .oasis-sg-arc--1 { opacity: 0.85; }
	.js .oasis-sg-layers__figure.is-pending .oasis-sg-arc--2 { opacity: 0.62; }
	.js .oasis-sg-layers__figure.is-pending .oasis-sg-arc--3 { opacity: 0.42; }
	.js .oasis-sg-layers__figure.is-pending .oasis-sg-arc--4 { opacity: 0.26; }
}

.oasis-sg-layers__list {
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	padding: 0;
	max-width: var(--oasis-w-wide);
}
.oasis-sg-layer {
	padding-top: clamp(1.15rem, 2.4vw, 1.75rem);
	margin-top: clamp(1.15rem, 2.4vw, 1.75rem);
	border-top: 1px solid var(--oasis-rule-soft);
}
.oasis-sg-layer:first-child { margin-top: 0; border-top-color: var(--oasis-green-leaf); }
.oasis-sg-layer__label {
	display: block;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.16rem, 1.02rem + 0.6vw, 1.46rem);
	line-height: 1.24;
	color: var(--oasis-green-deep);
}
.oasis-sg-layer__text {
	display: block;
	margin-top: 0.55rem;
	max-width: 58ch;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.64;
}
@media (min-width: 1000px) {
	/* label in the margin, statement beside it — a reading column, not a
	   set of tiles */
	.oasis-sg-layer {
		display: grid;
		grid-template-columns: minmax(10rem, 0.44fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: baseline;
	}
	.oasis-sg-layer__text { margin-top: 0; }
}
.oasis-sg-layers__close {
	margin-top: clamp(2rem, 4vw, 3rem);
	max-width: 46ch;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.16rem, 1.02rem + 0.7vw, 1.5rem);
	line-height: 1.46;
	color: var(--oasis-ink);
}

/* --------------------------------------------------------------------------
   4. What is not published here. The statement carries the section and
      the reasoning sits beside it; the framework note is marked as an
      aside on a sand rule rather than set as a legal block.
   -------------------------------------------------------------------------- */
.oasis-sg-hold__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-hold h2 { margin-top: 0.35rem; max-width: 22ch; text-wrap: balance; }
.oasis-sg-hold__statement {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.28rem, 1.04rem + 1.05vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 30ch;
}
.oasis-sg-hold__body { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-sg-hold__body p { color: var(--oasis-ink-soft); max-width: 54ch; }
.oasis-sg-hold__note {
	margin-top: 1.6rem;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-sand);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
}
.oasis-sg-hold__note em { font-style: italic; font-synthesis: none; }
@media (min-width: 1000px) {
	.oasis-sg-hold__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-sg-hold__inner > .oasis-eyebrow,
	.oasis-sg-hold__inner > h2 { grid-column: 1 / -1; }
	.oasis-sg-hold__statement { grid-column: 1; }
	.oasis-sg-hold__body {
		grid-column: 2;
		margin-top: clamp(1.9rem, 3.8vw, 2.7rem);
	}
}

/* --------------------------------------------------------------------------
   5. A child's own routes. The lightest ground on the page and the
      largest single statement, because CONTENT_MATRIX §7 says this must
      not be buried in small print.

      The routes are a list with a leaf mark, not a form, not a table and
      not a set of contact cards.
   -------------------------------------------------------------------------- */
.oasis-sg-voice__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-voice h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-sg-voice__statement {
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.34rem, 1.04rem + 1.3vw, 2.15rem);
	line-height: 1.34;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	max-width: 30ch;
}
.oasis-sg-voice__routes {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
}
.oasis-sg-voice__routes li {
	position: relative;
	padding: 0.95rem 0 0.95rem clamp(1.6rem, 3vw, 2.25rem);
	border-top: 1px solid rgba(36, 92, 44, 0.16);
	color: var(--oasis-ink-soft);
	line-height: 1.62;
	max-width: 62ch;
}
.oasis-sg-voice__routes li:last-child { border-bottom: 1px solid rgba(36, 92, 44, 0.16); }
.oasis-sg-voice__routes li::before {
	/* a small open arc, not a bullet, not a tick and not a shield */
	content: "";
	position: absolute;
	left: 0;
	top: 1.5em;
	width: clamp(0.75rem, 1.6vw, 1rem);
	height: 0.4rem;
	border-top: 1.5px solid var(--oasis-green-leaf);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.oasis-sg-voice__routes strong { color: var(--oasis-ink); font-weight: 600; }
.oasis-sg-voice__limit {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-green-leaf);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-ink);
	max-width: 56ch;
}
@media (min-width: 1000px) {
	.oasis-sg-voice__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-sg-voice__lead { grid-column: 1; }
	.oasis-sg-voice__statement { grid-column: 1; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
	.oasis-sg-voice__limit { grid-column: 1; }
	.oasis-sg-voice__routes {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0.4rem;
	}
}

/* --------------------------------------------------------------------------
   6. When the concern is about us. Heading right, argument left — the
      reverse of section 2, so the page's two "explaining" spreads do not
      read as the same layout twice.
   -------------------------------------------------------------------------- */
.oasis-sg-about-us__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-about-us h2 { margin-top: 0.35rem; max-width: 22ch; text-wrap: balance; }
.oasis-sg-about-us__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-sg-about-us__body p { color: var(--oasis-ink-soft); max-width: 58ch; }
.oasis-sg-about-us__body strong { color: var(--oasis-ink); font-weight: 600; }
@media (min-width: 960px) {
	.oasis-sg-about-us__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-sg-about-us__lead { grid-column: 2; grid-row: 1; }
	.oasis-sg-about-us__body { grid-column: 1; grid-row: 1; margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   7. Independent oversight — the one deep-green field on the page, and
      the only place the page raises its voice. It is placed late on
      purpose: the warmth comes first and the authority underwrites it.
   -------------------------------------------------------------------------- */
.oasis-sg-oversight__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-oversight h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-sg-oversight__cols { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.oasis-sg-oversight__cols p {
	color: rgba(255, 255, 255, 0.82);
	max-width: 52ch;
}
.oasis-sg-oversight__cols strong { color: #fff; font-weight: 600; }
@media (min-width: 960px) {
	.oasis-sg-oversight__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
	}
	.oasis-sg-oversight__cols p + p { margin-top: 0; }
}
.oasis-sg-oversight__close {
	margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid rgba(180, 236, 81, 0.32);
	max-width: 64ch;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.14rem, 1.02rem + 0.6vw, 1.45rem);
	line-height: 1.46;
	color: #fff;
}

/* --------------------------------------------------------------------------
   8. Raising a concern, and what to read next. The contact block is given
      real scale — a safeguarding route set in fine print is not a route.
   -------------------------------------------------------------------------- */
.oasis-sg-next__inner { max-width: var(--oasis-w-wide); }
.oasis-sg-next h2 { margin-top: 0.35rem; max-width: 24ch; text-wrap: balance; }
.oasis-sg-next__para {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 58ch;
}
.oasis-sg-next__contact { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-sg-next__contact .oasis-contact-details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem clamp(1.5rem, 4vw, 3rem);
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 2px solid var(--oasis-green-leaf);
	max-width: 34rem;
}
.oasis-sg-next__contact .oasis-contact-details p { margin: 0; }
.oasis-sg-next__contact .oasis-contact-details a {
	display: inline-block;
	/* a safeguarding contact route has to be easy to hit: the bare text link
	   measured 23px tall, just under the 24px target-size minimum */
	padding-block: 0.3rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.14rem, 1.02rem + 0.6vw, 1.42rem);
	color: var(--oasis-green-deep);
}

.oasis-sg-next__routes {
	margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.oasis-sg-next__routes a {
	display: block;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
	border-top: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: inherit;
}
.oasis-sg-next__routes a:last-child { border-bottom: 1px solid var(--oasis-rule); }
.oasis-sg-next__label {
	display: block;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.4rem, 1.12rem + 1.15vw, 1.95rem);
	line-height: 1.16;
	letter-spacing: -0.018em;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-sg-next__desc {
	display: block;
	margin-top: 0.5rem;
	max-width: 44ch;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-ink-soft);
}
.oasis-sg-next__routes a .oasis-arc-arrow {
	display: block;
	width: 1.75rem;
	height: auto;
	margin-top: 0.9rem;
	color: var(--oasis-green-deep);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
@media (hover: hover) {
	.oasis-sg-next__routes a:hover .oasis-sg-next__label { color: var(--oasis-green-deep-hover); }
	.oasis-sg-next__routes a:hover .oasis-arc-arrow { transform: translateX(6px); }
}
.oasis-sg-next__routes a:focus-visible {
	outline: 3px solid var(--oasis-focus);
	outline-offset: 4px;
}
.oasis-sg-next__prof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem clamp(1rem, 2.5vw, 1.75rem);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.oasis-sg-next__prof > span {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.05rem, 1rem + 0.28vw, 1.22rem);
	color: var(--oasis-ink);
}
@media (min-width: 860px) {
	.oasis-sg-next__routes {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-sg-next__routes a:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   9. Narrow widths. This page carries serious content, so the priority
      on a phone is pacing: measures released, the arc figure held to a
      size that still reads as shelter rather than as a smudge, and the
      routes list kept generously spaced so it never becomes fine print.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.oasis-sg-open__lede,
	.oasis-sg-open__para,
	.oasis-sg-known__body p,
	.oasis-sg-layer__text,
	.oasis-sg-layers__close,
	.oasis-sg-hold__statement,
	.oasis-sg-hold__body p,
	.oasis-sg-voice__statement,
	.oasis-sg-voice__routes li,
	.oasis-sg-voice__limit,
	.oasis-sg-about-us__body p,
	.oasis-sg-oversight__cols p,
	.oasis-sg-oversight__close,
	.oasis-sg-next__para { max-width: none; }
	.oasis-sg-known__pull { max-width: none !important; }
	.oasis-sg-open h1,
	.oasis-sg-known h2,
	.oasis-sg-layers__head h2,
	.oasis-sg-hold h2,
	.oasis-sg-voice h2,
	.oasis-sg-about-us h2,
	.oasis-sg-oversight h2,
	.oasis-sg-next h2 { max-width: 18ch; }
	.oasis-sg-layers__figure { width: min(100%, 22rem); height: clamp(6.5rem, 30vw, 9rem); }
}
@media (max-width: 599px) {
	.oasis-sg-open__arc { height: clamp(1.85rem, 9vw, 2.75rem); }
	.oasis-sg-voice__routes li { padding-left: 1.5rem; }
	.oasis-sg-next__routes a:last-child { border-bottom: 1px solid var(--oasis-rule); }
	.oasis-sg-next__contact .oasis-contact-details {
		flex-direction: column;
		gap: 0.5rem;
	}
}