/* =====================================================================
   MAGNOLIA HILLS — SHARED DEPARTMENT SECTION STYLES
   ---------------------------------------------------------------------
   Used by every department section (Police, Government, Fire & Rescue,
   City Works). All classes are prefixed .sect- and this file is loaded
   only by those pages, so no existing page is affected. Divisions,
   hiring steps, FAQs and forms reuse components that already exist in
   css/styles.css and css/appform.css.
   ===================================================================== */

/* ---------- Roleplay notice bar ---------- */
.sect-notice {
  background: var(--midnight); color: rgba(245,235,221,.9);
  border-bottom: 1px solid rgba(198,154,75,.35);
  padding-top: var(--header-h);
}
.sect-notice.is-green { background: var(--green); }
.sect-notice .container { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; }
.sect-notice ~ .page-hero { padding-top: 0; }
.sect-notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--gold-pale); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sect-notice p { margin: 0; font-size: .88rem; line-height: 1.55; }
.sect-notice strong { color: var(--cream); font-weight: 500; }

/* ---------- Section sub-navigation ---------- */
.sect-subnav { border-bottom: 1px solid var(--taupe-line); background: var(--cream); position: sticky; top: 70px; z-index: 40; }
.sect-subnav .container { display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: thin; }
.sect-subnav a {
  flex: 0 0 auto; padding: 16px 16px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-soft); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.sect-subnav a:hover { color: var(--gold-deep); }
.sect-subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.sect-subnav .sect-subnav-label {
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .04em; color: var(--gold-deep);
  padding-right: 18px; margin-right: 4px; border-right: 1px solid var(--taupe-line);
  text-transform: none; font-weight: 500; flex: 0 0 auto;
}

/* Division cards: the homepage grid is sized for its own count, so on
   department pages let the row fit however many divisions there are. */
.sect-notice ~ section .dept-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- Roles listed inside a division card ---------- */
.sect-roles { border-top: 1px solid var(--taupe-line); padding-top: 12px; margin-top: 4px; display: grid; gap: 4px; text-align: left; width: 100%; }
.sect-roles li { position: relative; padding-left: 16px; font-size: .82rem; color: var(--ink-soft); line-height: 1.45; }
.sect-roles li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ---------- What the department looks for ---------- */
.sect-qualities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; }
.sect-quality { border-top: 2px solid var(--gold); padding-top: 18px; min-width: 0; }
.sect-quality h3 { font-size: 1.4rem; margin-bottom: 8px; }
.sect-quality p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.section-midnight .sect-quality h3, .section-green .sect-quality h3 { color: var(--cream); }
.section-midnight .sect-quality p, .section-green .sect-quality p { color: rgba(245,235,221,.75); }

/* ---------- Training / procedure areas ---------- */
.sect-training { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: tr; }
.sect-training li {
  counter-increment: tr; position: relative; padding: 14px 18px 14px 56px;
  border: 1px solid var(--taupe-line); border-radius: var(--radius-lg); background: var(--cream);
  font-family: var(--serif); font-size: 1.2rem; min-width: 0;
}
.sect-training li::before {
  content: counter(tr, decimal-leading-zero); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; color: var(--gold-deep); font-weight: 500;
}

/* ---------- Contact / FAQ split ---------- */
.sect-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.sect-contact > * { min-width: 0; }
.sect-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; padding: 0; margin: 0 0 26px; }
.sect-info li { border: 1px solid var(--taupe-line); border-radius: var(--radius-lg); padding: 20px 20px 18px; background: var(--cream); min-width: 0; overflow-wrap: anywhere; }
.sect-info .eyebrow { margin-bottom: 8px; }
.sect-info p { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.5; }

@media (max-width: 1024px) {
  .sect-qualities { grid-template-columns: 1fr 1fr; }
  .sect-contact { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sect-qualities { grid-template-columns: 1fr; }
  .sect-info { grid-template-columns: 1fr; }
  .sect-training li { font-size: 1.05rem; padding-left: 50px; }
  /* long uppercase buttons wrap rather than push the page wide (department pages only) */
  .sect-notice ~ section .btn { white-space: normal; text-align: center; }
}