/* ==========================================================================
   POLLE theme skin for upehs.com  (one-page-express 1.3.14 + companion 1.6.19)
   --------------------------------------------------------------------------
   Repaints the WordPress site in the POLLE Safety visual language used by
   safety.upehs.com: sky/slate ramp, slate-tinted shadows, one-stop-larger
   radii, 600-weight tight headings.

   Enqueued LAST from wp-content/mu-plugins/upehs-fixes.php (wp_enqueue_scripts
   at a very late priority, after the theme, the companion sheets, jetpack.css
   and every inline <style> block). Delete that enqueue and the site reverts
   exactly as it was — this file changes nothing on its own.

   COSMETIC ONLY. No width, max-width, flex-basis, float, position or display
   is set on any layout container, on .sidebar/.widget, on .gridContainer, on
   .post-content-single/.post-content-inner, or on anything AdSense injects.
   Ad slot geometry is untouched.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS  — POLLE ramp (src/design-system/tokens.ts). Edit here to re-tint.
   ========================================================================== */

:root {
  /* primary — POLLE blue (sky) */
  --polle-primary-50:  #F0F9FF;
  --polle-primary-100: #E0F2FE;
  --polle-primary-200: #BAE6FD;
  --polle-primary-300: #7DD3FC;
  --polle-primary-500: #0EA5E9;
  --polle-primary-600: #0284C7;
  --polle-primary-700: #0369A1;
  --polle-primary-800: #075985;

  /* neutral — slate */
  --polle-neutral-50:  #F8FAFC;
  --polle-neutral-100: #F1F5F9;
  --polle-neutral-200: #E2E8F0;
  --polle-neutral-300: #CBD5E1;
  --polle-neutral-400: #94A3B8;
  --polle-neutral-500: #64748B;
  --polle-neutral-600: #475569;
  --polle-neutral-700: #334155;
  --polle-neutral-800: #1E293B;
  --polle-neutral-900: #0F172A;

  /* accents actually used on the marketing page */
  --polle-success-600: #16A34A;
  --polle-warning-500: #F59E0B;
  --polle-warning-600: #D97706;

  /* roles */
  --polle-bg:        var(--polle-neutral-50);
  --polle-surface:   #FFFFFF;
  --polle-border:    var(--polle-neutral-200);
  --polle-text:      var(--polle-neutral-900);
  --polle-text-2:    var(--polle-neutral-600);
  --polle-text-3:    var(--polle-neutral-500);

  /* radii — one stop LARGER than Tailwind stock, per tokens.ts */
  --polle-r-sm: 6px;
  --polle-r-md: 8px;
  --polle-r-lg: 12px;
  --polle-r-xl: 16px;
  --polle-r-2xl: 20px;
  --polle-r-full: 9999px;

  /* shadows — slate-tinted rgba(15,23,42,…), never black */
  --polle-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --polle-shadow-md: 0 4px 6px rgba(15, 23, 42, .10);
  --polle-shadow-lg: 0 10px 15px rgba(15, 23, 42, .10);

  /* motion */
  --polle-ease: cubic-bezier(.4, 0, .2, 1);
  --polle-fast: 150ms;

  /* type — Inter is NOT loaded here; the PHP enqueues Google Fonts. If it
     never loads, this resolves to system-ui exactly like safety.upehs.com. */
  --polle-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================================================
   2. BASE TYPE  — one family, slate text, POLLE link colours
   ========================================================================== */

body {
  font-family: var(--polle-font);
  font-weight: 400;
  font-size: 1.0625rem;          /* 17px at a default root, but still scales with the reader's setting */
  line-height: 1.6;
  color: var(--polle-text-2);
  -webkit-font-smoothing: antialiased;
}

/* Page ground: neutral-50 instead of the New York wallpaper.
   !important — the wallpaper is an inline <style id="custom-background-css">
   rule on body.custom-background, so nothing else beats it. */
body.custom-background { background-image: none !important; background-color: var(--polle-bg) !important; }

h1, h2, h3, h4, h5, h6 { font-family: var(--polle-font); color: var(--polle-text); letter-spacing: -.025em; font-weight: 600; }

h1 { font-size: 2.6em; line-height: 1.1;  text-transform: none; margin: 0 0 24px; }
h2 { font-size: 1.9em; line-height: 1.2;  font-weight: 600; color: var(--polle-text); margin: 0 0 20px; }
h3 { font-size: 1.35em; line-height: 1.3; margin: 0 0 14px; }
h4 { font-size: 1.15em; line-height: 1.45; margin: 0 0 12px; }
h5 { font-size: 1em; line-height: 1.5; letter-spacing: -.01em; margin: 18px 0 10px; }
h6 {
  font-size: .78em; line-height: 1.4; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--polle-primary-700);
  margin: 10px 0;
}

