/**
 * Drupal-only overrides. Loaded after theme.css.
 *
 * theme.css is copied verbatim from html/assets/css/theme.css so the two
 * builds stay diffable — put every Drupal-specific rule here instead of
 * editing that file.
 */

/* ---------- progressive enhancement ---------- */

/* theme.css hides [data-reveal] unconditionally, which is fine for the static
   SPA (it needs JS anyway) but not here: Drupal renders content server-side and
   it must survive JS failing. Core puts .js on <html>, so gate the hide on it. */
[data-reveal] { opacity: 1; transform: none; }
html.js [data-reveal] { opacity: 0; transform: translateY(18px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Same reasoning for the wizard: without JS every step stays visible and the
   submit button is the only control shown, so the form still posts in one go. */
html:not(.js) #cfi-stepper,
html:not(.js) #cfi-step-back,
html:not(.js) #cfi-step-next,
html:not(.js) #cfi-step-count { display: none; }
html:not(.js) #cfi-step-submit { display: inline-flex !important; }
html:not(.js) .fstep[hidden] { display: block; }

/* ---------- Drupal chrome ---------- */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
  width: auto;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
  z-index: 1080;
}

/* Contextual links and the local-task tabs inherit Barrio styling; just keep
   them off the tiles' rounded corners. */
.block-local-tasks-block .nav-tabs { border-bottom-color: var(--line); margin-bottom: 1.5rem; }
.contextual-region { position: relative; }

/* Messages, mapped onto the notice palette. */
.messages--error { background: var(--alert-050); border: 1.5px solid var(--alert-200); color: var(--alert-700); }
.messages--status { background: var(--safe-050); border: 1.5px solid var(--safe); color: var(--safe); }
.messages { border-radius: var(--r); padding: 1rem 1.25rem; font-weight: 600; }

/* Paragraph steps (golden hour, "how to report"). The static build sets these
   colours inline on each step; here the markup comes from
   paragraph--step-item.html.twig, so they belong to the tile that holds it. */
.cfi-step .numeral { font-size: 2.2rem; }
.tile--ox .cfi-step .numeral,
.tile--ox .cfi-step .fw-semibold { color: #fff; }
.tile--ox .cfi-step .small { color: #DCE7FB; }

/* Homepage section headers. The static build emits these as a full-width bento
   tile; here they sit above each view's own .bento, so they only need the
   spacing and the chevron link. */
.section-head { padding: 2.5rem 0 1.5rem; }
.section-head h2 { margin-bottom: .5rem; }
.section-head .more-link a,
.more-link a { text-decoration: none; font-weight: 600; }
.section-head .more-link a::after,
.more-link a::after { content: " \203A"; }

/* Listing pages. head() in the static build prints the h1 and the lead
   together; here the h1 is the page-title block and the lead is the view's
   header area, so they are centred to the same measure to read as one header. */
.block--cfi-page-title,
.view-header { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.block--cfi-page-title { margin-bottom: 1rem; }
.view-header { margin-bottom: 3rem; }
.view-header p { font-size: clamp(1.05rem, .6vw + .95rem, 1.25rem); color: var(--body); margin-bottom: 0; }

/* ---------------------------------------------------------------- homepage.
 * renderHome() in html/assets/js/app.js lays the front page out as one bento
 * whose cells are hand-sized. In Drupal every cell is a separately placed
 * block, so the spans are applied here by machine name rather than by a class
 * in the markup. region--content.is-home is set in cfi_preprocess_region().
 */
.region--content.is-home > .bento > * { grid-column: span 12; }

@media (min-width: 992px) {
  .region--content.is-home > .bento > .block--cfi-home-golden  { grid-column: span 8; }
  .region--content.is-home > .bento > .block--cfi-home-dial    { grid-column: span 4; }
  .region--content.is-home > .bento > .block--cfi-home-stories { grid-column: span 7; }
  .region--content.is-home > .bento > .block--cfi-home-videos  { grid-column: span 5; }
}

/* The hero sits above the grid in the static build, so it keeps the full
 * width and its own vertical rhythm rather than the bento gap. */
.region--content.is-home > .bento > .block--cfi-home-hero {
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* A view block that is itself a bento cell must not add a second container.
   Do not inherit gap here: the nested grid's immediate parent is a Views
   wrapper whose computed gap is `normal` (zero), which made its cards touch. */
.region--content.is-home .bento .bento { gap: 20px; }
@media (min-width: 768px) {
  .region--content.is-home .bento .bento { gap: 16px; }
}
@media (min-width: 992px) {
  .region--content.is-home .bento .bento { gap: 18px; }
}

/* ---------- site navigation ---------- */
.navbar .region--header { display: contents; }
.navbar .offcanvas-body > .region--primary-menu {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
}
.navbar .block--cfi-main-menu { flex: 1 1 auto; }
.navbar .block--cfi-language-switcher { flex: 0 0 auto; }
.navbar-toggler { color: var(--ink); font-size: 1.7rem; }
@media (max-width: 991.98px) {
  .navbar .offcanvas-body > .region--primary-menu { align-items: stretch; flex-direction: column; }
  .navbar .navbar-nav { gap: .25rem; }
  .navbar .nav-link { font-size: 1rem; padding: .8rem .9rem; border-bottom:1px solid var(--line); }
  .navbar .nav-link.active { color:var(--ox); background:var(--ox-050); border-bottom-color:transparent; }
  .navbar .langpill { align-self: flex-start; margin-top: 1rem; }
}

/* Barrio's default related Views use .view-content.row. Full card collections
   need a responsive grid, while related_frauds sits inside a half-width tile
   and intentionally uses compact vertical links. */
.view-blog-related .view-content,
.view-stories-by-fraud .view-content {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin:0;
}
.view-blog-related .view-content > *,
.view-stories-by-fraud .view-content > * {
  width:auto;
  max-width:none;
  padding:0;
  display:grid;
}
@media (min-width:768px) {
  .view-blog-related .view-content,
  .view-stories-by-fraud .view-content {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
}
@media (min-width:992px) {
  .view-blog-related .view-content,
  .view-stories-by-fraud .view-content {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
}

.view-related-frauds .view-content {
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
}
.view-related-frauds .related-fraud-link {
  display:flex;
  align-items:center;
  width:100%;
  max-width:none;
  gap:.75rem;
  padding:.65rem 0;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.view-related-frauds .related-fraud-link:last-child { border-bottom:0; }
.view-related-frauds .related-fraud-link__icon {
  flex:0 0 38px;
  width:38px;
  height:38px;
  font-size:1rem;
}

/* Listing notes and other final blocks need breathing room before the footer. */
.layout-content > .region--content:not(.is-home):not(.is-report) {
  padding-bottom:clamp(3rem,5vw,4.5rem);
}

/* ---------- report page ---------- */
.region--content.is-report > .bento > * { grid-column: span 12; }
.region--content.is-report .report-head { padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.report-content > .field--name-body > .field__item { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.report-content > .field--name-body > .field__item > * { grid-column:1 / -1; }
.report-content > .field--name-body > .field__item > p:first-child {
  max-width:64ch;
  margin:0 auto clamp(1.5rem,3vw,2.5rem);
  color:var(--muted);
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.6;
  text-align:center;
}
.report-content h2 { margin:clamp(1.25rem,3vw,2rem) 0 .25rem; }
.report-content ol {
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:report-step;
}
.report-content ol > li {
  position:relative;
  min-height:100%;
  padding:1.25rem 1.25rem 1.25rem 4.5rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:#F5F5F7;
  counter-increment:report-step;
}
.report-content ol > li::before {
  position:absolute;
  top:1.25rem;
  left:1.25rem;
  display:grid;
  width:2.25rem;
  height:2.25rem;
  place-items:center;
  border-radius:50%;
  background:var(--ox);
  color:#fff;
  font-weight:800;
  content:counter(report-step);
}
.report-content ol h3 { margin:0 0 .35rem; font-size:1.1rem; }
.report-content ol p { margin:0; color:var(--muted); }
.report-content dl {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.25rem 1rem;
  margin:0;
  padding:clamp(1.25rem,3vw,2rem);
  border-radius:20px;
  background:var(--ink);
  color:#DCE7FB;
}
.report-content dt { font-weight:700; }
.report-content dt a { color:#fff; font-size:1.2rem; font-weight:800; }
.report-content dd { margin:0 0 .9rem; color:#B8C7E0; }
.report-content dd:last-child { margin-bottom:0; }
.report-content #report-disclaimer,
.report-content #report-disclaimer + p {
  margin:0;
  padding-inline:clamp(1.25rem,3vw,2rem);
  border-inline:1px solid #A9BDF8;
  background:var(--ox-050);
}
.report-content #report-disclaimer { padding-top:1.25rem; border-radius:18px 18px 0 0; font-size:1.15rem; }
.report-content #report-disclaimer + p { padding-bottom:1.25rem; border-radius:0 0 18px 18px; color:var(--muted); }
@media (min-width: 768px) {
  .report-content ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .report-content ol > li:last-child { grid-column:1 / -1; }
}
@media (min-width: 992px) {
  .region--content.is-report > .bento > .block--cfi-content,
  .region--content.is-report > .bento > .block--cfi-report-portals { grid-column:span 12; }
  .report-content h2 { grid-column:1 / -1; }
  .report-content ol { grid-column:1 / span 8 !important; grid-row:3 / span 4; }
  .report-content #report-helplines { grid-column:9 / -1; grid-row:3; }
  .report-content dl { grid-column:9 / -1 !important; grid-row:4; }
  .report-content #report-disclaimer { grid-column:9 / -1; grid-row:5; }
  .report-content #report-disclaimer + p { grid-column:9 / -1; grid-row:6; }
}
.block--cfi-report-portals .section-head { margin-top: 1rem; }

/* ---------- article body ---------- */
.cfi-article-body .field__item { color:var(--body); }
.cfi-article-body .field__item > h2 { margin:2rem 0 1rem; color:var(--ink); font-size:1.5rem; }
.cfi-article-body .field__item > h2:first-child { margin-top:0; }
.cfi-article-body .field__item > p { line-height:1.75; }

/* ---------- published article/fraud media ---------- */
.cfi-published-image,
.cfi-published-video { overflow:hidden; }
.cfi-published-image .field,
.cfi-published-image .field__item,
.cfi-published-image .media,
.cfi-published-video .field,
.cfi-published-video .field__item,
.cfi-published-video .media { width:100%; }
.cfi-published-image img {
  display:block;
  width:100%;
  height:auto;
  max-height:min(70vh,48rem);
  object-fit:cover;
  border-radius:14px;
}
.cfi-published-video iframe,
.cfi-published-video video {
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  border:0;
  border-radius:14px;
  background:#000;
}

/* ---------- forum thread ---------- */
/* The shared layout (.cfi-thread, .cfi-thread__count, .cfi-forum-rules__list)
   lives in theme.css, which is a verbatim copy of html/assets/css/theme.css.
   Only the Drupal-only rules are below. */

/* Threading. CommentViewBuilder::alterBuild() wraps each nested reply in
   <div class="indented"> — that markup comes from PHP, not from a template,
   so the only way to show the nesting is here. */
.cfi-thread__list .indented {
  display:grid;
  gap:1rem;
  margin-top:1rem;
  padding-left:clamp(1rem, 3vw, 2.25rem);
  border-left:2px solid var(--line);
}
.cfi-thread__list .indented:last-child { margin-bottom:0; }

/* .section-head carries listing-page padding (above); in the thread it sits
   directly under the topic tile, so most of that gap is dead space. */
.cfi-thread .section-head { padding:1rem 0 0; }

/* Comment action links (reply / edit / delete). Core renders them as a plain
   <ul class="links">; make them read as quiet controls, not body copy. */
.cfi-thread__list .links {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.cfi-thread__list .links a {
  display:inline-block;
  padding:.25rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
}
.cfi-thread__list .links a:hover { border-color:#B4C7EC; background:#F5F5F7; }

/* Reply form. Barrio puts .form-control on every button, which stretches the
   actions to full width and stacks them; undo that and lay them out in a row. */
.cfi-reply-form .comment-form > * { margin-bottom:1rem; }
.cfi-reply-form .comment-form > *:last-child { margin-bottom:0; }
.cfi-reply-form label { font-weight:600; color:var(--ink); }
.cfi-reply-form .form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
}
.cfi-reply-form .form-actions .button,
.cfi-reply-form .form-actions input[type="submit"] {
  width:auto;
  flex:0 0 auto;
}
.cfi-reply-form .form-actions .button--primary { order:-1; }
.cfi-reply-form .filter-wrapper,
.cfi-reply-form .js-filter-wrapper { padding:0; border:0; }
.cfi-reply-form .filter-guidelines,
.cfi-reply-form .js-filter-guidelines { font-size:.85rem; color:var(--muted); }

/* Standalone /comment/reply page. Core normally presents this as a giant page
   title followed by an unlabelled parent comment and a raw entity form. */
.route--comment-reply .layout-content {
  max-width:58rem;
  margin-inline:auto;
}
.route--comment-reply .page-title {
  margin:clamp(2rem, 5vw, 4rem) 0 1.25rem;
  font-size:clamp(2rem, 5vw, 3.75rem);
  line-height:1.02;
}
.route--comment-reply .cfi-replying-to { margin:0 0 .65rem; }
.route--comment-reply .cfi-parent-comment { margin-bottom:1.25rem; border-color:#C7D5EE; }
.route--comment-reply .comment-form {
  padding:clamp(1.25rem, 4vw, 2rem);
  margin-bottom:clamp(2rem, 5vw, 4rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 16px 40px rgba(9,31,67,.07);
}
.route--comment-reply .comment-form > * { margin-bottom:1.1rem; }
.route--comment-reply .comment-form > *:last-child { margin-bottom:0; }
.route--comment-reply .comment-form label { font-weight:700; color:var(--ink); }
.route--comment-reply .comment-form textarea { min-height:11rem; }
.route--comment-reply .form-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  padding-top:.25rem;
}
.route--comment-reply .form-actions .button,
.route--comment-reply .form-actions input[type="submit"] { width:auto; flex:0 0 auto; }
.route--comment-reply .form-actions .button--primary { order:-1; }
.route--comment-reply .form-actions .cfi-button-secondary,
.cfi-reply-form .form-actions .cfi-button-secondary {
  color:var(--ink) !important;
  background:#fff !important;
  border:1px solid #AFC0DB !important;
}
.route--comment-reply .form-actions .cfi-button-secondary:hover,
.cfi-reply-form .form-actions .cfi-button-secondary:hover { background:#F5F7FB !important; }
.route--comment-reply .filter-wrapper,
.route--comment-reply .js-filter-wrapper { padding:0; border:0; }
.cfi-reply-context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}

@media (max-width:575.98px) {
  .route--comment-reply .page-title { margin-top:1.5rem; }
  .route--comment-reply .comment-form { padding:1.1rem; }
  .route--comment-reply .form-actions { display:grid; }
  .route--comment-reply .form-actions .button,
  .route--comment-reply .form-actions input[type="submit"] { width:100%; }
  .cfi-reply-context { align-items:flex-start; flex-direction:column; }
}

/* ---------- footer ---------- */
.block--cfi-footer-disclaimer p:last-child,
.block--cfi-footer-brand p:last-child { margin-bottom:0; }

/* ---------- contact (/contact) ----------
   Barrio's .form-control on the submit stretches it; the static build's
   contact button is auto width, so match it. */
.cfi-contact-form .form-actions { margin:1.25rem 0 0 !important; }
.cfi-contact-form .form-actions input[type="submit"] {
  width:auto;
  padding:.7rem 1.4rem;
  font-weight:600;
  border-radius:999px;
}
.cfi-contact-form > .form-item:last-of-type,
.cfi-contact-form .captcha { margin-bottom:0; }
.cfi-contact .cfi-article-help { margin-top:0; }
.cfi-contact-form .form-actions input.btn-alert {
  background:var(--alert);
  color:#fff;
  border:0;
}
.cfi-contact-form .form-actions input.btn-alert:hover,
.cfi-contact-form .form-actions input.btn-alert:focus { background:#E22A43; color:#fff; }

/* Barrio draws a red SVG asterisk after every .form-required, and
   templates/field/form-element-label.html.twig already prints a text " *" —
   so every required label showed two. The static build has only the text. */
.form-required::after { content:none; display:none; background:none; }