/*
Theme Name: Minden PD
Description: Custom lightweight theme for the Minden, LA Police Department. No page builder required. Works with WPForms.
Version: 1.0.0
Author: Minden Police Department
Text Domain: minden-pd
*/

:root {
  --ink: #11171c;
  --slate: #182028;      /* logo charcoal */
  --slate-2: #27323c;
  --accent: #7d9440;     /* brighter take on the logo's olive, readable on dark and light */
  --accent-dark: #4a5a30; /* the logo's olive */
  --silver: #a8abae;
  --paper: #f1f2f3;
  --white: #ffffff;
  --line: #d4d7da;
  --text: #1c2228;
  --muted: #5a636b;
  --link: #1b4f8f;
  --alert: #8f1f26;
  --head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1.125rem/1.6 var(--body);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--slate); }
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.hero :focus-visible, .page-head :focus-visible, .site-footer :focus-visible, .alert-bar :focus-visible { outline-color: #fff; }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - 2.5rem); }

.skip { position: absolute; left: -999px; top: 0; background: var(--white); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 0; }

/* Emergency strip */
.alert-bar { background: var(--alert); color: #fff; font-size: .95rem; font-weight: 600; }
.alert-bar .wrap { padding: .4rem 0; }
.alert-bar a { color: #fff; font-weight: 700; }

/* Header and navigation */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; flex-wrap: wrap; }
.brand img { display: block; width: auto; height: auto; max-height: 108px; }

.site-nav .menu, .site-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.site-nav .menu { display: flex; gap: .25rem; }
.site-nav li { position: relative; }
.site-nav a {
  display: block; padding: .6rem .85rem;
  font: 600 1rem var(--head); color: var(--ink); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover, .site-nav .current-menu-item > a { border-bottom-color: var(--accent); color: var(--ink); }
.site-nav .sub-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 20;
  min-width: 250px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  box-shadow: 0 8px 20px rgba(17, 23, 28, .12);
}
.site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { display: block; }
.site-nav .sub-menu a { border-bottom: 0; padding: .7rem 1rem; font-weight: 400; font-family: var(--body); }
.site-nav .sub-menu a:hover { background: var(--paper); }

.nav-toggle {
  display: none; font: 700 1rem var(--head); color: var(--ink);
  background: none; border: 2px solid var(--ink); padding: .5rem 1rem; cursor: pointer;
}

/* Home: hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--slate); color: #fff; padding: 3.5rem 0 5.5rem; }

/* Background video: sits behind a dark scrim so text stays readable on any footage */
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-media iframe {
  position: absolute; top: 50%; left: 50%; width: max(100%, 1400px); height: auto; aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%); border: 0; opacity: 0; transition: opacity .9s ease;
}
.hero-media.is-ready iframe { opacity: 1; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(17, 23, 28, .78) 0%, rgba(17, 23, 28, .68) 45%, rgba(17, 23, 28, .82) 100%);
}
.hero h1, .hero .lede { text-shadow: 0 2px 3px rgba(0, 0, 0, .6), 0 0 26px rgba(0, 0, 0, .5); }
.hero h1 {
  margin: 0; font: 800 clamp(2.2rem, 5.5vw, 3.9rem)/1.05 var(--head);
  letter-spacing: -.02em; max-width: 14ch;
}
.lede { margin: 1rem 0 2.5rem; font-size: 1.25rem; max-width: 40ch; color: #f2f4f5; }

.primary-tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.task-big {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  min-height: 11rem; height: 100%; padding: 1.5rem 1.5rem 1.4rem;
  color: #fff; text-decoration: none;
  background: rgba(24, 32, 40, .82); border: 1px solid rgba(255, 255, 255, .16); border-bottom: 6px solid var(--accent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  transition: background-color .15s, color .15s;
}
.task-name { font: 800 clamp(1.6rem, 2.6vw, 2.15rem)/1.1 var(--head); letter-spacing: -.01em; }
.task-note { font-size: 1rem; color: #c3c8cd; }
.task-big:hover, .task-big:focus-visible { background: var(--white); color: var(--ink); text-shadow: none; }
.task-big:hover .task-note, .task-big:focus-visible .task-note { color: var(--muted); }

/* Home: lists */
.block { padding: 3rem 0 .5rem; }
.block h2, .community h2 { margin: 0 0 1.25rem; font: 800 1.75rem/1.2 var(--head); color: var(--ink); letter-spacing: -.01em; }

.task-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.task-rows li { border-bottom: 1px solid var(--line); }
.task-rows a {
  display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: 1.5rem; align-items: baseline;
  padding: 1.15rem .5rem; text-decoration: none; color: var(--text);
}
.row-name { font: 700 1.3rem var(--head); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.row-note { color: var(--muted); }
.task-rows a:hover { background: var(--white); }

.community { background: var(--white); border-block: 1px solid var(--line); margin-top: 3rem; padding: 2.5rem 0; }
.community-inner { display: flex; align-items: center; gap: 2.5rem; }
.finest-emblem { flex: none; width: 220px; height: 220px; display: block; }
.community h2 { margin-bottom: .6rem; }
.community p { margin: 0 0 1.5rem; max-width: 52ch; color: var(--muted); }

.btn {
  display: inline-block; padding: .85rem 1.5rem; text-decoration: none;
  font: 700 1.05rem var(--head); color: #fff; background: var(--slate); border-bottom: 4px solid var(--accent);
}
.btn:hover { background: var(--ink); color: #fff; }
.more-info { padding-bottom: 3rem; }

/* Inner pages */
.page-head { background: var(--slate); color: #fff; padding: 2.5rem 0; }
.page-head h1 { margin: 0; font: 800 clamp(1.9rem, 4vw, 2.8rem)/1.1 var(--head); letter-spacing: -.015em; }
.post-date { margin: .5rem 0 0; color: #c3c8cd; font-size: .95rem; }
.entry { padding: 2.5rem 0 4rem; }
.entry h2, .entry h3 { font-family: var(--head); color: var(--ink); line-height: 1.2; margin: 2rem 0 .75rem; }
.entry p, .entry li { max-width: 70ch; }
.entry .post-item { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.entry .post-item h2 { margin: 0; font-size: 1.4rem; }
.entry .post-item .post-date { color: var(--muted); }

/* WPForms: match the site without touching form settings */
div.wpforms-container-full { margin: 1rem 0 0; max-width: 640px; }
div.wpforms-container-full .wpforms-form .wpforms-field-label { font: 700 1rem var(--body); color: var(--ink); }
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-form .wpforms-field-description { color: var(--muted); font-size: .95rem; }
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=url],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  width: 100%; max-width: 100%; padding: .7rem .8rem; font: 400 1.05rem var(--body);
  background: var(--white); color: var(--text); border: 1px solid #7d8a9b; border-radius: 2px;
}
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus { border-color: var(--slate); outline: 3px solid var(--accent-dark); outline-offset: 0; box-shadow: none; }
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form input[type=submit] {
  padding: .9rem 1.8rem; font: 700 1.05rem var(--head); color: #fff; background: var(--slate);
  border: 0; border-bottom: 4px solid var(--accent); border-radius: 0; cursor: pointer; height: auto;
}
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form input[type=submit]:hover { background: var(--ink); }
div.wpforms-container-full .wpforms-form .wpforms-error,
div.wpforms-container-full .wpforms-form label.wpforms-error { color: var(--alert); font-weight: 600; }
div.wpforms-container-full .wpforms-confirmation-container-full { background: #e9f3ea; border: 1px solid #7fae85; color: #1f4a27; }

/* Footer */
.site-footer { background: var(--ink); color: #d3d7db; padding-top: 2.5rem; }
.site-footer a { color: #fff; }
.footer-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-name { margin: 0 0 .4rem; font: 800 1.2rem var(--head); color: #fff; }
.site-footer address { font-style: normal; }
.footer-911 { margin: .6rem 0 0; font-weight: 600; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; align-content: start; }
.footer-legal { margin-top: 2rem; padding: 1.1rem 0 1.5rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .9rem; color: #a8abae; }

/* Small screens */
@media (max-width: 900px) {
  .primary-tasks { grid-template-columns: 1fr; }
  .task-big { min-height: 0; }
  .task-rows a { grid-template-columns: 1fr; gap: .25rem; }
  .community-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .finest-emblem { width: 180px; height: 180px; }
}
@media (max-width: 800px) {
  .brand img { max-height: 84px; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; width: 100%; }
  .site-nav.open { display: block; }
  .site-nav .menu { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .site-nav .sub-menu { display: block; position: static; border: 0; box-shadow: none; min-width: 0; padding-left: 1rem; }
  .site-nav a { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .hero-media video { display: none; } }

/* main receives focus from the skip link; no ring needed on the whole page */
main:focus { outline: none; }

/* Pause control for the background video (WCAG 2.2.2) */
.hero-pause {
  position: absolute; right: max(1.25rem, calc((100% - 1120px) / 2)); bottom: 1rem; z-index: 2;
  min-height: 44px; padding: .55rem 1rem; cursor: pointer;
  font: 600 .95rem var(--body); color: #fff;
  background: rgba(17, 23, 28, .88); border: 1px solid rgba(255, 255, 255, .7);
}
.hero-pause:hover { background: #fff; color: var(--ink); }


/* Menus: Escape dismisses an open dropdown (WCAG 1.4.13) */
.site-nav.esc .sub-menu { display: none !important; }

/* ------------------------------------------------------------------
   Elementor leftovers on inner pages
   1. Elementor can paint an old page or site background photo behind the
      content. The page background is set here so nothing shows through.
   2. If an Elementor script fails, elements with entrance animations stay
      invisible (this can hide forms). Make sure they always show.
   ------------------------------------------------------------------ */
html body,
body.elementor-page,
body.page {
  background-image: none !important;
  background-color: var(--paper) !important;
}
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

/* ------------------------------------------------------------------
   Elementor photo banners / parallax on inner pages.
   Removes the fixed background photo (and any overlay or parallax layer)
   so content no longer scrolls over a picture, and collapses the empty
   tall band left behind. Real <img> photos inside the content are not
   affected.
   ------------------------------------------------------------------ */
.elementor-section,
.elementor-section .elementor-container,
.elementor-column,
.elementor-widget-wrap,
.e-con,
.e-con-inner,
.elementor-background-overlay,
.elementor-motion-effects-layer {
  background-image: none !important;
  background-attachment: scroll !important;
}
.elementor-motion-effects-container,
.elementor-background-video-container,
.elementor-background-slideshow { display: none !important; }
.elementor-section.elementor-section-height-min-height,
.elementor-section.elementor-section-height-min-height > .elementor-container,
.elementor-section.elementor-section-height-full,
.e-con { min-height: 0 !important; }