p { margin: 0 0 16px; }

a { color: var(--polle-primary-700); font-weight: 500; text-decoration: none; }
a:visited { color: var(--polle-primary-700); }
a:hover { color: var(--polle-primary-800); text-decoration: underline; }

blockquote {
  border-left: 3px solid var(--polle-primary-300);
  background: var(--polle-primary-50);
  border-radius: 0 var(--polle-r-lg) var(--polle-r-lg) 0;
  padding: 14px 20px;
  color: var(--polle-neutral-700);
  font-style: normal;
}


/* ==========================================================================
   3. HEADER / NAV  — colours and type only. .header-top keeps the theme's
      own placement and stacking; section 13 gives it an opaque ground (the
      new logo needs it) but touches no geometry.
   ========================================================================== */

#drop_mainmenu > li > a {
  font-family: var(--polle-font);
  color: #FFFFFF;
  font-weight: 500;
  font-size: .82em;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color var(--polle-fast) var(--polle-ease);
}

#drop_mainmenu > li:hover > a,
#drop_mainmenu > li.hover > a { color: var(--polle-primary-200); letter-spacing: .04em; text-shadow: none; }

/* Current page: swap the theme's white 1px underline for the POLLE accent. */
#drop_mainmenu > li.current_page_item > a { border-bottom-width: 2px; border-bottom-color: var(--polle-primary-500); text-shadow: none; }

/* Stuck nav (mobile) + the theme's solid variant. */
.header-top.fixto-fixed { background-color: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 0 var(--polle-border), var(--polle-shadow-sm); }

.header-top.fixto-fixed #drop_mainmenu > li > a { color: var(--polle-neutral-600); }
.header-top.fixto-fixed #drop_mainmenu > li:hover > a { color: var(--polle-neutral-900); }
.header-top.fixto-fixed #drop_mainmenu > li.current_page_item > a { color: var(--polle-neutral-900); }

a#fm2_drop_mainmenu_mobile_button { color: var(--polle-primary-500); }


/* ==========================================================================
   4. HERO  — recolour only. Kirki's !important width/alignment rules on
      .header-content and .align-holder are left alone deliberately.
   ========================================================================== */

/* Overlay: swap the black 0.4 scrim for a slate one. !important because the
   Kirki inline block sets background-color/opacity on this exact selector. */
.header-homepage.color-overlay:before,
.header.color-overlay:before { background-color: var(--polle-neutral-900) !important; opacity: .55 !important; }

h1.heading8 {
  font-family: var(--polle-font);
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-transform: none;
}

p.header-subtitle { font-family: var(--polle-font); font-weight: 400; color: var(--polle-neutral-100); line-height: 1.5; }

/* Hero wedge fill follows the new white section ground. */
.svg-white-bg { fill: var(--polle-bg); }   /* .homepage-template is front-page only; inner pages need the wedge too */


/* ==========================================================================
   5. BUTTONS  — POLLE Button.tsx: 8px radius, 500 weight, sentence case,
      slate-tinted shadow, 150ms transition.
   ========================================================================== */

