/* Safeguarding page (/safeguarding) — scoped styles, all classes prefixed sg-.
   Follows the site-wide design language (see scss/layout.scss, scss/kff.scss):
   .cont container + .main-heading page title, .section-menu-like tab nav
   (uppercase, rectangular #133c8b active state), borderless #f2f2f2 cards
   with 10px radius, uppercase Montserrat-Bold buttons. The page markup keeps
   its own sg- classes (web/js/safeguarding.js binds to them), but every
   visual recipe below mirrors an existing site component. */

.sg-page { padding-bottom: 40px; }

/**** Page lead (under the standard .main-heading) ****/
.sg-page-lead {
	font-size: 16px;
	line-height: 1.6;
	color: #000000;
	margin: 0;
	max-width: 900px;
}

/**** Section tabs (WAI-ARIA tabs once JS runs; plain anchor-link nav
      otherwise — see web/js/safeguarding.js). Visual recipe copied from
      the site's .section-menu (layout.scss): uppercase 15px links,
      active = solid #133c8b block, no pills/underlines. ****/
.sg-tabs {
	margin: 35px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.sg-tab {
	display: block;
	color: #133c8b;
	font-family: "Montserrat-Regular", sans-serif;
	font-size: 15px;
	line-height: 2;
	margin: 0 10px 6px 0;
	padding: 0 10px;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.sg-tab:last-child { margin-right: 0; }

.sg-tab:hover,
.sg-tab:focus-visible { text-decoration: underline; }

.sg-tab.is-active {
	background: #133c8b;
	color: #ffffff;
	font-family: "Montserrat-SemiBold", sans-serif;
	text-decoration: none;
}

/**** Action strip (persistent help notice + report shortcut, shown under
      the tab nav on every tab — see the .sg-page--js .sg-section rule
      below, which only hides .sg-section elements). Deliberately calm:
      standard gray site card with the primary-navy accent/button, NOT an
      alarm-red box — the 102/112 signposting must be present, but should
      read as reassurance. ****/
.sg-action-strip {
	margin: 25px 0 0 0;
	padding: 16px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: #f2f2f2;
	border-left: 4px solid #133c8b;
	border-radius: 10px;
}

.sg-action-strip-text {
	flex: 1 1 420px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #000000;
}

.sg-action-strip-text strong { color: #133c8b; }

.sg-action-strip-btn {
	display: inline-block;
	flex-shrink: 0;
	padding: 13px 30px 12px;
	border-radius: 10px;
	background: #133c8b;
	color: #ffffff;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.sg-action-strip-btn:hover,
.sg-action-strip-btn:focus-visible { background: #0d295e; text-decoration: none; }

/**** Sections ****/
.sg-section {
	padding: 35px 0 10px;
	scroll-margin-top: 20px;
}

/* Only once JS has upgraded the nav into real tabs (sg-page--js, added by
   safeguarding.js) do we hide the non-active sections. Without it, every
   section stays visible/in-flow exactly as before — the tab links are then
   just same-page anchors into that single long page. */
.sg-page--js .sg-section { display: none; }

.sg-page--js .sg-section.is-active { display: block; }

.sg-section-title {
	color: #133c8b;
	font-family: "Montserrat-ExtraBold", sans-serif;
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 15px 0;
	text-transform: uppercase;
}

.sg-section-lead {
	font-size: 15px;
	line-height: 1.6;
	color: #000000;
	margin: 0 0 24px 0;
	max-width: 900px;
}

.sg-subtitle {
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 18px;
	line-height: 1.2;
	color: #133c8b;
	margin: 30px 0 15px 0;
	text-transform: uppercase;
}

.sg-subtitle:first-of-type { margin-top: 0; }

/**** Principles (definition section) ****/
.sg-principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-principle {
	background: #f2f2f2;
	border-radius: 10px;
	padding: 20px;
	position: relative;
	padding-left: 56px;
}

.sg-principle-num {
	position: absolute;
	left: 16px;
	top: 18px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #133c8b;
	color: #ffffff;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sg-principle-title {
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 15px;
	color: #133c8b;
	margin: 0 0 6px 0;
	text-transform: uppercase;
}

.sg-principle-text { font-size: 13px; line-height: 1.5; color: #000000; margin: 0; }

/**** Document / code lists (visual recipe from kff.scss .document-item:
      gray card, uppercase bold title, hover to #133c8b) ****/
.sg-doc-list {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 12px;
}

.sg-doc-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #f2f2f2;
	border-radius: 10px;
	padding: 16px 18px;
	font-size: 14px;
}

.sg-doc-title {
	color: #6a6a6a;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 13px;
	line-height: 1.4;
	text-transform: uppercase;
}

a.sg-doc-title { color: #133c8b; text-decoration: none; }

a.sg-doc-title:hover,
a.sg-doc-title:focus-visible { text-decoration: underline; }

/**** Downloadable file cards — mirror of the site-wide .document-item
      (views/documents/index.php + main.css): grayscale format icon that
      colors in on hover, uppercase bold title, uppercase Montserrat-Medium
      «Просмотр»/«Скачать» actions going #6a6a6a → #133c8b. ****/
.sg-doc-item--file {
	justify-content: flex-start;
	gap: 16px;
}

.sg-doc-icon {
	flex: 0 0 46px;
	align-self: center;
	height: 52px;
	background: url(/images/icons/formats/pdf.png) center center no-repeat;
	background-size: contain;
	opacity: .8;
	filter: grayscale(100%);
	transition: filter .2s ease, opacity .2s ease;
}

.sg-doc-item--file:hover .sg-doc-icon,
.sg-doc-item--file:focus-within .sg-doc-icon {
	opacity: 1;
	filter: grayscale(0);
}

.sg-doc-item--file:hover .sg-doc-title { color: #133c8b; }

.sg-doc-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sg-doc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 4px;
}

.sg-doc-action {
	color: #6a6a6a;
	font-family: "Montserrat-Medium", sans-serif;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.sg-doc-action:hover,
.sg-doc-action:focus-visible {
	color: #133c8b;
	text-decoration: none;
}

.sg-badge {
	display: inline-block;
	flex-shrink: 0;
	font-size: 11px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 4px;
	font-family: "Montserrat-SemiBold", sans-serif;
	text-transform: uppercase;
}

.sg-badge--soon { background: #fff3cd; color: #8a6d00; }

/**** Report section layout: form on the left, contact card on the right.
      Direct children are exactly the (form or success alert) and the
      .sg-contact-card — the conditional in _report.php always renders
      exactly one of the first two, so this stays a clean 2-item grid. ****/
.sg-report-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 32px;
	align-items: start;
	margin-top: 28px;
	/* Without a cap the 1fr column stretches to ~1090px on the 1440px
	   section while the form inside stays max-width:640px — leaving a
	   dead gap before the 280px card. Cap keeps the card visually
	   attached to the form. */
	max-width: 1000px;
}

/* Stack earlier than the global 600px breakpoint: between 601px and
   ~768px the 1fr form column (~250-400px) gets narrower than the fixed
   280px card, inverting the visual hierarchy. */
@media (max-width: 768px) {
	.sg-report-layout { grid-template-columns: 1fr; }
}

/**** Report form ****/
.sg-form { max-width: 640px; }

.sg-form-group { margin-bottom: 18px; }

.sg-form-group label {
	display: block;
	font-size: 13px;
	font-family: "Montserrat-Medium", sans-serif;
	color: #000000;
	margin-bottom: 6px;
}

.sg-form-group input[type="text"],
.sg-form-group input[type="email"],
.sg-form-group textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 15px;
	border: 1px solid #cccccc;
	border-radius: 10px;
	background: #ffffff;
	font-family: "Montserrat-Regular", sans-serif;
	font-size: 14px;
}

.sg-form-group textarea { min-height: 130px; resize: vertical; }

.sg-form-group .help-block {
	color: #c0392b;
	font-size: 12px;
	margin-top: 6px;
}

.sg-form-group.has-error input,
.sg-form-group.has-error textarea {
	border-color: #c0392b;
}

/* Honeypot: visually hidden (off-screen, not display:none) so it still
   exists for scripted bots to fill in, but is unreachable/unannounced for
   real users (tabindex="-1" + aria-hidden="true" on the input itself). */
.sg-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	left: -9999px;
}

.sg-form-actions { margin-top: 22px; }

.sg-btn {
	display: inline-block;
	padding: 14px 40px 13px;
	border: 0;
	border-radius: 10px;
	background: #133c8b;
	color: #ffffff;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.sg-btn:hover,
.sg-btn:focus-visible { background: #0d295e; }

.sg-alert {
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 14px;
	margin-bottom: 20px;
}

.sg-alert--success { background: #e8f7ee; border: 1px solid #b8e6c8; color: #1e6b3c; }

/**** Contact card (report section sidebar) ****/
.sg-contact-card {
	background: #f2f2f2;
	border-radius: 10px;
	padding: 24px;
	max-width: 420px;
}

/* Was previously scoped as ".sg-contact-row .sg-contact-label" (a span
   inside a link row on the old standalone Контакты tab). That row is gone;
   repurposed here as a standalone label line above the name. */
.sg-contact-label {
	display: block;
	font-size: 13px;
	font-family: "Montserrat-Medium", sans-serif;
	color: #6a6a6a;
	margin: 0 0 8px 0;
}

.sg-contact-name {
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 18px;
	color: #133c8b;
	margin: 0 0 4px 0;
}

.sg-contact-role { font-size: 14px; color: #555555; margin: 0; }

/**** FAQ ****/
.sg-faq-item {
	background: #f2f2f2;
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 4px 20px;
}

.sg-faq-item summary {
	cursor: pointer;
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 15px;
	color: #133c8b;
	padding: 14px 0;
	list-style: none;
}

.sg-faq-item summary::-webkit-details-marker { display: none; }

.sg-faq-item summary::before {
	content: "+";
	display: inline-block;
	width: 18px;
	font-family: "Montserrat-Bold", sans-serif;
}

.sg-faq-item[open] summary::before { content: "\2212"; }

.sg-faq-answer { font-size: 14px; line-height: 1.6; color: #000000; padding: 0 0 16px 18px; }

.sg-faq-answer a { color: #133c8b; }

/**** Policy accordions (documents & code of conduct bodies) ****/
.sg-faq-item.sg-policy { border-left: 4px solid #133c8b; }

.sg-policy summary {
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 16px;
}

.sg-policy-body {
	max-width: 900px;
	font-size: 14px;
	line-height: 1.6;
	color: #000000;
}

.sg-policy-body h3 {
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 17px;
	color: #133c8b;
	margin: 28px 0 12px 0;
}

.sg-policy-body h4 {
	font-family: "Montserrat-SemiBold", sans-serif;
	font-size: 15px;
	color: #133c8b;
	margin: 18px 0 8px 0;
}

.sg-policy-body p { margin: 0 0 12px 0; }

.sg-policy-body ul,
.sg-policy-body ol {
	margin: 0 0 12px 0;
	padding-left: 22px;
}

.sg-policy-body li { margin-bottom: 4px; }

/* The generic p/ul,ol/li rules above are more specific (two classes/a class
   plus a type) than these components' own standalone classes, so without
   this they'd silently clobber the spacing those components define for
   themselves. Restores each component to look exactly as its own base rule
   intends, regardless of nesting inside a policy body. */
.sg-policy-body .sg-flow { margin: 0; padding: 0; }

.sg-policy-body .sg-flow li,
.sg-policy-body .sg-principle { margin-bottom: 0; }

.sg-policy-body .sg-dos,
.sg-policy-body .sg-donts {
	margin: 0;
	padding: 14px 16px 14px 32px;
}

.sg-policy-body .sg-principles { margin: 0; padding: 0; }

.sg-policy-body .sg-principle-title { margin: 0 0 6px 0; }

.sg-policy-body .sg-principle-text { margin: 0; }

/* Nested cards: principles/dos/donts rendered inside a policy body sit on
   an already-gray .sg-faq-item card — flip them to white so they still
   read as cards. */
.sg-policy-body .sg-principle { background: #ffffff; }

/**** Language notice (shown when a document body has no kk/en translation) ****/
.sg-lang-note {
	background: #ffffff;
	border: 1px dashed #bfbfbf;
	border-radius: 10px;
	padding: 12px 16px;
	color: #555555;
	font-style: italic;
	font-size: 13px;
	margin: 0 0 16px 0;
}

/**** Document meta (file size / language, next to a doc-list or resource link) ****/
.sg-doc-meta {
	color: #6a6a6a;
	font-size: 12px;
	flex-shrink: 0;
}

/**** Dos & don'ts (digital safety policy) ****/
.sg-dos-donts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 12px 0 20px 0;
}

.sg-dos,
.sg-donts {
	margin: 0;
	padding: 14px 16px 14px 32px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
}

.sg-dos { background: #f0f9f2; border-left: 4px solid #1e6b3c; }

.sg-donts { background: #fdf2f2; border-left: 4px solid #c0392b; }

/**** Incident investigation flow diagram ****/
.sg-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sg-flow;
}

.sg-flow li {
	position: relative;
	min-height: 30px;
	padding: 6px 0 6px 44px;
	counter-increment: sg-flow;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	align-items: center;
}

.sg-flow li:last-child { border-bottom: 0; }

.sg-flow li::before {
	content: counter(sg-flow);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #133c8b;
	color: #ffffff;
	font-family: "Montserrat-Bold", sans-serif;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 600px) {
	.sg-tabs { justify-content: flex-start; }
	.sg-tab { font-size: 13px; margin-right: 6px; padding: 0 8px; }
	.sg-section { padding: 25px 0 10px; }
	.sg-section-title { font-size: 20px; }
	.sg-subtitle { font-size: 16px; }
	.sg-dos-donts { grid-template-columns: 1fr; }
	.sg-action-strip { padding: 14px 16px; }
	.sg-action-strip-btn { width: 100%; text-align: center; }
}