.button,
.nav-previous a,
.nav-next a {
  font-family: var(--polle-font);
  font-weight: 500;
  font-size: .8em;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--polle-r-md);
  box-shadow: var(--polle-shadow-sm);
  padding: 10px 18px;
  transition: background-color var(--polle-fast) var(--polle-ease),
              color var(--polle-fast) var(--polle-ease),
              border-color var(--polle-fast) var(--polle-ease),
              box-shadow var(--polle-fast) var(--polle-ease);
}

.button.big { padding: 12px 24px; font-size: .95em; }
.button.small { padding: 6px 12px; font-size: .78em; border-radius: var(--polle-r-sm); }

/* The theme's hover throws a heavy black triple-shadow — replace it. */
.button:hover,
.nav-previous a:hover,
.nav-next a:hover { box-shadow: var(--polle-shadow-md); text-decoration: none; }

.button:active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); }

/* .button:visited sets color:initial in the theme — re-assert per variant. */
.button.blue, .button.blue:visited { background-color: var(--polle-primary-700); color: #FFFFFF; }
.button.blue:hover, .button.blue:active { background-color: var(--polle-primary-800); color: #FFFFFF; }

.button.green, .button.green:visited { background-color: var(--polle-primary-700); color: #FFFFFF; }
.button.green:hover, .button.green:active { background-color: var(--polle-primary-800); color: #FFFFFF; }

.button.dark-blue, .button.dark-blue:visited { background-color: var(--polle-primary-700); color: #FFFFFF; }
.button.purple, .button.purple:visited { background-color: var(--polle-primary-800); color: #FFFFFF; }

/* Yellow is the CTA-band button: POLLE has no yellow CTA, so it becomes the
   white-on-blue inverse used by the marketing closing CTA. */
.button.yellow, .button.yellow:visited { background-color: var(--polle-surface); color: var(--polle-primary-700); }
.button.yellow:hover, .button.yellow:active { background-color: var(--polle-primary-50); color: var(--polle-primary-800); }

/* Theme outline buttons (there is no .button-outline anywhere). */
.button.transparent, .button.transparent:visited {
  border: 1px solid rgba(255, 255, 255, .7); color: #FFFFFF; box-shadow: none;
}
.button.transparent:hover { background-color: rgba(255, 255, 255, .12); }

.button.transparent-dark, .button.transparent-dark:visited {
  border: 1px solid var(--polle-neutral-500); color: var(--polle-neutral-700); box-shadow: none;
}
.button.transparent-dark:hover { background-color: var(--polle-neutral-100); }

/* The two hero buttons. Prefixed with .button so they outrank .button.blue and
   .button.green above; without that prefix these rules never applied at all. */
.button.hp-header-primary-button, .button.hp-header-primary-button:visited {
  background-color: var(--polle-primary-700); color: #FFFFFF;
}
.button.hp-header-primary-button:hover { background-color: var(--polle-primary-800); }

.button.hp-header-secondary-button, .button.hp-header-secondary-button:visited { background-color: rgba(255, 255, 255, .95); color: var(--polle-primary-700); box-shadow: var(--polle-shadow-md); }
.button.hp-header-secondary-button:hover { background-color: #FFFFFF; color: var(--polle-primary-800); }

/* Keyboard focus ring: ring-2 + white offset, per Button.tsx. */
.button:focus-visible,
.nav-previous a:focus-visible,
.nav-next a:focus-visible,
.sidebar a:focus-visible,
#drop_mainmenu > li > a:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--polle-primary-700); }

/* Windows High Contrast paints no box-shadow, so the ring above disappears there.
   A transparent outline is repainted by the OS; this makes that explicit. */
@media (forced-colors: active) {
  .button:focus-visible,
  .nav-previous a:focus-visible,
  .nav-next a:focus-visible,
  .sidebar a:focus-visible,
  .searchform #s:focus,
  #drop_mainmenu > li > a:focus-visible { outline: 2px solid; outline-offset: 2px; }
}


/* ==========================================================================
   6. SECTIONS  — grounds and hairlines. The four inline background
      attributes (#features-2, #team-1, #numbers, .header-homepage) need
      !important; each is called out below.
   ========================================================================== */

/* The inner-page content region. The theme paints .content #EBEBEB, and that is
   the ground behind every gap between the new white cards on posts, archives and
   pages -- the homepage hid it only because its sections tile over it. */
.content { background-color: var(--polle-bg); }

/* Features band: #f6f6f6 inline -> neutral-50, with the POLLE hairline. */
#features-2 {
  background-color: var(--polle-neutral-50) !important;   /* beats inline style attr */
  border-top: 1px solid var(--polle-neutral-100);
  border-bottom: 1px solid var(--polle-neutral-100);
}

/* Team band is already #ffffff inline — matches POLLE, so no !important. */
#team-1 { border-bottom: 1px solid var(--polle-neutral-100); }

/* Numbers band: drop the wallpaper for the POLLE primary-600 announcement
   ground. !important — the image is an inline style attribute. */
#numbers {
  background-image: none !important;                      /* beats inline style attr */
  background-color: var(--polle-primary-600) !important;  /* beats inline style attr */
}

.numbers-section:before { background-color: transparent; }

h2.numbers-numbertext { color: #FFFFFF; font-weight: 600; letter-spacing: -.025em; }

h3.numbers-titletext {
  color: #FFFFFF;
  font-size: .85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Section intro copy */
.features-image-cards-textcol h2,
.team-colors-textcol h2 { color: var(--polle-text); font-weight: 600; }

.features-image-cards-textcol p,
.team-colors-textcol p { color: var(--polle-text-2); }

/* CTA band -> POLLE primary-600 (no inline style on #cta-1, so no !important). */
.cta-blue-section { background-color: var(--polle-primary-600); }
h2.cta-blue-text { color: #FFFFFF; font-weight: 600; letter-spacing: -.025em; }
b.element2 { font-weight: 600; }


/* ==========================================================================
   7. CARDS  — 2xl/xl radii, 1px neutral-200 border, slate shadow-sm.
      Widths come from the cpNcols !important grid and are not touched.
   ========================================================================== */

.features-image-cards-cardrow {
  background-color: var(--polle-surface);
  border-radius: var(--polle-r-xl);
  box-shadow: 0 0 0 1px var(--polle-border), var(--polle-shadow-sm);
  transition: box-shadow 250ms var(--polle-ease);
}

.features-image-cards-cardrow:hover { box-shadow: 0 0 0 1px var(--polle-border), var(--polle-shadow-md); }

/* Round the image's own top corners rather than clipping with overflow — the
   card sits in an Auto-Ads-eligible template and must stay a plain box. */
img.features-image-cards-featimg {
  border-radius: var(--polle-r-xl) var(--polle-r-xl) 0 0;
  margin-bottom: 20px;
}

.features-image-cards-cardtextrow h4 { color: var(--polle-text); font-size: 1.05em; font-weight: 600; letter-spacing: -.025em; }

.features-image-cards-cardtextrow p { color: var(--polle-text-2); font-size: .88em; line-height: 1.5; }

.features-image-cards-separator { background-color: var(--polle-neutral-100); }

/* Team card — POLLE gives it the same chrome as a feature card. */
.team-colors-membercard {
  background-color: var(--polle-surface);
  border-radius: var(--polle-r-xl);
  box-shadow: 0 0 0 1px var(--polle-border), var(--polle-shadow-sm);
}

.team-colors-background { border-radius: var(--polle-r-xl) var(--polle-r-xl) 0 0; }
.team-colors-membercol:nth-of-type(4n+1) .team-colors-background { background-color: var(--polle-primary-500); }
.team-colors-membercol:nth-of-type(4n+2) .team-colors-background { background-color: var(--polle-primary-600); }
.team-colors-membercol:nth-of-type(4n+3) .team-colors-background { background-color: var(--polle-primary-700); }
.team-colors-membercol:nth-of-type(4n+4) .team-colors-background { background-color: var(--polle-primary-800); }

img.team-colors-memberimg { border-color: var(--polle-surface); box-shadow: var(--polle-shadow-md); }
h4.team-colors-membername { color: var(--polle-text); font-weight: 600; letter-spacing: -.025em; }
p.team-colors-memberposition { color: var(--polle-text-3); font-size: .85em; font-style: normal; }
.fa.team-colors-icon { color: var(--polle-neutral-500); transition: color var(--polle-fast) var(--polle-ease); }
.fa.team-colors-icon:hover { color: var(--polle-primary-600); }
.team-colors-separator { background-color: var(--polle-neutral-100); }


/* ==========================================================================
   8. ARTICLE BODY  — typography and card chrome only. Nothing here sets
      width, padding, max-width or overflow on .post-content-single or
      .post-content-inner (both are Auto Ads injection zones).
   ========================================================================== */

.post-content-single { background-color: var(--polle-surface); border-radius: var(--polle-r-2xl); box-shadow: 0 0 0 1px var(--polle-border), var(--polle-shadow-sm); }

h2.heading109 { color: var(--polle-text); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }

.post-header.single-post-header { color: var(--polle-text-3); font-size: .85em; }
.post-header a { color: var(--polle-primary-700); font-weight: 500; }
.post-header a:hover { color: var(--polle-primary-800); }
.fa.font-icon-post { color: var(--polle-primary-500); }

.post-content-inner { border-bottom: 1px solid var(--polle-neutral-100); }

.post-content-inner p { color: var(--polle-text-2); line-height: 1.65; }

.post-content-inner h4 {
  color: var(--polle-text);
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.35;
  margin: 28px 0 12px;
}

.post-content-inner h2,
.post-content-inner h3 { margin-top: 36px; }

.post-content-inner h5 {
  color: var(--polle-neutral-700);
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.45;
  margin: 20px 0 10px;
}

.post-content-inner li { color: var(--polle-text-2); line-height: 1.6; }
/* Underlined at rest. The link colour differs from body copy by 1.85:1, under the
   3:1 WCAG 1.4.1 needs when colour is the only cue -- hover-only underline is
   mouse-only. Whole-row list links in the sidebar keep their unmarked treatment. */
.post-content-inner a,
.commentlist .comment-body a,
.post-header a,
.sidebar .textwidget a { color: var(--polle-primary-700); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.post-content-inner a:hover { color: var(--polle-primary-800); }

.wp-caption-text { color: var(--polle-text-3); font-size: .8em; line-height: 1.4; }

/* Tags line — the bare <p> after .post-content-inner. */
.post-content-single a[rel="tag"] { color: var(--polle-primary-700); font-size: .82em; font-weight: 500; }
i.font-icon-25.fa.fa-tags { color: var(--polle-primary-500); }

/* Comments */
.post-comments { background-color: var(--polle-surface); border-radius: var(--polle-r-2xl); box-shadow: 0 0 0 1px var(--polle-border), var(--polle-shadow-sm); }
#comments { color: var(--polle-text); font-weight: 600; letter-spacing: -.025em; }
li.comment.even { background-color: var(--polle-neutral-50); }
li.comment.odd { background-color: var(--polle-surface); }
.commentlist li.comment .comment-body p { color: var(--polle-text-2); }
.comment cite.fn { color: var(--polle-text); font-weight: 600; }
.comment a.comment-reply-link {
  background-color: var(--polle-neutral-100);
  color: var(--polle-neutral-700);
  border-radius: var(--polle-r-md);
  font-weight: 500;
  text-transform: none;
  transition: background-color var(--polle-fast) var(--polle-ease),
              color var(--polle-fast) var(--polle-ease);
}
.comment a.comment-reply-link:hover { background-color: var(--polle-primary-700); color: #FFFFFF; }
.comment-form h3.comment-reply-title { color: var(--polle-text); font-weight: 600; }

/* Archive / category cards */
.row_345 { background-color: var(--polle-surface); }
.post-content { border-bottom: 3px solid var(--polle-primary-500); border-radius: var(--polle-r-xl); box-shadow: var(--polle-shadow-sm); }
.blog-title { font-weight: 600; letter-spacing: -.025em; }
.blog-title a { color: var(--polle-text); }
.blog-title a:hover { color: var(--polle-primary-600); text-decoration: none; }

/* Pagination */
.post-list a.page-numbers {
  color: var(--polle-text-2);
  font-weight: 500;
  border-radius: var(--polle-r-md);
  transition: background-color var(--polle-fast) var(--polle-ease),
              color var(--polle-fast) var(--polle-ease);
}
.post-list a.page-numbers:hover { background-color: var(--polle-primary-50); color: var(--polle-primary-700); }
span.page-numbers.current { color: var(--polle-primary-700); font-weight: 600; }
.post-list .prev-navigation a,
.post-list .next-navigation a {
  background-color: var(--polle-primary-700);
  color: #FFFFFF;
  border-radius: var(--polle-r-md);
  letter-spacing: 0;
  text-transform: none;
}


/* ==========================================================================
   9. SIDEBAR  — chrome only. No padding, width, margin-x, border or
      box-sizing on .sidebar or .sidebar .widget: the mu-plugin's 300px
      ad box has zero headroom.
   ========================================================================== */

.sidebar .widget { background-color: var(--polle-surface); border-radius: var(--polle-r-xl); box-shadow: var(--polle-shadow-sm); }

.widget > .widgettitle {
  font-family: var(--polle-font);
  font-size: .9em;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--polle-primary-700);
  border-bottom: 1px solid var(--polle-neutral-100);
  border-left: 3px solid var(--polle-primary-500);
  border-radius: var(--polle-r-xl) var(--polle-r-xl) 0 0;
}

.widget > ul > li {
  color: var(--polle-neutral-700);
  font-weight: 500;
  font-size: .88em;
  line-height: 1.5;
  border-bottom: 1px solid var(--polle-neutral-100);
}

.sidebar a { color: var(--polle-neutral-700); font-weight: 500; transition: color var(--polle-fast) var(--polle-ease); }
.sidebar a:visited { color: var(--polle-neutral-700); }
.sidebar a:hover { color: var(--polle-primary-600); }
.widget > ul > li a:active { color: var(--polle-primary-700); }

/* Search: colours and radius only — the #s / #searchsubmit overlap
   (margin-right:-56px against a 55px button) is left exactly as-is. */
.searchform #s {
  font-family: var(--polle-font);
  border-color: var(--polle-border);
  border-radius: var(--polle-r-md);
  color: var(--polle-neutral-700);
  text-transform: none;
}
.searchform #s:focus { outline: 2px solid var(--polle-primary-700); outline-offset: 2px; border-color: var(--polle-primary-700); }
#searchsubmit { background-color: var(--polle-primary-700); border-color: var(--polle-primary-700); border-radius: var(--polle-r-md); color: #FFFFFF; }
#searchsubmit:hover { background-color: var(--polle-primary-800); border-color: var(--polle-primary-800); }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.footer { background-color: var(--polle-neutral-900); border-top: 1px solid var(--polle-neutral-800); }
.footer p { color: var(--polle-neutral-400); font-size: .85em; }
.footer a { color: var(--polle-neutral-300); font-weight: 500; }
.footer a { text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { color: #FFFFFF; }
.footer-copyright { color: var(--polle-neutral-400); }


/* ==========================================================================
   11. MOTION  — every transition above is 150-250ms cubic-bezier(.4,0,.2,1),
       matching POLLE's button/nav easing. Neutralise them wholesale.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .button,
  .nav-previous a,
  .nav-next a,
  .features-image-cards-cardrow,
  .fa.team-colors-icon,
  .comment a.comment-reply-link,
  .post-list a.page-numbers,
  .sidebar a,
  #drop_mainmenu > li > a {
    transition: none !important;   /* theme sets `transition: all .3s` on nav/links */
  }
}


/* ==========================================================================
   12. RESPONSIVE  — the site has exactly two breakpoints (768 / 1024).
       Type scale only; no geometry.
   ========================================================================== */

@media only screen and (min-width: 768px) {
  h1.heading8 { font-size: 3em; }
  h2.heading109 { font-size: 2.1em; }
  .post-content-inner p { line-height: 1.7; }
  .post-content-inner h4 { font-size: 1.4em; }
  h2.numbers-numbertext { font-size: 2.4em; }
}

@media only screen and (min-width: 1024px) {
  h1.heading8 { font-size: 3.3em; }
  h2.heading109 { font-size: 2.3em; }
  .blog-title { font-size: 1.6em; }
}


/* ==========================================================================
   13. HEADER BAR  — opaque, like safety.upehs.com.

   Required, not decorative: the new logo (attachment 10850) is the POLLE mark
   locked up with a slate-900 "UPEHS" wordmark, and .header-top is absolutely
   positioned over the hero image with a dark scrim behind it. On a transparent
   header the wordmark is invisible. The desktop header never sticks
   (data-sticky='0'), so the .fixto-fixed rules in section 3 cover mobile only
   and cannot solve this on their own.

   Background and colour only — .header-top keeps its position, height and
   stacking exactly as the theme sets them, so nothing below it moves.
   ========================================================================== */

.header-top {
  background-color: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 0 var(--polle-border);
}

.header-top #drop_mainmenu > li > a { color: var(--polle-neutral-600); }
.header-top #drop_mainmenu > li:hover > a,
.header-top #drop_mainmenu > li.hover > a { color: var(--polle-neutral-900); }
.header-top #drop_mainmenu > li.current_page_item > a { color: var(--polle-neutral-900); border-bottom-color: var(--polle-primary-500); }

/* 2.77:1 on the near-white bar; on mobile this is the only nav control. */
.header-top a#fm2_drop_mainmenu_mobile_button { color: var(--polle-primary-700); }


/* ==========================================================================
   14. HUSTLE POP-UP (module 5, "POLLE Safety - free software")

   Hustle generates per-module CSS from its Design tab and prints it in an
   inline <style id="hustle-module-5-0-styles"> in the footer — AFTER this
   sheet — so equal-specificity rules here would lose on source order. That is
   the only reason this section carries !important.

   Colour values POSTed to hustle_save_module are stored (the wizard reads them
   back) but never reach the rendered page; structural design keys such as
   close_icon_style DO reach it. Likely Hustle's colour-palette system. Not
   chased further — the colours live here instead. See audit/hustle/README.md.

   ON THE NO-WIDTH RULE at the top of this file: it exists so nothing narrows a
   flowed container and pushes an in-article ad slot under AdSense's 320px
   mobile threshold. A Hustle pop-up is a position:fixed overlay with no place
   in document flow, so max-width and size below cannot move an ad slot. Every
   selector here is scoped to .module_id_5.

   Module 4 (the bottom-right slide-in this replaced) is unpublished, not
   deleted; its rules were removed from this file. Delete this section to hand
   the pop-up back to Hustle's Design tab.
   ========================================================================== */

/* Hustle defaults this to 800px, an empty billboard for two lines of text. */
.hustle-ui.module_id_5 .hustle-popup-content {
  max-width: 460px !important;
  border-radius: var(--polle-r-lg) !important;
  box-shadow: var(--polle-shadow-lg) !important;
}

/* Hustle's own mask is rgba(51,51,51,.9) — near-opaque over the article. */
.hustle-ui.module_id_5 .hustle-popup-mask {
  background-color: rgba(15, 23, 42, .6) !important;
}

.hustle-ui.module_id_5 .hustle-layout,
.hustle-ui.module_id_5 .hustle-layout .hustle-layout-content {
  background-color: var(--polle-surface) !important;
}

.hustle-ui.module_id_5 .hustle-layout {
  border-radius: var(--polle-r-lg) !important;
}

/* padding-right keeps the heading clear of the close button */
.hustle-ui.module_id_5 .hustle-layout .hustle-layout-header {
  background-color: transparent !important;
  border-color: transparent !important;
  padding-right: 68px !important;
}

.hustle-ui.module_id_5 .hustle-layout .hustle-layout-footer {
  background-color: transparent !important;
  border-color: transparent !important;
}

.hustle-ui.module_id_5 .hustle-layout .hustle-title {
  color: var(--polle-text) !important;
  font-family: var(--polle-font) !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.hustle-ui.module_id_5 .hustle-layout .hustle-group-content,
.hustle-ui.module_id_5 .hustle-layout .hustle-group-content p {
  color: var(--polle-text-2) !important;
  font-family: var(--polle-font) !important;
  font-size: 15px !important;
  line-height: 23px !important;
  font-weight: 400 !important;
}

.hustle-ui.module_id_5 .hustle-layout .hustle-group-content a,
.hustle-ui.module_id_5 .hustle-layout .hustle-group-content a:visited {
  color: var(--polle-primary-700) !important;
}

/* primary-700, not primary-500: white on #0EA5E9 is 2.77:1 and fails AA at
   this label size. Same deviation as the site buttons in section 5. */
.hustle-ui.module_id_5 .hustle-layout a.hustle-button-cta {
  background-color: var(--polle-primary-700) !important;
  border-color: var(--polle-primary-700) !important;
  border-radius: var(--polle-r-md) !important;
  color: #FFFFFF !important;
  font-family: var(--polle-font) !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 12px 22px !important;
  transition: background-color var(--polle-fast) var(--polle-ease) !important;
}

.hustle-ui.module_id_5 .hustle-layout a.hustle-button-cta:hover,
.hustle-ui.module_id_5 .hustle-layout a.hustle-button-cta:focus,
.hustle-ui.module_id_5 .hustle-layout a.hustle-button-cta:active {
  background-color: var(--polle-primary-800) !important;
  border-color: var(--polle-primary-800) !important;
  color: #FFFFFF !important;
}

/* ---- CLOSE BUTTON ----------------------------------------------------------
   Asked for explicitly: it must be obvious. Hustle shipped a #38C5B5 teal
   glyph on a #5D7380 grey-blue disc, which is 1.9:1 and easy to miss on a
   white card. This is a 44px target (WCAG 2.5.5 AAA), slate-700 on
   neutral-100 with a hairline ring — about 9:1 on the glyph. Background-click
   and the Esc key also dismiss it; close_on_background_click is set to 1.
   -------------------------------------------------------------------------- */
.hustle-ui.module_id_5 button.hustle-button-close {
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: var(--polle-r-full) !important;
  background: var(--polle-neutral-100) !important;
  box-shadow: 0 0 0 1px var(--polle-neutral-300) !important;
  color: var(--polle-neutral-700) !important;
  font-size: 17px !important;
  line-height: 44px !important;
  text-align: center !important;
  opacity: 1 !important;
  transition: background-color var(--polle-fast) var(--polle-ease),
              color var(--polle-fast) var(--polle-ease) !important;
}

.hustle-ui.module_id_5 button.hustle-button-close:hover,
.hustle-ui.module_id_5 button.hustle-button-close:focus {
  background: var(--polle-neutral-200) !important;
  color: var(--polle-neutral-900) !important;
}

.hustle-ui.module_id_5 button.hustle-button-close:focus-visible {
  outline: 2px solid var(--polle-primary-700) !important;
  outline-offset: 2px !important;
}