.elementor-kit-8011{--e-global-color-primary:#102F5C;--e-global-color-secondary:#3D65A0;--e-global-color-text:#333333;--e-global-color-accent:#BB0404;--e-global-color-b87ca52:#12284C;--e-global-color-05bc6c4:#142D56;--e-global-color-862b66c:#081223;--e-global-color-3e39510:#1E437F;--e-global-color-87b7503:#B3001B;--e-global-color-9f4a406:#DCE1E4;--e-global-color-392f7f7:#A3ACAF;--e-global-color-37a9c9c:#60676D;--e-global-color-93ff356:#BBBBBB;--e-global-color-1b9ed0c:#FFFFFF;--e-global-color-bfed9dc:#333333;--e-global-typography-primary-font-family:"Archivo Black";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.1;--e-global-typography-primary-letter-spacing:0.4px;--e-global-typography-secondary-font-family:"Archivo Black";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-letter-spacing:0.7px;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:1.25rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.4;--e-global-typography-text-letter-spacing:0.02em;--e-global-typography-accent-font-family:"Archivo Black";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:4px;--e-global-typography-04a2a1a-font-family:"Montserrat";--e-global-typography-04a2a1a-font-size:1.5rem;--e-global-typography-04a2a1a-font-weight:500;--e-global-typography-04a2a1a-line-height:1.4;--e-global-typography-04a2a1a-letter-spacing:1px;--e-global-typography-9903fb2-font-family:"Montserrat";--e-global-typography-9903fb2-font-size:1.125rem;--e-global-typography-9903fb2-font-weight:500;--e-global-typography-9903fb2-text-transform:uppercase;--e-global-typography-9903fb2-line-height:1;--e-global-typography-9903fb2-letter-spacing:1.8px;--e-global-typography-4df69bc-font-family:"Archivo Black";--e-global-typography-4df69bc-font-size:6rem;--e-global-typography-4df69bc-font-weight:400;--e-global-typography-4df69bc-text-transform:uppercase;--e-global-typography-4df69bc-line-height:1.1;--e-global-typography-4df69bc-letter-spacing:4px;--e-global-typography-c13e0be-font-family:"Archivo Black";--e-global-typography-c13e0be-font-size:3rem;--e-global-typography-c13e0be-font-weight:400;--e-global-typography-c13e0be-text-transform:uppercase;--e-global-typography-c13e0be-line-height:1.1;--e-global-typography-c13e0be-letter-spacing:3.2px;--e-global-typography-5c4ae36-font-family:"Archivo Black";--e-global-typography-5c4ae36-font-size:2.5rem;--e-global-typography-5c4ae36-font-weight:400;--e-global-typography-5c4ae36-text-transform:uppercase;--e-global-typography-5c4ae36-line-height:1.1;--e-global-typography-5c4ae36-letter-spacing:1.7px;--e-global-typography-cce60e7-font-family:"Archivo Black";--e-global-typography-cce60e7-font-size:2rem;--e-global-typography-cce60e7-font-weight:400;--e-global-typography-cce60e7-text-transform:uppercase;--e-global-typography-cce60e7-line-height:1.1;--e-global-typography-cce60e7-letter-spacing:2px;--e-global-typography-7d6b6fd-font-family:"Archivo Black";--e-global-typography-7d6b6fd-font-size:1.5rem;--e-global-typography-7d6b6fd-font-weight:400;--e-global-typography-7d6b6fd-text-transform:uppercase;--e-global-typography-7d6b6fd-line-height:1.1;--e-global-typography-7d6b6fd-letter-spacing:0.5px;--e-global-typography-f40277f-font-family:"Archivo Black";--e-global-typography-f40277f-font-size:1.25rem;--e-global-typography-f40277f-font-weight:400;--e-global-typography-f40277f-text-transform:uppercase;--e-global-typography-f40277f-line-height:1.1;--e-global-typography-f40277f-letter-spacing:1.2px;--e-global-typography-d7f9079-font-family:"Archivo Black";--e-global-typography-d7f9079-font-size:1.125rem;--e-global-typography-d7f9079-font-weight:400;--e-global-typography-d7f9079-text-transform:uppercase;--e-global-typography-d7f9079-line-height:1.1;--e-global-typography-d7f9079-letter-spacing:1.8px;--e-global-typography-0a7ded3-font-family:"Poppins";--e-global-typography-0a7ded3-font-size:1rem;--e-global-typography-0a7ded3-font-weight:bold;--e-global-typography-0a7ded3-line-height:1;--e-global-typography-0a7ded3-letter-spacing:1.2px;--e-global-typography-62988c1-text-decoration:none;--e-global-typography-62988c1-letter-spacing:1px;color:var( --e-global-color-text );font-family:"Archivo", sans-serif;font-weight:400;letter-spacing:0.4px;}.elementor-kit-8011 button,.elementor-kit-8011 input[type="button"],.elementor-kit-8011 input[type="submit"],.elementor-kit-8011 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-0a7ded3-font-family ), sans-serif;font-size:var( --e-global-typography-0a7ded3-font-size );font-weight:var( --e-global-typography-0a7ded3-font-weight );line-height:var( --e-global-typography-0a7ded3-line-height );letter-spacing:var( --e-global-typography-0a7ded3-letter-spacing );color:var( --e-global-color-1b9ed0c );border-style:none;border-radius:0px 0px 0px 0px;padding:1rem 1rem 1rem 1rem;}.elementor-kit-8011 button:hover,.elementor-kit-8011 button:focus,.elementor-kit-8011 input[type="button"]:hover,.elementor-kit-8011 input[type="button"]:focus,.elementor-kit-8011 input[type="submit"]:hover,.elementor-kit-8011 input[type="submit"]:focus,.elementor-kit-8011 .elementor-button:hover,.elementor-kit-8011 .elementor-button:focus{background-color:var( --e-global-color-secondary );color:var( --e-global-color-1b9ed0c );border-style:none;}.elementor-kit-8011 p{margin-block-end:1.4em;}.elementor-kit-8011 a{color:var( --e-global-color-primary );text-decoration:none;letter-spacing:1px;}.elementor-kit-8011 a:hover{color:var( --e-global-color-accent );text-decoration:underline;}.elementor-kit-8011 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-c13e0be-font-family ), sans-serif;font-size:var( --e-global-typography-c13e0be-font-size );font-weight:var( --e-global-typography-c13e0be-font-weight );text-transform:var( --e-global-typography-c13e0be-text-transform );line-height:var( --e-global-typography-c13e0be-line-height );letter-spacing:var( --e-global-typography-c13e0be-letter-spacing );word-spacing:var( --e-global-typography-c13e0be-word-spacing );}.elementor-kit-8011 h2{color:var( --e-global-color-primary );font-family:var( --e-global-typography-5c4ae36-font-family ), sans-serif;font-size:var( --e-global-typography-5c4ae36-font-size );font-weight:var( --e-global-typography-5c4ae36-font-weight );text-transform:var( --e-global-typography-5c4ae36-text-transform );line-height:var( --e-global-typography-5c4ae36-line-height );letter-spacing:var( --e-global-typography-5c4ae36-letter-spacing );word-spacing:var( --e-global-typography-5c4ae36-word-spacing );}.elementor-kit-8011 h3{color:#151D3D;font-family:var( --e-global-typography-cce60e7-font-family ), sans-serif;font-size:var( --e-global-typography-cce60e7-font-size );font-weight:var( --e-global-typography-cce60e7-font-weight );text-transform:var( --e-global-typography-cce60e7-text-transform );line-height:var( --e-global-typography-cce60e7-line-height );letter-spacing:var( --e-global-typography-cce60e7-letter-spacing );word-spacing:var( --e-global-typography-cce60e7-word-spacing );}.elementor-kit-8011 h4{color:var( --e-global-color-primary );font-family:var( --e-global-typography-7d6b6fd-font-family ), sans-serif;font-size:var( --e-global-typography-7d6b6fd-font-size );font-weight:var( --e-global-typography-7d6b6fd-font-weight );text-transform:var( --e-global-typography-7d6b6fd-text-transform );line-height:var( --e-global-typography-7d6b6fd-line-height );letter-spacing:var( --e-global-typography-7d6b6fd-letter-spacing );word-spacing:var( --e-global-typography-7d6b6fd-word-spacing );}.elementor-kit-8011 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-f40277f-font-family ), sans-serif;font-size:var( --e-global-typography-f40277f-font-size );font-weight:var( --e-global-typography-f40277f-font-weight );text-transform:var( --e-global-typography-f40277f-text-transform );line-height:var( --e-global-typography-f40277f-line-height );letter-spacing:var( --e-global-typography-f40277f-letter-spacing );word-spacing:var( --e-global-typography-f40277f-word-spacing );}.elementor-kit-8011 h6{color:var( --e-global-color-primary );font-family:var( --e-global-typography-d7f9079-font-family ), sans-serif;font-size:var( --e-global-typography-d7f9079-font-size );font-weight:var( --e-global-typography-d7f9079-font-weight );text-transform:var( --e-global-typography-d7f9079-text-transform );line-height:var( --e-global-typography-d7f9079-line-height );letter-spacing:var( --e-global-typography-d7f9079-letter-spacing );word-spacing:var( --e-global-typography-d7f9079-word-spacing );}.elementor-kit-8011 img{box-shadow:0px 0px 0px 0px rgba(0,0,0,0.5);}.elementor-kit-8011 input:not([type="button"]):not([type="submit"]),.elementor-kit-8011 textarea,.elementor-kit-8011 .elementor-field-textual{color:var( --e-global-color-text );background-color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E2E2E2;border-radius:0px 0px 0px 0px;padding:1rem 1rem 1rem 1rem;}.elementor-kit-8011 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-8011 textarea:focus,.elementor-kit-8011 .elementor-field-textual:focus{background-color:#FFFFFF;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-392f7f7 );border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1330px;}.e-con{--container-max-width:1330px;}.elementor-widget:not(:last-child){margin-block-end:1rem;}.elementor-element{--widgets-spacing:1rem 1rem;--widgets-spacing-row:1rem;--widgets-spacing-column:1rem;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8011{--e-global-typography-4df69bc-font-size:1.875rem;}.elementor-kit-8011 h1{font-size:var( --e-global-typography-c13e0be-font-size );line-height:var( --e-global-typography-c13e0be-line-height );letter-spacing:var( --e-global-typography-c13e0be-letter-spacing );word-spacing:var( --e-global-typography-c13e0be-word-spacing );}.elementor-kit-8011 h2{font-size:var( --e-global-typography-5c4ae36-font-size );line-height:var( --e-global-typography-5c4ae36-line-height );letter-spacing:var( --e-global-typography-5c4ae36-letter-spacing );word-spacing:var( --e-global-typography-5c4ae36-word-spacing );}.elementor-kit-8011 h3{font-size:var( --e-global-typography-cce60e7-font-size );line-height:var( --e-global-typography-cce60e7-line-height );letter-spacing:var( --e-global-typography-cce60e7-letter-spacing );word-spacing:var( --e-global-typography-cce60e7-word-spacing );}.elementor-kit-8011 h4{font-size:var( --e-global-typography-7d6b6fd-font-size );line-height:var( --e-global-typography-7d6b6fd-line-height );letter-spacing:var( --e-global-typography-7d6b6fd-letter-spacing );word-spacing:var( --e-global-typography-7d6b6fd-word-spacing );}.elementor-kit-8011 h5{font-size:var( --e-global-typography-f40277f-font-size );line-height:var( --e-global-typography-f40277f-line-height );letter-spacing:var( --e-global-typography-f40277f-letter-spacing );word-spacing:var( --e-global-typography-f40277f-word-spacing );}.elementor-kit-8011 h6{font-size:var( --e-global-typography-d7f9079-font-size );line-height:var( --e-global-typography-d7f9079-line-height );letter-spacing:var( --e-global-typography-d7f9079-letter-spacing );word-spacing:var( --e-global-typography-d7f9079-word-spacing );}.elementor-kit-8011 button,.elementor-kit-8011 input[type="button"],.elementor-kit-8011 input[type="submit"],.elementor-kit-8011 .elementor-button{font-size:var( --e-global-typography-0a7ded3-font-size );line-height:var( --e-global-typography-0a7ded3-line-height );letter-spacing:var( --e-global-typography-0a7ded3-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8011{--e-global-typography-4df69bc-font-size:1.875rem;--e-global-typography-c13e0be-font-size:2.25rem;--e-global-typography-5c4ae36-font-size:2rem;--e-global-typography-cce60e7-font-size:2rem;--e-global-typography-7d6b6fd-font-size:2rem;--e-global-typography-f40277f-font-size:2rem;--e-global-typography-d7f9079-font-size:2rem;}.elementor-kit-8011 h1{font-size:var( --e-global-typography-c13e0be-font-size );line-height:var( --e-global-typography-c13e0be-line-height );letter-spacing:var( --e-global-typography-c13e0be-letter-spacing );word-spacing:var( --e-global-typography-c13e0be-word-spacing );}.elementor-kit-8011 h2{font-size:var( --e-global-typography-5c4ae36-font-size );line-height:var( --e-global-typography-5c4ae36-line-height );letter-spacing:var( --e-global-typography-5c4ae36-letter-spacing );word-spacing:var( --e-global-typography-5c4ae36-word-spacing );}.elementor-kit-8011 h3{font-size:var( --e-global-typography-cce60e7-font-size );line-height:var( --e-global-typography-cce60e7-line-height );letter-spacing:var( --e-global-typography-cce60e7-letter-spacing );word-spacing:var( --e-global-typography-cce60e7-word-spacing );}.elementor-kit-8011 h4{font-size:var( --e-global-typography-7d6b6fd-font-size );line-height:var( --e-global-typography-7d6b6fd-line-height );letter-spacing:var( --e-global-typography-7d6b6fd-letter-spacing );word-spacing:var( --e-global-typography-7d6b6fd-word-spacing );}.elementor-kit-8011 h5{font-size:var( --e-global-typography-f40277f-font-size );line-height:var( --e-global-typography-f40277f-line-height );letter-spacing:var( --e-global-typography-f40277f-letter-spacing );word-spacing:var( --e-global-typography-f40277f-word-spacing );}.elementor-kit-8011 h6{font-size:var( --e-global-typography-d7f9079-font-size );line-height:var( --e-global-typography-d7f9079-line-height );letter-spacing:var( --e-global-typography-d7f9079-letter-spacing );word-spacing:var( --e-global-typography-d7f9079-word-spacing );}.elementor-kit-8011 button,.elementor-kit-8011 input[type="button"],.elementor-kit-8011 input[type="submit"],.elementor-kit-8011 .elementor-button{font-size:var( --e-global-typography-0a7ded3-font-size );line-height:var( --e-global-typography-0a7ded3-line-height );letter-spacing:var( --e-global-typography-0a7ded3-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --primary-font:Poppins; --Navy:#102F5C; --Cobalt:#3D65A0; --Red:#BB0404; --body-text:1rem; --White:#ffffff; --Gray:#dce1e4; }
/* Start custom CSS *//* ============================================================
   Design tokens pulled from cotton.senate.gov (common.css)

   Suggested Elementor Global Color mapping:
   - Primary   = Navy       #12284C (headings, body text, primary buttons)
   - Secondary = Royal Blue #1E437F (hovers, select arrows, link accents)
   - Accent    = Red        #B3001B (icons, small accents)
   - Text      = Navy       #12284C

   Google Fonts used by the live site:
   Archivo Black (headings/buttons) + Archivo 500,700 (body)
   ============================================================ */
   
:root {
  /* Colors */
  --color-white:     #FFFFFF;
  --color-black:     #000000;
  --color-navy:      #12284C;   /* primary brand */
  --color-navy-alt:  #142D56;   /* link underline */
  --color-navy-dark: #081223;   /* link hover text */
  --color-royal:     #1E437F;   /* secondary / hover states */
  --color-red:       #B3001B;   /* accent */
  --color-graylight: #DCE1E4;   /* default button bg, input borders */
  --color-gray:      #A3ACAF;   /* default button hover */
  --color-graytext:  #60676D;   /* muted headings (h3) */
  --color-border:    #  ;   /* checkbox/radio borders, placeholder text */

  /* Focus ring used across buttons + inputs on the live site */
  --focus-ring: 0 0 0 3px rgba(30, 67, 127, 0.3);

  /* Font families */
  --font-heading: "Archivo Black", sans-serif;
  --font-body:    "Archivo", sans-serif;

  /* Font weights (Archivo Black is a single-weight face = 400) */
  --fw-bold:    700;
  --fw-medium:  500;  /* default body weight on the live site */
  --fw-regular: 400;

  /* Font sizes (desktop max — live site scales fluidly between 320-1200px) */
  --fs-h1: 56px;  --fs-h2: 40px;  --fs-h3: 32px;
  --fs-h4: 24px;  --fs-h5: 20px;  --fs-h6: 18px;
  --fs-banner: 96px;
  --fs-body-lg: 20px; --fs-body-md: 18px; --fs-body-sm: 16px;

  /* Letter spacing */
  --ls-heading: 0.05em;
  --ls-button:  1px;

  /* Spacing + layout */
  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px; --space-sm: 16px;
  --space-md: 24px;  --space-lg: 32px;  --space-xl: 48px; --space-2xl: 64px;
  --space-3xl: 96px; --space-4xl: 128px;
  --container-max: 1280px;
  --gutter: 24px;

  --gf-local-border-color: var(--color-royal) !important;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.elementor-location-header ~ *:not(.elementor-location-footer) {
flex-grow: 1;
}

body.ModalOpen {
overflow: hidden;
position: fixed;
}

#breadcrumbs .breadcrumb_last{
  display: none;
}
.BreadcrumbSeparator:has(+ .breadcrumb_last) {
  opacity: 0;
}


@media print {
body {
  display: table;
  table-layout: fixed;
  height: auto;
}

.printForm {
  page-break-before: avoid;
  min-width: 75vw;
}
.printForm table:first-child > td {
  border: none;
}
.printForm table:first-child tbody > tr:first-child > td {
  border: none;
}
}

@media print and (-webkit-min-device-pixel-ratio: 0) {
/* Your Chrome-specific print styles here */
.PageLayout {
  padding-right: 4rem;
  padding-left: 0;
}
}



body {
font-family: var(--font-body);
font-weight: var(--fw-medium);
color: var(--color-navy);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.Heading {
margin-top: 0.25rem;
margin-bottom: 1rem;
line-height: 1.2;
color: var(--e-global-color-primary);
font-family: var(--font-heading) !important;
/* Archivo Black is a single-weight face — heavier weights cause faux-bolding */
font-weight: var(--fw-regular);
letter-spacing: var(--ls-heading);
}

h1 b,
h2 b,
h3 b,
h4 b,
h1 strong,
h2 strong,
h3 strong,
h4 strong{
font-weight: var(--fw-regular) !important;
}

/* Live site: h1-h3 are uppercase, h3 is muted gray */
h1,
.Heading--h1,
h2,
.Heading--h2,
h3,
.Heading--h3 {
text-transform: uppercase;
}

.Heading--h1, .Heading--h1 .Heading__title { font-size: var(--fs-h1) !important; }
.Heading--h2, .Heading--h2 .Heading__title { font-size: var(--fs-h2) !important; }
h3, .Heading--h3 { font-size: var(--fs-h3); color: var(--color-graytext); }
h4, .Heading--h4 { font-size: var(--fs-h4); }
h5, .Heading--h5 { font-size: var(--fs-h5); }
h6, .Heading--h6 { font-size: var(--fs-h6); }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
font-weight: var(--fw-regular) !important;
text-decoration: underline !important;
color: var(--e-global-color-secondary) !important;
text-decoration-color: var(--e-global-color-secondary) !important;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
font-weight: var(--fw-regular) !important;
text-decoration: underline !important;
color: var(--color-navy-dark) !important;
text-decoration-color: var(--e-global-color-secondary) !important;
}

.HeadingOverline .elementor-heading-title {
font-size: 3.5rem;
text-transform: uppercase;
display: block !important;
background-image: linear-gradient(
  to top,
  var(--color-red),
  var(--color-red)
);
background-position: left top;
background-repeat: no-repeat;
background-size: 5rem 2px;
padding-top: 0.45em !important;
}




.BodyContent a,
.elementor-widget-text-editor a {
color: var(--color-navy);
font-weight: inherit !important;
text-decoration: underline;
text-decoration-color: var(--color-navy-alt) !important;
transition: color 200ms ease-in-out, text-decoration-color 200ms ease-in-out;
word-break: keep-all;
}

.BodyContent a:hover,
.elementor-widget-text-editor a:hover {
color: var(--color-navy-dark);
font-weight: inherit !important;
text-decoration-color: var(--color-royal) !important;
text-decoration: underline;
text-decoration-thickness: 2px;
word-break: keep-all;
}

.BodyContent h1 a,
.BodyContent h2 a,
.BodyContent h3 a,
.BodyContent h4 a,
.BodyContent h5 a,
.BodyContent h6 a,
.elementor-widget-text-editor h1 a,
.elementor-widget-text-editor h2 a,
.elementor-widget-text-editor h3 a,
.elementor-widget-text-editor h4 a,
.elementor-widget-text-editor h5 a,
.elementor-widget-text-editor h6 a {
color: var(--e-global-color-secondary);
font-weight: var(--fw-regular) !important;
text-decoration: underline !important;
box-shadow: none !important;
word-break: break-word;
}

.BodyContent h1 a:hover,
.BodyContent h2 a:hover,
.BodyContent h3 a:hover,
.BodyContent h4 a:hover,
.BodyContent h5 a:hover,
.BodyContent h6 a:hover,
.elementor-widget-text-editor h1 a:hover,
.elementor-widget-text-editor h2 a:hover,
.elementor-widget-text-editor h3 a:hover,
.elementor-widget-text-editor h4 a:hover,
.elementor-widget-text-editor h5 a:hover,
.elementor-widget-text-editor h6 a:hover {
font-weight: var(--fw-regular) !important;
text-decoration: underline !important;
text-decoration-color: var(--color-royal) !important;
}


@media only print {
.page-top-content > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.Heading--press {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
}

/* Archivo ships at 500 + 700 — bold maps to 700 */
.hentry b,
div[data-elementor-type="wp-page"] b,
.hentry strong,
div[data-elementor-type="wp-page"] strong {
font-weight: var(--fw-bold);
}

.RelatedIssueLink a {
box-shadow: none !important;
}
.RelatedIssueLink a:hover {
box-shadow: none !important;
}
.RelatedIssueLink a,
.RelatedIssueLink a:hover,
.RelatedIssueLink a span {
color: inherit;
text-decoration: none !important;
display: inline;
}

.RelatedIssueLink a span {
display: inline;
box-shadow: 0px -4px 0px 0px var(--e-global-color-secondary) inset;
transition: background-color 100ms ease-in-out;
}

.RelatedIssueLink a:hover span {
display: inline;
box-shadow: 0px -4px 0px 0px var(--e-global-color-accent) inset;
}

/* -- Form Styles -- */
/* Global Shared .hentry Input Styles
div[data-elementor-type="wp-page"]  Input Styles */
.TextInput,
.hentry input[type="date"],
div[data-elementor-type="wp-page"] input[type="date"],
.hentry input[type="datetime"],
div[data-elementor-type="wp-page"] input[type="datetime"],
.hentry input[type="email"],
div[data-elementor-type="wp-page"] input[type="email"],
.hentry input[type="file"],
div[data-elementor-type="wp-page"] input[type="file"],
.hentry input[type="image"],
div[data-elementor-type="wp-page"] input[type="image"],
.hentry input[type="month"],
div[data-elementor-type="wp-page"] input[type="month"],
.hentry input[type="number"],
div[data-elementor-type="wp-page"] input[type="number"],
.hentry input[type="password"],
div[data-elementor-type="wp-page"] input[type="password"],
.hentry input[type="range"],
div[data-elementor-type="wp-page"] input[type="range"],
.hentry input[type="search"],
div[data-elementor-type="wp-page"] input[type="search"],
.hentry input[type="tel"],
div[data-elementor-type="wp-page"] input[type="tel"],
.hentry input[type="text"],
div[data-elementor-type="wp-page"] input[type="text"],
.hentry input[type="time"],
div[data-elementor-type="wp-page"] input[type="time"],
.hentry input[type="url"],
div[data-elementor-type="wp-page"] input[type="url"],
.hentry input[type="week"],
div[data-elementor-type="wp-page"] input[type="week"],
.hentry textarea,
div[data-elementor-type="wp-page"] textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1em !important;
  border: 2px solid var(--color-graylight) !important;
  font-family: var(--font-body) !important;
  background-color: var(--color-white) !important;
  color: var(--color-navy);
  width: 100%;
  min-height: 50px;
  line-height: normal;
  transition: box-shadow 100ms ease-in-out;
  border-radius: 0;
}

.hentry textarea,
div[data-elementor-type="wp-page"] textarea {
  padding: 1em 1.25em !important;
  border-radius: 0 !important;
  min-height: 100px;
}

.hentry input::placeholder,
div[data-elementor-type="wp-page"] input::placeholder,
.hentry textarea::placeholder,
div[data-elementor-type="wp-page"] textarea::placeholder {
  color: var(--color-border);
  font-weight: var(--fw-bold);
  opacity: 1;
}

.TextInput:active,
.TextInput:focus,
.hentry input[type="date"]:active,
div[data-elementor-type="wp-page"] input[type="date"]:active,
.hentry input[type="date"]:focus,
div[data-elementor-type="wp-page"] input[type="date"]:focus,
.hentry input[type="datetime"]:active,
div[data-elementor-type="wp-page"] input[type="datetime"]:active,
.hentry input[type="datetime"]:focus,
div[data-elementor-type="wp-page"] input[type="datetime"]:focus,
.hentry input[type="email"]:active,
div[data-elementor-type="wp-page"] input[type="email"]:active,
.hentry input[type="email"]:focus,
div[data-elementor-type="wp-page"] input[type="email"]:focus,
.hentry input[type="file"]:active,
div[data-elementor-type="wp-page"] input[type="file"]:active,
.hentry input[type="file"]:focus,
div[data-elementor-type="wp-page"] input[type="file"]:focus,
.hentry input[type="image"]:active,
div[data-elementor-type="wp-page"] input[type="image"]:active,
.hentry input[type="image"]:focus,
div[data-elementor-type="wp-page"] input[type="image"]:focus,
.hentry input[type="month"]:active,
div[data-elementor-type="wp-page"] input[type="month"]:active,
.hentry input[type="month"]:focus,
div[data-elementor-type="wp-page"] input[type="month"]:focus,
.hentry input[type="number"]:active,
div[data-elementor-type="wp-page"] input[type="number"]:active,
.hentry input[type="number"]:focus,
div[data-elementor-type="wp-page"] input[type="number"]:focus,
.hentry input[type="password"]:active,
div[data-elementor-type="wp-page"] input[type="password"]:active,
.hentry input[type="password"]:focus,
div[data-elementor-type="wp-page"] input[type="password"]:focus,
.hentry input[type="range"]:active,
div[data-elementor-type="wp-page"] input[type="range"]:active,
.hentry input[type="range"]:focus,
div[data-elementor-type="wp-page"] input[type="range"]:focus,
.hentry input[type="search"]:active,
div[data-elementor-type="wp-page"] input[type="search"]:active,
.hentry input[type="search"]:focus,
div[data-elementor-type="wp-page"] input[type="search"]:focus,
.hentry input[type="tel"]:active,
div[data-elementor-type="wp-page"] input[type="tel"]:active,
.hentry input[type="tel"]:focus,
div[data-elementor-type="wp-page"] input[type="tel"]:focus,
.hentry input[type="text"]:active,
div[data-elementor-type="wp-page"] input[type="text"]:active,
.hentry input[type="text"]:focus,
div[data-elementor-type="wp-page"] input[type="text"]:focus,
.hentry input[type="time"]:active,
div[data-elementor-type="wp-page"] input[type="time"]:active,
.hentry input[type="time"]:focus,
div[data-elementor-type="wp-page"] input[type="time"]:focus,
.hentry input[type="url"]:active,
div[data-elementor-type="wp-page"] input[type="url"]:active,
.hentry input[type="url"]:focus,
div[data-elementor-type="wp-page"] input[type="url"]:focus,
.hentry input[type="week"]:active,
div[data-elementor-type="wp-page"] input[type="week"]:active,
.hentry input[type="week"]:focus,
div[data-elementor-type="wp-page"] input[type="week"]:focus,
.hentry textarea:active,
div[data-elementor-type="wp-page"] textarea:active,
.hentry textarea:focus,
div[data-elementor-type="wp-page"] textarea:focus,
.hentry select:active .hentry select:focus,
div[data-elementor-type="wp-page"] select:active .hentry select:focus {
  box-shadow: var(--focus-ring) !important;
  border-color: var(--color-royal) !important;
  outline: none;
}



.hentry input[type="radio"],
div[data-elementor-type="wp-page"] input[type="radio"],
.hentry input[type="checkbox"],
div[data-elementor-type="wp-page"] input[type="checkbox"] {
  box-shadow: none !important;
  width: 1em;
  height: 1em;
}

/* Live site: checked radio dot + checkbox check are navy */
.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before{
  background-color: var(--color-navy) !important;
}

.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):checked {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
}

.gform-theme--framework input[type]:where(:not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus {
  --gf-local-border-color: var(--color-royal) !important;
  border-color: var(--color-royal) !important;
}

.hentry select,
div[data-elementor-type="wp-page"] select {
  font-family: var(--font-body), sans-serif;
  font-weight: var(--fw-medium);
  color: var(--color-navy);
  background-color: var(--color-white) !important;
  border: 2px solid var(--color-graylight) !important;
  border-radius: 0 !important;
  padding: 0 3em 0 1em;
  background-image: linear-gradient(90deg, transparent 1px, transparent 1px),
    linear-gradient(56deg, transparent 4px, var(--color-royal) 5px),
    linear-gradient(-56deg, transparent 4px, var(--color-royal) 5px);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 2px 100%, 6px 6px, 6px 6px;
  background-position: 30px center, 10px center, 16px center;
  background-position: calc(100% - 30px) center, calc(100% - 16px) center,
    calc(100% - 10px) center;
  background-position: right 30px center, right 16px center, right 10px center;
  text-indent: 0.01px;
  appearance: none;
  min-height: 50px;
  transition: box-shadow 100ms ease-in-out;
}

.hentry select:-moz-focusring,
div[data-elementor-type="wp-page"] select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}

/* Live site labels: bold Archivo, no uppercase */
.hentry form label,
div[data-elementor-type="wp-page"] form label {
font-size: 0.9em !important;
font-family: var(--font-body), sans-serif !important;
font-weight: var(--fw-bold) !important;
}
@media (max-width: 991px) {
  .hentry form label,
  div[data-elementor-type="wp-page"] form label {
    font-size: 18px !important;
  }
}

/* Live site legends: Archivo Black, navy, letter-spaced (styled like headings) */
.hentry form legend,
div[data-elementor-type="wp-page"] form legend {
font-size: 0.95em !important;
font-family: var(--font-heading), sans-serif !important;
font-weight: var(--fw-regular) !important;
letter-spacing: var(--ls-heading);
}
@media (max-width: 991px) {
  .hentry form legend,
  div[data-elementor-type="wp-page"] form legend {
    font-size: 19px !important;
  }
}

.hentry fieldset legend.gfield_label,
div[data-elementor-type="wp-page"] fieldset legend.gfield_label,
.hentry fieldset legend,
div[data-elementor-type="wp-page"] fieldset legend {
margin-top: 0.5rem;
margin-bottom: 1rem;
font-weight: var(--fw-regular);
line-height: 1.2;
color: var(--color-navy);
font-family: var(--font-heading), sans-serif !important;
letter-spacing: var(--ls-heading);
}

.gform_wrapper.gravity-theme fieldset,
.hentry fieldset,
div[data-elementor-type="wp-page"] fieldset {
display: block;
height: auto;
min-height: auto;
margin-top: 0.45rem !important;
}

html body .elementor-7027 .elementor-element.elementor-element-97b9ddd .eael-gravity-form .gform_footer input[type="submit"],
div[data-elementor-type="wp-page"] input[type="submit"],
.hentry input[type="submit"] {
min-width: 150px !important;
margin-right: 0 !important;
min-height: 56px !important;
margin-left: auto !important;
padding:0em 1.6em 0em 1.6em !important;
min-width: auto !important;
text-align: center;
width: auto !important;
}

.gform_wrapper.gravity-theme .ginput_container_address span {
flex-grow: 1 !important;
}

.gform_wrapper.gravity-theme .ginput_container_date input {
flex-grow: 1 !important;
}

.hentry .gform_wrapper.gravity-theme .field_sublabel_above .ginput_complex,
div[data-elementor-type="wp-page"]
.gform_wrapper.gravity-theme
.field_sublabel_above
.ginput_complex {
align-items: stretch;
}

/* ------
          * PRINT, PDF
          * ------ */

/* -- print styles -- */
@media print {
.noprint {
  display: none !important;
}
.FormPrint {
  padding: 0;
  background-color: none;
}

::-webkit-scrollbar {
  display: none;
}
}

/* -- PDF Form Rules -- */
@media screen {
.hide-form-show-pdf {
  display: none !important;
}
}




div[data-elementor-type="wp-page"] inputs {
display: flex;
flex-direction: column;
}
div[data-elementor-type="wp-page"] inputs .hentry input {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 1rem;
}

#ui-datepicker-div,
.ui-datepicker {
z-index: 10001 !important;
}
/* BUTTONS */
/* Global Shared Button Styles */
[class*="ButtonWrapper--"] a,
[class*="ButtonWrapper--"] button,
[class*="ButtonWrapper--"] [role="button"],
.hentry input[type="submit"],
div[data-elementor-type="wp-page"] input[type="submit"],
.FlickrGrid .photonic-more-button,
.photonic-more-button {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding-left: 1.5em !important;
padding-right: 1.5em !important;
min-height: 50px;
text-shadow: none;
transition: 200ms background-color, background ease-in-out !important;
cursor: pointer;
}

[class*="ButtonWrapper--"] a:disabled,
[class*="ButtonWrapper--"] button:disabled,
[class*="ButtonWrapper--"] [role="button"]:disabled,
.hentry input[type="submit"]:disabled,
div[data-elementor-type="wp-page"] input[type="submit"]:disabled,
.FlickrGrid .photonic-more-button:disabled,
.photonic-more-button:disabled {
opacity: 0.5;
pointer-events: none;
}

@media only screen and (max-width: 641px) {
[class*="ButtonWrapper--"] a,
[class*="ButtonWrapper--"] button,
[class*="ButtonWrapper--"] [role="button"],
.hentry input[type="submit"],
div[data-elementor-type="wp-page"] input[type="submit"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-left: 1em !important;
  padding-right: 1em !important;
  min-height: 50px;
  transition: 200ms ease-in-out !important;
  transition-property: background-color !important;
}
}

.hentry input[data-conditional-logic="hidden"]:disabled,
div[data-elementor-type="wp-page"]
input[data-conditional-logic="hidden"]:disabled {
display: none !important;
}



/* FORM OVERRIDES */

.gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):where(:not([multiple])):focus,
.gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):where(:not([multiple])):hover {
  background-image: linear-gradient(90deg, transparent 1px, transparent 1px),
  linear-gradient(56deg, transparent 4px, var(--color-royal) 5px),
  linear-gradient(-56deg, transparent 4px, var(--color-royal) 5px) !important;
}


.gform_wrapper .gform_heading li {
  list-style: disc !important;
}



/* Global Shared Button Styles */
.elementor-button {
text-shadow: none !important;
}

[class*="ButtonWrapper--"] a:hover,
[class*="ButtonWrapper--"] button:hover,
[class*="ButtonWrapper--"] [role="button"]:hover {
/*background-color: var(--e-global-color-accent) !important;*/
text-decoration: none !important;
}

/* Global Shared Button Icon */
[class*="ButtonWrapper--"] a span,
[class*="ButtonWrapper--"] button span,
[class*="ButtonWrapper--"] [role="button"] span,
.hentry input[type="submit"],
div[data-elementor-type="wp-page"] input[type="submit"] {
margin-left: 0.25em;
margin-right: 0.25em;
font-family: var(--font-heading) !important;
font-weight: var(--fw-regular);
text-transform: uppercase;
letter-spacing: var(--ls-button);
line-height: inherit !important;
}

/* Primary Button Styles */
.ButtonWrapper--primary a,
.ButtonWrapper--primary button,
.ButtonWrapper--primary [role="button"],
div[data-elementor-type="wp-page"] input[type="submit"] {
padding-top: 1em;
padding-bottom: 1em;
transition: 200ms ease-in-out !important;
transition-property: background-color !important;
background-color:  var(--e-global-color-primary) !important;
background: var(--e-global-color-primary) !important;
color: white !important;
min-height: 56px;
cursor: pointer;
padding-right: 10px !important;
text-align: left;

}

div[data-elementor-type="wp-page"] input[type="submit"]{
  padding-left: 1em !important;
padding-right: 1em !important;
}



.ButtonWrapper--primary a .elementor-button-content-wrapper,
.ButtonWrapper--primary button .elementor-button-content-wrapper,
.ButtonWrapper--primary [role="button"] .elementor-button-content-wrapper,
div[data-elementor-type="wp-page"] input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
}

/* Live site: primary hover goes navy -> royal blue */
.ButtonWrapper--primary a:hover,
.ButtonWrapper--primary button:hover,
.ButtonWrapper--primary [role="button"]:hover,
div[data-elementor-type="wp-page"] input[type="submit"]:hover {
background-color: var(--color-royal) !important ;
color: white !important;
}

.ButtonWrapper--primary a:focus,
.ButtonWrapper--primary button:focus,
.ButtonWrapper--primary [role="button"]:focus,
div[data-elementor-type="wp-page"] input[type="submit"]:focus {
box-shadow: var(--focus-ring);
}

/* primary Button Text Label Override (if in a span) */
.ButtonWrapper--primary a span,
.ButtonWrapper--primary button span,
.ButtonWrapper--primary [role="button"] span {
color: white !important;
}



.ButtonWrapper--primary a .elementor-button-content-wrapper,
.ButtonWrapper--primary button .elementor-button-content-wrapper,
.ButtonWrapper--primary [role="button"] .elementor-button-content-wrapper{
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

.ButtonWrapper--primary a .elementor-button-icon i,
.ButtonWrapper--primary button .elementor-button-icon i,
.ButtonWrapper--primary [role="button"] .elementor-button-icon i,
.ButtonWrapper--primary a i,
.ButtonWrapper--primary button i,
.ButtonWrapper--primary [role="button"] i,
.hentry input[type="submit"] i,
div[data-elementor-type="wp-page"] input[type="submit"] i,
.FlickrGrid .photonic-more-button {
padding-left: 0.25em;
padding-right: 0.25em;
transition: transform 200ms ease-in-out !important;
/*transform: scaleX(1.25);*/
}

.ButtonWrapper--primary a .elementor-button-icon{
  order: 2;
}


.ButtonWrapper--primary a .elementor-button-icon{
background-color: transparent;
color: var(--color-white) !important;
border-radius: 100%;
height: 2rem;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ButtonWrapper--primary a:hover,
.ButtonWrapper--primary button:hover,
.ButtonWrapper--primary [role="button"]:hover{
  background-color: var(--color-royal);
}

.ButtonWrapper--primary.ButtonWrapper--primary__print a{
padding-right: 10px !important;
min-width: 155px;
}
.ButtonWrapper--primary.ButtonWrapper--primary__print a .elementor-button-icon{
transform: rotate(0deg);
margin-right: 0;
}

  
/* Live site: arrow icons scale up 1.4x on hover */
.ButtonWrapper--primary a:hover .elementor-button-icon{
transform: scale(1.4);
}

  
.ButtonWrapper--primary.ButtonWrapper--primary__print a:hover .elementor-button-icon{
transform: scale(1);
}

/* secondary Button Styles
   Live site default button: light gray bg, royal text, red icon */
.ButtonWrapper--secondary {
padding: 0em;
}
.ButtonWrapper--secondary a,
.ButtonWrapper--secondary button {
background-color: var(--color-graylight);
font-family: var(--font-heading), sans-serif;
font-weight: var(--fw-regular);
letter-spacing: var(--ls-button);
text-transform: uppercase;
color: var(--color-royal);
border-style: none;
padding: 0em 0.6em 0em 0.6em;
}

.ButtonWrapper--secondary a .elementor-button-content-wrapper,
.ButtonWrapper--secondary button .elementor-button-content-wrapper,
.ButtonWrapper--secondary [role="button"] .elementor-button-content-wrapper {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

.ButtonWrapper--secondary a {
padding-right: 10px !important;
text-align: left;
}

.ButtonWrapper--secondary a .elementor-button-icon {
background-color: transparent;
color: var(--color-red);
border-radius: 100%;
height: 2rem !important;
width: 2rem !important;
min-width: 2rem !important;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0;
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ButtonWrapper--secondary a:hover,
.ButtonWrapper--secondary button:hover,
.ButtonWrapper--secondary [role="button"]:hover {
background-color: var(--color-gray);
color: var(--color-royal);
}

.ButtonWrapper--secondary a:focus,
.ButtonWrapper--secondary button:focus,
.ButtonWrapper--secondary [role="button"]:focus {
box-shadow: var(--focus-ring);
}

.ButtonWrapper--secondary a:hover .elementor-button-icon {
transform: scale(1.4);
}

.ButtonWrapper--icon:hover{
  text-decoration: none !important;
}

.ButtonWrapper--icon .btn-icon{
transition: transform 100ms ease-in-out;
}


.ButtonWrapper--icon:hover .btn-icon{
    transform: scale(1.4);
}

.ButtonWrapper--icon:hover  .elementor-heading-title{
  text-decoration: none !important;
  
}




/* Press Modal Filter Button Styles */

.ButtonWrapper--filter button {
padding-top: 1em;
padding-bottom: 1em;
transition: 200ms ease-in-out !important;
transition-property: background-color !important;
background-color: var(--color-graylight) !important;
background: var(--color-graylight) !important;
color: var(--color-royal) !important;
min-height: 56px;
}

.ButtonWrapper--filter button:hover {
background-color: var(--color-gray) !important ;
color: var(--color-royal) !important;
}

.ButtonWrapper--filter button i {
padding-left: 0.25em;
padding-right: 0.25em;
transition: transform 200ms ease-in-out !important;
transform: scaleX(1.25);
}

.ButtonWrapper--filter button:hover i {
transform: scaleX(1.75);
}

/* .ButtonWrapper--pagination .elementor-post-navigation__link {
padding: 10px;
} */

@media (min-width: 500px) {
.ButtonWrapper--pagination
  .elementor-post-navigation
  .elementor-post-navigation__prev {
  margin-right: 1rem;
}
}

@media (min-width: 768px) {
.ButtonWrapper--pagination
  .elementor-post-navigation
  .elementor-post-navigation__link {
  width: auto;
}

.ButtonWrapper--pagination .elementor-post-navigation {
  justify-content: flex-end;
}
}

@media (max-width: 500px) {
.ButtonWrapper--pagination .elementor-post-navigation {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.ButtonWrapper--pagination .elementor-post-navigation__link {
  width: 100% !important;
  text-align: center !important;
  margin-top: 1rem;
}
}


/* Share Buttons Widget Styles for Press */
.Button--pressShare .elementor-share-btn .fa-long-arrow-alt-right {
opacity: 0;
width: 0;
}

.Button--pressShare .elementor-share-btn .fa-long-arrow-alt-right,
.Button--pressShare .elementor-share-btn {
transition: opacity 100ms ease-in-out;
}





.Button--pressShare .elementor-share-btn__text {
transition: transform 300ms ease-in-out;
}






/* END BUTTONS */

.Link a {
text-decoration: underline;
}

.Link a:hover {
text-decoration: underline;
text-decoration-color: var(--color-royal) !important;
text-decoration-thickness: 2px;
}

.elementor-social-icons-wrapper.elementor-grid {
display: flex;
width: 105px;
}

.btn-icon i{
    font-size: 1rem;
}





.Home__services--iconsTitle {
  text-transform: uppercase;
  color: #60676d;
  font-weight: bold;
  text-align: center;
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
}

.Home__services--iconsTitle a:hover {
  text-decoration: none;
}





.OfficeLocations {
  position: relative;
  padding-top: 2rem
}

.OfficeLocations__content {
  position: relative
}

.Location {
  text-align: center;
  line-height: 1.2
}

.Location {
  font-size: 18px
}

@media screen and (min-width: 320px) {
  .Location {
    font-size: calc(18px + 2 * ((100vw - 320px) / 880))
  }

}

@media screen and (min-width: 1200px) {
  .Location {
    font-size: 20px
  }

}

.Location__icon {
  margin-bottom: .3rem
}

.Location__title {
  cursor: pointer;
  color: #60676d
}

.Location__title--active {
  color: #b3001b !important;
}

.Location__titleLabel {
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: bold
}

.Location__addresses {
  font-size: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 100%;
}

.Location__address {
  display: none;
  transition: display 100ms ease
}

.Location__address--active {
  display: block;
  transition: display 100ms ease
}

.Location__button {
  text-transform: uppercase
}

.Location+.Location {
  border-left: 1px solid #333
}

.OfficeLocationsMap {
  display: block;
  width: 100%;
  height: auto
}

.OfficeLocationsMap__pinFill {
  fill: #12284c;
  transition: fill 100ms ease
}

.active .OfficeLocationsMap__pinFill {
  fill: #b3001b
}

.OfficeLocationsMap__pin:hover {
  cursor: pointer
}

/* Email Tom hero button -- 1:1 port of .HomeHero__button from cotton.senate.gov */
.HomeHero__button .elementor-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: var(--color-navy) !important;
  color: #fff !important;
  max-height: 120px;
  padding: 2.5rem 1.5em !important;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  transition: 200ms ease-in-out;
  transition-property: background-color, box-shadow, color, text-shadow;
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  .HomeHero__button .elementor-button {
    font-size: calc(16px + 20 * ((100vw - 320px) / 880));
  }
}

@media screen and (min-width: 1200px) {
  .HomeHero__button .elementor-button {
    font-size: 36px;
  }
}

@media (min-width: 768px) {
  .HomeHero__button .elementor-button {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (min-width: 1200px) {
  .HomeHero__button .elementor-button {
    width: 470px;
    height: 120px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

.HomeHero__button .elementor-button:hover,
.HomeHero__button .elementor-button:focus {
  background-color: var(--color-royal) !important;
  color: #fff !important;
}

.HomeHero__button .elementor-button:after {
  content: "";
  margin-left: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/wp-content/uploads/2026/08/arrow.svg");
  width: 1.1em;
  height: 1.5em;
  min-width: 1.1em;
  min-height: 1.5em;
  font-size: 1.4em;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.HomeHero__button .elementor-button:hover:after,
.HomeHero__button .elementor-button:focus:after {
  transform: scale(1.4);
}


/* Help for Arkansans icon row -- 1:1 port of live's JS-driven hover state (icon svg + title text recolor to navy). Live's regular/hover icon SVGs are byte-identical except fill:#6b717e -> fill:#12284c, which is exactly what --e-global-color-37a9c9c (Medium Gray) / --e-global-color-b87ca52 (Navy) already provide via the icon-box widget's title_color/hover_title_color globals -- WP only had these wired to :focus (Elementor's a11y default), not :hover. This adds the :hover trigger using the same existing CSS vars. */
.Home__services--iconsTitle:hover .elementor-icon-box-title,
.Home__services--iconsTitle:hover .elementor-icon-box-title a {
  color: var(--e-global-color-b87ca52);
}
.Home__services--iconsTitle.elementor-view-default:hover .elementor-icon {
  fill: var(--e-global-color-b87ca52);
  color: var(--e-global-color-b87ca52);
  border-color: var(--e-global-color-b87ca52);
}


/* Latest Press section -- 1:1 port of live's .PressBlock family. Kit CSS (post-8011) loads
   BEFORE page CSS (post-7976) in <head>, so a page widget's own per-elementor-element-<id>
   rule wins at equal specificity by source order -- !important guarantees these override,
   same pattern already used for .HomeHero__button. */
.PressBlock {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff !important;
}
.PressBlock:not(.PressBlock--featured) {
  background-color: var(--color-graytext) !important;
}
a.PressBlock:hover,
a.PressBlock:focus {
  background-color: var(--color-navy) !important;
}
.PressBlock--alignEnd {
  align-items: flex-end !important;
}
.PressBlock__content {
  position: relative;
  z-index: 2;
}
a.PressBlock .PressBlock__content:after {
  content: "";
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background-image: url("/wp-content/uploads/2026/08/arrow.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  font-size: 1.4em;
  opacity: 0;
  transition: opacity 200ms ease, transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
a.PressBlock:hover .PressBlock__content:after,
a.PressBlock:focus .PressBlock__content:after {
  transform: scale(1.4);
  opacity: 1;
}
.PressBlock__title {
  font-weight: bold !important;
  margin-bottom: 1rem !important;
  font-family: var(--font-body), sans-serif !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  color: #fff !important;
  font-size: 20px !important;
}
@media screen and (min-width: 320px) {
  .PressBlock__title { font-size: calc(20px + 4 * ((100vw - 320px) / 880)) !important; }
}
@media screen and (min-width: 1200px) {
  .PressBlock__title { font-size: 24px !important; }
}
.PressBlock--featured .PressBlock__title {
  font-size: 20px !important;
}
@media screen and (min-width: 320px) {
  .PressBlock--featured .PressBlock__title { font-size: calc(20px + 16 * ((100vw - 320px) / 880)) !important; }
}
@media screen and (min-width: 1200px) {
  .PressBlock--featured .PressBlock__title { font-size: 36px !important; }
}
.PressBlock__date {
  color: var(--color-graylight) !important;
  font-size: .8em !important;
  font-family: var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: .25rem;
}

/* Shared .Button / .Button--secondary -- 1:1 port from live (used by "See More Press" here
   and by the Office Locations "Get Directions" links). Selector targets the descendant
   .elementor-button, not a compound class, per the button-widget wrapper gotcha. */
.Button .elementor-button,
a.Button,
button.Button {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: var(--color-graylight) !important;
  padding: 0 1.5em !important;
  text-align: center;
  font-family: var(--font-heading), sans-serif !important;
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 1px;
  color: var(--color-royal) !important;
  line-height: 1.2;
  transition: 200ms ease-in-out;
  transition-property: background-color, box-shadow, color, text-shadow;
  min-height: 50px;
  height: 45px;
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  .Button .elementor-button,
  a.Button { font-size: calc(16px + 4 * ((100vw - 320px) / 880)); }
}
@media screen and (min-width: 1200px) {
  .Button .elementor-button,
  a.Button { font-size: 20px; }
}
.Button .elementor-button:hover,
.Button .elementor-button:focus,
a.Button:hover,
a.Button:focus,
button.Button:hover,
button.Button:focus {
  background-color: var(--color-gray) !important;
  transition-duration: 100ms;
}
.Button--secondary .elementor-button,
a.Button.Button--secondary {
  background-color: transparent !important;
  color: var(--color-navy) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.Button--secondary .elementor-button:hover,
.Button--secondary .elementor-button:focus,
a.Button.Button--secondary:hover,
a.Button.Button--secondary:focus {
  color: var(--color-royal) !important;
  background-color: transparent !important;
}
.Button--secondary .elementor-button:after,
a.Button.Button--secondary:after {
  content: "";
  margin-left: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/wp-content/uploads/2026/08/arrow.svg");
  width: 1.1em;
  height: 1.1em;
  min-width: 1.1em;
  min-height: 1.1em;
  font-size: 1.4em;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 768px) {
  .Button--secondary .elementor-button:after,
  a.Button.Button--secondary:after { height: 1.5em; min-height: 1.5em; }
}
.Button--secondary .elementor-button:hover:after,
.Button--secondary .elementor-button:focus:after,
a.Button.Button--secondary:hover:after,
a.Button.Button--secondary:focus:after {
  transform: scale(1.4);
}


/* Office Locations titles list -- the WP build only had the SVG map (already correct) and the
   Location__title / Location__address / OfficeLocationsMap CSS from an earlier pass; the actual
   titles <ul> and addresses column markup were empty containers. Added raw HTML widgets with the
   live site's real address/phone/fax data plus the exact live hover-sync script (copied verbatim,
   jQuery already loaded by WP core) -- see fd91960/1442dea in post 7976. This just supplies the
   missing font styling for the title <li> items (color/display already handled by the existing
   .Location__title / .Location__title--active rules above). */
.Location__title {
  font-family: var(--font-heading) !important;
  letter-spacing: 0.05em;
  font-size: var(--fs-h4);
  margin: 0;
}


/* Footer -- 1:1 port of live's .FooterNav__link (gray, uppercase, navy on hover -- same
   gray/navy convention already used by the primary .SiteNav__link in the header) and
   .SocialBubble (navy circle, white icon, royal-blue + gray-icon on hover). The footer here
   already uses native Elementor nav-menu + social-icons widgets with the right content
   (About Tom / Help For Arkansans / News / Contact / Privacy Policy links, Facebook/X/YouTube
   icons) and the outer .SiteFooter class was already applied -- this just supplies the
   live color/typography values, scoped to .elementor-location-footer so it can't leak to
   other elementor nav-menu/social-icons widgets elsewhere on the site. */
.elementor-location-footer .elementor-nav-menu--main .elementor-item {
  color: var(--color-navy) !important;
  fill: var(--color-navy) !important;
  font-size: 14px !important;
}
.elementor-location-footer .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-footer .elementor-nav-menu--main .elementor-item:focus {
  color: var(--color-navy) !important;
  fill: var(--color-navy) !important;
}
.elementor-location-footer .elementor-nav-menu--main li.menu-item {
  position: relative;
}
.elementor-location-footer .elementor-nav-menu--main li.menu-item:not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: var(--color-graytext);
}
.elementor-location-footer .elementor-social-icon {
  background-color: var(--color-navy) !important;
}
.elementor-location-footer .elementor-social-icon i {
  color: #fff !important;
}
.elementor-location-footer .elementor-social-icon:hover {
  background-color: var(--color-royal) !important;
}
.elementor-location-footer .elementor-social-icon:hover i {
  color: var(--color-gray) !important;
}


/* body overflow-x:hidden -- matches cotton.senate.gov common.css; clips any slightly-oversized section instead of showing a horizontal scrollbar */
/* html overflow-x:hidden -- reinforces the body rule above. body alone doesn't fully contain
   Elementor entrance animations (animated slideIn.../zoomIn... classes use transform: translateX,
   which can escape a body-only overflow clip) -- confirmed via document.documentElement.scrollWidth
   ballooning from 375px to 698px mid-animation on the About Tom photo (element 4be5309, slideInRight)
   before settling back once the animation completes. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }


/* .Heading--gray -- 1:1 port; used on Office Locations title list to match live's muted gray title color */
.Heading--gray {
  color: var(--color-graytext);
}


/* Office Locations row -- match the titles/addresses column height to the map column so
   the title list spreads via justify-content:space-between and the address block's
   justify-content:flex-end has room to push toward the bottom, matching live's Bootstrap
   row/col stretch behavior. Gated to md+ since col-12/col-md-4 stacks these full-width on
   mobile, where a forced min-height would just waste space. */
@media (min-width: 768px) {
  .elementor-element-fd91960,
  .elementor-element-1442dea,
  .elementor-element-31c44c,
  .elementor-element-1062c4 {
    min-height: 400px !important;
  }
  .elementor-element-31c44c .elementor-widget-container,
  .elementor-element-1062c4 .elementor-widget-container {
    min-height: 400px !important;
    display: flex !important;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .elementor-element-fd91960,
  .elementor-element-1442dea,
  .elementor-element-31c44c,
  .elementor-element-1062c4,
  .elementor-element-31c44c .elementor-widget-container,
  .elementor-element-1062c4 .elementor-widget-container {
    min-height: 450px !important;
  }
}
.elementor-element-31c44c .elementor-widget-container > ul,
.elementor-element-1062c4 .elementor-widget-container > .Location__addresses {
  flex: 1;
  width: 100%;
}


.elementor-element-31c44c .elementor-widget-container > ul,
.elementor-element-1062c4 .elementor-widget-container > .Location__addresses {
  flex: 1;
  width: 100%;
}



/* Help for Arkansans -- ImageWithButton cards, 1:1 port from live's .ImageWithButton /
   .Button--primary / .Button--lg. The col container IS the photo (background-image set
   via Elementor), and the button container renders as a real <a> (html_tag:a) carrying
   these classes directly on itself -- same "a.Button" direct-element pattern as the
   Office Locations "Get Directions" fix, not the widget-wrapper descendant pattern. */
.ImageWithButton {
  height: 300px;
}
@media (min-width: 576px) {
  .ImageWithButton { height: 180px; }
}
@media (min-width: 992px) {
  .ImageWithButton { height: 335px; }
}

/* Elementor containers default to width:100% (the .e-con-full class forces it);
   these need to shrink to fit their own text like a real <a> tag would, so
   justify-content:flex-end/align-items:flex-end on the parent .ImageWithButton
   actually has something meaningful to align. */
.elementor-element-6880c58,
.elementor-element-fdfafb8 {
  width: auto !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
}
a.Button.Button--primary {
  background-color: var(--color-navy) !important;
  color: #fff !important;
}
a.Button.Button--primary:hover,
a.Button.Button--primary:focus {
  background-color: var(--color-royal) !important;
  color: #fff !important;
}
a.Button.Button--primary:after {
  content: "";
  margin-left: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/wp-content/uploads/2026/08/arrow.svg");
  width: 1.1em;
  height: 1.5em;
  min-width: 1.1em;
  min-height: 1.5em;
  font-size: 1.4em;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
a.Button.Button--primary:hover:after,
a.Button.Button--primary:focus:after {
  transform: scale(1.4);
}
a.Button.Button--lg {
  padding: 0 2.2em !important;
  min-height: 90px !important;
  height: 81px !important;
}
@media (max-width: 992px) {
  a.Button.ImageWithButton__link {
    width: 100% !important;
    min-height: 50px !important;
    height: 45px !important;
  }
}
a.Button.Button--primary .elementor-heading-title {
  color: #fff !important;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}
a.Button.Button--primary .elementor-widget-heading {
  width: auto !important;
  flex: 0 0 auto !important;
}



/* .Button--download -- 1:1 port of live's .Button--primaryArrowDownload (About Tom bio page
   "download official photo" / "download official BIO" buttons). Sibling modifier to
   .Button--secondary, reusing the same .Button base + descendant-.elementor-kit-8011 pattern so it can be
   dropped onto any Button-family widget elsewhere on the site that needs a download action. */
.Button--download .elementor-button,
a.Button.Button--download {
  background-color: transparent !important;
  color: var(--color-navy) !important;
  font-weight: bold;
  padding: 0 !important;
}
.Button--download .elementor-button:hover,
.Button--download .elementor-button:focus,
a.Button.Button--download:hover,
a.Button.Button--download:focus {
  color: var(--color-royal) !important;
  background-color: transparent !important;
}
.Button--download .elementor-button:after,
a.Button.Button--download:after {
  content: "";
  margin-left: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/wp-content/uploads/2026/08/download.svg");
  width: 1.4em;
  height: 1.4em;
  min-width: 1.4em;
  min-height: 1.4em;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.Button--download .elementor-button:hover:after,
.Button--download .elementor-button:focus:after,
a.Button.Button--download:hover:after,
a.Button.Button--download:focus:after {
  transform: scale(1.4);
}


/* Entrance-animation tweaks -- live's site-wide data-animate/ScrollMagic scroll-reveal system
   (fastfade/zoomin/sliderleft/child-slide-ease-up) hasn't been ported as custom JS; instead these
   use Elementor's native per-element Entrance Animation (triggers correctly via Elementor's own
   viewport JS) with the closest built-in animation type, then the actual duration/easing/keyframe
   here overridden to match live's real values from common.css. */

/* fastfade -> fadeIn (home "Latest Press" row) */
.elementor-element-3c21e52.animated {
  animation-duration: .5s !important;
  animation-timing-function: ease-in-out !important;
}

/* zoomin -> custom subtle scale (live uses scale(0.9), Elementor's built-in zoomIn starts at 0.3)
   (home "Office Locations" section) */
@keyframes cottonZoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.elementor-element-39b2149.animated {
  animation-name: cottonZoomIn !important;
  animation-duration: 1s !important;
  animation-timing-function: ease-in-out !important;
}

/* sliderleft -> slideInRight (Elementor's default direction already matches: translateX 100%->0),
   live's exact cubic-bezier + duration (About Tom photo/download column + committee assignments box) */
.elementor-element-4be5309.animated,
.elementor-element-2441dd6.animated {
  animation-duration: 1.1s !important;
  animation-timing-function: cubic-bezier(0.6, 0.2, 0.1, 1) !important;
}

/* child-slide-ease-up -> custom small-offset fadeInUp (live uses translateY(50px) per child with a
   0.1s stagger; Elementor's built-in fadeInUp moves a full 100% of element height) -- applied to
   each "Help for Arkansans" icon individually with staggered _animation_delay (home page) */
@keyframes cottonFadeInUpSmall {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
.elementor-element-02474bc.animated,
.elementor-element-e3af159.animated,
.elementor-element-a1b1c26.animated,
.elementor-element-c9ab12e.animated,
.elementor-element-cf95253.animated,
.elementor-element-598c503.animated {
  animation-name: cottonFadeInUpSmall !important;
  animation-duration: .6s !important;
  animation-timing-function: ease !important;
}


/* Page-title Banner -- live's interior-page header bar (gray photo + white uppercase page title),
   used on About/Contact/News etc. Ported here for About Tom; reuse the same .Banner/.Banner__text/
   Heading--banner/Heading--white classes for the other interior pages later (just swap the
   background image + heading text per page, same as live does). Background image/size/position/
   repeat are set via the container's native Elementor background controls, not here. */
.Banner {
  overflow: hidden;
  max-width: calc(1330px + 4rem);
  position: relative;
  height: 40vw;
  margin-left: auto;
  margin-right: auto;
  min-height: 250px;
  max-height: 400px;
}
.Banner__text {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  height: 100%;
  position: relative;
  z-index: 2;
}
.Banner__text > h1 {
  text-transform: uppercase;
}

/* Page-title Banner readability gradient (dark-to-clear), over the ACF-driven photo
   container. Deliberate addition beyond 1:1 -- live has no equivalent overlay. Must target
   :after, not :before -- Elementor's own .e-con CSS reserves ::before on every container for
   its native Background Overlay feature and silently cancels a custom :before rule there
   regardless of specificity. Must use a non-empty content value -- Elementor's Kit-CSS save
   step mangles content:""; down to invalid content:; on write. Must target .Banner__image
   (the actual photo-bearing container, class added on Site Header post 7987 node 24a6ee9),
   not the wider .Banner section, which can be full-section-width while the photo is narrower
   on some pages (e.g. Casework) -- attaching to .Banner directly left a visible gray band. */
.Banner__image {
  position: relative;
}
.Banner__image.has-photo:after {
  content: "\2060" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,0) 75%) !important;
}
.Heading--white {
  color: #fff;
}
.Heading--banner {
  width: 100%;
  font-size: 31.68px;
}
@media screen and (min-width: 320px) {
  .Heading--banner { font-size: calc(31.68px + 64.32 * ((100vw - 320px) / 880)); }
}
@media screen and (min-width: 1200px) {
  .Heading--banner { font-size: 96px; }
}
@media (min-width: 992px) {
  .Heading--banner { width: 50%; }
}

/* fastfade -> fadeIn (About Tom Banner title, same override as the home page fastfade group) */
.elementor-element-916f357.animated {
  animation-duration: .5s !important;
  animation-timing-function: ease-in-out !important;
}


/* .Button--primary widget-descendant form (session 3 only added the "a.Button.Button--primary"
   compound form for container-as-anchor usage e.g. ImageWithButton; Contact page's "Email Tom" /
   "Email Tom's Press Office" buttons are actual button WIDGETS, which need the descendant form per
   the widget-wrapper gotcha). Reuses the same live values already ported (navy/royal/arrow.svg). */
.Button--primary .elementor-button {
  background-color: var(--color-navy) !important;
  color: #fff !important;
}
.Button--primary .elementor-button:hover,
.Button--primary .elementor-button:focus {
  background-color: var(--color-royal) !important;
  color: #fff !important;
}
.Button--primary .elementor-button:after {
  content: "";
  margin-left: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/wp-content/uploads/2026/08/arrow.svg");
  width: 1.1em;
  height: 1.5em;
  min-width: 1.1em;
  min-height: 1.5em;
  font-size: 1.4em;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.Button--primary .elementor-button:hover:after,
.Button--primary .elementor-button:focus:after {
  transform: scale(1.4);
}
.Button--block .elementor-button,
a.Button.Button--block,
button.Button.Button--block {
  width: 100% !important;
}

/* .Button--prev -- mirror of .Button--primary's arrow, flipped to point left and placed
   before the text (used by the archive pagination bar's Previous button, alongside the
   existing Next button which already reuses .Button--primary as-is). */
a.Button--prev.Button--primary:after {
  content: none;
}
a.Button--prev.Button--primary:before {
  content: "";
  margin-right: 15px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/wp-content/uploads/2026/08/arrow.svg");
  width: 1.1em;
  height: 1.5em;
  min-width: 1.1em;
  min-height: 1.5em;
  font-size: 1.4em;
  transform: scaleX(-1);
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
a.Button--prev.Button--primary:hover:before,
a.Button--prev.Button--primary:focus:before {
  transform: scaleX(-1) scale(1.4);
}

/* .ArchivePaginationBar -- 1:1 port of live's 'Showing page [N] of Y' + Next pagination
   (used on the Press Releases/Op-Eds/Speeches archive pages, replacing Elementor's own
   long list of numbered page links, which the archive-pagination-enhancer script hides). */
.ArchivePaginationBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
  font-family: var(--font-body), sans-serif;
  color: var(--color-navy);
}
.ArchivePaginationBar__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.ArchivePaginationBar__left span {
  white-space: nowrap;
  flex-shrink: 0;
}
.ArchivePaginationBar__right {
  flex: 0 0 auto;
  display: flex;
  gap: 1rem;
}

/* .InputSelect -- 1:1 port of live's select styling (custom chevron via background gradients,
   since native appearance is disabled). Only .InputSelect--sm is needed here (pagination
   dropdown is always small), so the default 50px-height variant is omitted. */
.InputSelect--sm {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2.5em 0 1em;
  font-family: var(--font-body), sans-serif;
  background-color: #fff;
  color: var(--color-navy);
  border: 2px solid var(--color-graylight);
  min-height: 40px;
  background-image:
    linear-gradient(90deg, white 0, white 0),
    linear-gradient(56deg, transparent 4px, var(--color-royal) 5px),
    linear-gradient(-56deg, transparent 4px, var(--color-royal) 5px);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 2px 100%, 6px 6px, 6px 6px;
  background-position: right 30px center, right 16px center, right 10px center;
}

/* .Button--sm -- 1:1 port of live's .Button--sm modifier (used by the Press/Op-Eds/Speeches
   archive Filter-trigger + Collapse-toggle buttons). Live: padding 0 1em, min-height 40px,
   height 36px, font-size fluid 12px(mobile)->15px(1200px+). */
.Button--sm .elementor-button,
a.Button.Button--sm,
button.Button.Button--sm {
  padding: 0 1em !important;
  min-height: 40px !important;
  height: 36px !important;
  line-height: 1 !important;
  font-size: 12px;
}
@media screen and (min-width: 320px) {
  .Button--sm .elementor-button,
  a.Button.Button--sm,
  button.Button.Button--sm { font-size: calc(12px + 3 * ((100vw - 320px) / 880)); }
}
@media screen and (min-width: 1200px) {
  .Button--sm .elementor-button,
  a.Button.Button--sm,
  button.Button.Button--sm { font-size: 15px; }
}
.Button--full .elementor-button,
a.Button.Button--full {
  height: 100% !important;
}
.Button--lg .elementor-button {
  padding: 0 2.2em !important;
  min-height: 90px !important;
  height: 81px !important;
}

/* zoomin -> reuse the home page's cottonZoomIn keyframe (Contact page's Office Locations block) */
.elementor-element-f66f89e.animated {
  animation-name: cottonZoomIn !important;
  animation-duration: 1s !important;
  animation-timing-function: ease-in-out !important;
}


/* News page (post 7990) additions */
.PressBlock__excerpt {
  font-size: .8em;
}
/* PressBlock font-size context (BugHerd #43 fix, session 8) -- live's real
   font-size cascade into .PressBlock is body's OWN fluid font-size rule
   (body{font-size:16px}, scaling to 20px by 1200px via the standard 3-tier
   calc() pattern) -- a SEPARATE mechanism from the html-root rem scale
   (10px/16px/20px) ported in an earlier session. That body font-size rule
   was never ported at all, so .PressBlock (and everything inside it) was
   silently inheriting the small rem-scale root font-size instead --
   measured 8px for .PressBlock__excerpt/.PressBlock__date locally at
   mobile/tablet widths vs. live's real ~13-14px, matching the "copy too
   small, can't read" report. Scoped to .PressBlock rather than a sitewide
   `body{font-size}` rule so this can't affect other templates/pages outside
   this session's assigned scope (News page / template 8513) -- live has no
   other override between body and .PressBlock either, so the resolved
   value is identical to porting it at the body level. */
.PressBlock {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  .PressBlock { font-size: calc(16px + 4 * ((100vw - 320px) / 880)); }
}
@media screen and (min-width: 1200px) {
  .PressBlock { font-size: 20px; }
}
.VideoPlayer {
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
  position: relative;
}
.VideoPlayer__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ArticleTitle {
  font-family: "Archivo", sans-serif;
  font-weight: bold;
  line-height: 1.2;
  font-size: 18px;
}
@media screen and (min-width: 320px) {
  .ArticleTitle { font-size: calc(18px + 6 * ((100vw - 320px) / 880)); }
}
@media screen and (min-width: 1200px) {
  .ArticleTitle { font-size: 24px; }
}
a.ArticleTitle:hover, .ArticleTitle:hover {
  color: var(--e-global-color-accent);
  text-decoration: none;
}
a.ArticleTitle:hover .elementor-heading-title, .ArticleTitle:hover .elementor-heading-title {
  color: var(--e-global-color-accent);
}
.ArticleTitle__link {
  text-decoration: none;
  color: inherit;
}
.ArticleBlock__date {
  color: #60676d;
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  display: inline-block;
  margin-bottom: .25rem;
}

/* subtleslideup -> custom small-offset fadeInUp, live starts at opacity .3 not 0 (News page's
   4 Newsroom sections: Press Releases/Op-Eds/Speeches/Videos) */
@keyframes cottonSubtleSlideUp {
  from { opacity: .3; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.elementor-element-2a095a0.animated,
.elementor-element-072ef6b.animated,
.elementor-element-54f7086.animated,
.elementor-element-5556285.animated {
  animation-name: cottonSubtleSlideUp !important;
  animation-duration: .5s !important;
  animation-timing-function: ease-in-out !important;
}


/* About Tom page-title banner uses a flat light-gray background image (not a real photo like
   Contact/News), so live shows navy text here instead of the white used elsewhere -- confirmed
   via live HTML: About's h1 is "Heading Heading--banner" with no "Heading--white" modifier,
   while Contact/News both have it. The banner heading itself lives in the shared Site Header
   template (post 7987, container 76d4a20), so this override is scoped to About Tom's own
   body class rather than changing the shared default (which is correct for every other page). */
body.page-id-7988 .elementor-element-09be298 .elementor-heading-title,
body.page-id-7988 .elementor-element-142cbf9 .elementor-heading-title {
  color: var(--color-navy) !important;
}

/* Help For Arkansans banner has no photo either (gray flat bg like About Tom) -- same navy-text fix. */
body.page-id-8048 .elementor-element-09be298 .elementor-heading-title,
body.page-id-8048 .elementor-element-142cbf9 .elementor-heading-title {
  color: var(--color-navy) !important;
}


/* .Button--link -- 1:1 port of live's modifier used on the Committee Assignments box links
   (About Tom page, and reusable anywhere a .Button--primary needs to sit flush/inline rather
   than as a filled block, e.g. a list of links inside an already-colored box). */
.Button--link .elementor-button,
a.Button.Button--link {
  text-transform: inherit !important;
  text-decoration: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-family: "Archivo", sans-serif !important;
}
.Button--link .elementor-button:hover,
a.Button.Button--link:hover {
  background-color: transparent !important;
  text-decoration: underline !important;
}


.text-left, .text-left .elementor-button { text-align: left !important; }


/* --- SiteFooter__stars badge: real live mechanism (session 7 spacing sweep) ---
   Replaces the old eael-divider widget, which had two hardcoded 1000px flanking
   rule lines that don't exist on live and caused site-wide horizontal overflow. */
.SiteFooter{position:relative;box-shadow:0 0 3px #dce1e4;margin-top:3rem !important}
.SiteFooter__stars{position:absolute;top:0;left:50%;font-size:100px;margin-top:-0.225em;margin-left:-67.5px;width:135px;background-color:#fff;padding:10px;overflow:hidden}
.SiteFooter__stars>img{width:100%;height:auto;display:block}


/* --- PressBlock true sizing (session 7 spacing sweep) ---
   Live's actual box model: .PressBlock itself has NO padding and is a perfect
   square via the classic intrinsic-ratio (:before{padding-top:100%}) trick;
   all visible inset padding lives on .PressBlock__content (1.5rem). Sessions
   3/5 had baked padding directly onto each loop-item template's root container
   instead (3rem/2rem for the featured item, plus a hardcoded min-height:540px
   standing in for the square), which is why local's press boxes were a fixed
   540px-tall rectangle with oversized padding instead of a live-accurate
   self-sizing square. Using modern aspect-ratio instead of the old float/
   padding-top hack -- same visual result, doesn't fight Elementor's own
   flex-item handling of :before content the way the legacy technique might. */
/* Corrected session 8 (BugHerd #42): live's real box model is a RESPONSIVE
   intrinsic ratio (:before{padding-top:50%}), not a flat square at every
   width -- it only becomes a true square (padding-top:100%) at live's own
   @media(min-width:768px). Below 768px live renders a shorter 2:1 (wide,
   short) rectangle. Session 7 ported the >=768px square value as a flat
   constant applied at all widths, which combined with the Loop Grid's
   wrong tablet/tablet-extra column count (see the widget's own
   columns_tablet/columns_tablet_extra settings, fixed separately) produced
   the oversized full-viewport-width squares reported at 768/414. The
   featured variant (.PressBlock--featured) is the one exception -- live
   keeps it square at EVERY width (its own :before{padding-top:100%} rule
   has no media-query guard), so it's carved out here unconditionally. */
/* CORRECTION, take 2 (Christian caught a regression: removing aspect-ratio sitewide
   broke the Home page's "Latest Press" cards, which went flat/squished). Turns out BOTH
   the earlier session's diagnosis AND my first correction were each half-right, for
   DIFFERENT templates:
   - Home page cards (templates 8017 regular / 8488 featured, NO excerpt content at all)
     really ARE square on live -- confirmed 307.5x307.5 and 635x635 at 1440px -- just via
     an old padding-top-percentage hack rather than the modern aspect-ratio property
     (which is why getComputedStyle reported "auto" there too -- a padding hack doesn't
     show up in that property, but the box IS still forced square). The ORIGINAL
     aspect-ratio:1 rule was a reasonable modern equivalent for this case and should stay.
   - News page cards (template 8513, WITH excerpt content) are genuinely NOT square on
     live -- confirmed auto-height, content-driven, at 768/414px -- this is the one that
     needed fixing, per the original report.
   Scoped precisely this time: restore the square-ish sizing for the general .PressBlock
   (Home page), and override back to auto ONLY inside template 8513 (News page cards). */
.PressBlock:not(.PressBlock--featured) { aspect-ratio: 2/1; }
@media screen and (min-width: 768px) {
  .PressBlock:not(.PressBlock--featured) { aspect-ratio: 1; }
}
.PressBlock--featured { aspect-ratio: 1 !important; }
.elementor-8513 .PressBlock,
.elementor-8513.PressBlock { aspect-ratio: auto !important; height: 100% !important; }
/* height:100% (not auto) is deliberate: the GRID ITEM WRAPPER (.e-loop-item, a direct
   child of .elementor-loop-container) already stretches correctly to match the tallest
   card in its row via the grid's own align-items:stretch -- confirmed via gridTemplateRows
   resolving to one row height and all wrapper tops/heights matching. .PressBlock is a
   NESTED descendant of that wrapper, not the grid item itself, so height:auto made it
   shrink to its own content instead of filling the already-correctly-stretched wrapper --
   caused uneven card heights within a row (Christian caught this on Op-Eds/Speeches).
   height:100% fills the wrapper, so every card in a row ends up the height of its
   tallest sibling, while the row itself still grows/shrinks per row based on content
   (mobile stacking is unaffected since height:100% of an auto-stretched single-column
   wrapper is just that one item's own natural height). */
.PressBlock .PressBlock__content{padding:1.5rem}


/* --- Bootstrap .my-3 utility (session 7 spacing sweep) ---
   Live applies this directly on the "See More Press" button for its vertical
   spacing; wasn't ported since this is the first place on the site needing it. */
.my-3{margin-top:1rem !important;margin-bottom:1rem !important}


/* --- Root responsive font-size scale (session 7 spacing sweep) ---
   THE foundational fix behind most of the site's scattered "sizes look a bit
   off" symptoms: live's entire rem/em-based design system (buttons, PressBlock
   padding, .my-3, heading calc()s, etc.) scales off html{font-size}, which
   itself is responsive -- 10px below 992px, 16px from 992px, 20px from 1200px.
   WP/Elementor never had this at all, so every rem-based value ported across
   sessions 3-6 rendered at a flat 16px-root size regardless of viewport,
   instead of tracking live's real per-breakpoint scale. Adding this one rule
   is expected to self-correct a large number of small font-size/spacing/
   line-height mismatches site-wide without touching individual elements. */
html{font-size:10px}
@media(min-width: 992px){html{font-size:16px}}
@media(min-width: 1200px){html{font-size:20px}}


/* --- .RawHTML / .amend-textarea base typography (session 7 follow-up) ---
   Christian flagged the About Tom body copy as visibly too big/wrong-colored
   compared to live. Root cause: EVERY piece of Amend-imported rich-text
   content on this site is wrapped in .RawHTML (or .amend-textarea) -- this is
   the class that actually carries the real body-copy font-size (a responsive
   16px->22px scale, independent of the html-root rem system fixed earlier
   this session) and text color (navy, not the WP theme's generic dark-gray
   default). None of this had ever been ported -- local's paragraph text was
   rendering off coincidental fallback styling this whole time, not the site's
   real typography. Only the base rule is ported here (color/line-height/
   font-size); .RawHTML's heading/list/blockquote/staff-bio sub-rules are a
   larger follow-up, not yet ported. */
.RawHTML,.amend-textarea {
  color: var(--color-navy) !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}
@media screen and (min-width: 320px) {
  .RawHTML,.amend-textarea { font-size: calc(16px + 6 * ((100vw - 320px) / 880)) !important; }
}
@media screen and (min-width: 1200px) {
  .RawHTML,.amend-textarea { font-size: 22px !important; }
}


/* --- Bio/RawHTML paragraph spacing (session 7 second follow-up) ---
   Christian flagged the About Tom bio's paragraph spacing as way off (too
   much gap between paragraphs vs live's tight spacing). Root cause: Amend
   splits body copy into one .Block--paragraph per paragraph, each carrying a
   .pb-2 Bootstrap utility class (padding-bottom:.5rem = 10px at this
   breakpoint) -- that's live's ENTIRE inter-paragraph gap mechanism. The <p>
   tag's own margin-bottom is a red herring: it's zeroed by a MORE SPECIFIC
   live rule (.RawHTML>*:last-child{margin-bottom:0}, specificity 0,2,0)
   because each RawHTML wrapper here holds exactly one paragraph, which is
   simultaneously its own :last-child -- that beats the generic
   .RawHTML p{margin-bottom:1em} rule (specificity 0,1,1) despite appearing
   earlier in source order. None of this existed in Kit CSS at all, so local
   was falling back to some other margin entirely (measured 30.8px, ~3x too
   much). Porting the real mechanism, not just zeroing a number, so any future
   RawHTML block that genuinely contains multiple <p> children (not the
   one-block-per-paragraph pattern used here) still gets correct 1em spacing
   between its own inner paragraphs. */
.pb-2,.py-2 { padding-bottom: .5rem !important; }
.RawHTML p,.amend-textarea p { margin-bottom: 1em !important; }
.RawHTML>*:last-child,.amend-textarea>*:last-child { margin-bottom: 0 !important; }


/* --- .Heading--banner widget-wrapper-vs-inner-element fix (session 7 third follow-up) ---
   The shared Site Header template's banner heading widgets just got their
   Heading/Heading--banner classes added for the first time (they'd never had
   them -- see the note above about the header widgets rendering unstyled).
   But _css_classes on a heading WIDGET lands on the outer wrapper div, not
   the inner .elementor-heading-title span that actually carries the visible
   text -- the standing widget-wrapper-vs-inner-element gotcha, same pattern
   as .Button/.PressBlock__content elsewhere in this file. The existing bare
   `.Heading--banner{font-size:...}` rule was therefore a no-op for this
   widget context. Adding the descendant form alongside it (not replacing --
   some other Heading--banner usage might be a container-as-anchor that DOES
   need the bare form). */
.Heading--banner .elementor-heading-title {
  width: 100%;
  font-size: 31.68px !important;
}
@media screen and (min-width: 320px) {
  .Heading--banner .elementor-heading-title { font-size: calc(31.68px + 64.32 * ((100vw - 320px) / 880)) !important; }
}
@media screen and (min-width: 1200px) {
  .Heading--banner .elementor-heading-title { font-size: 96px !important; }
}


/* --- .Heading base line-height (session 7 fourth follow-up) ---
   Live's real base line-height for all headings comes from a site-wide
   body{line-height:1.2} rule (found while chasing the RawHTML paragraph
   bug earlier this session) that was never ported at all -- .Heading itself
   has no explicit line-height in live's own CSS either, it just inherits the
   1.2 body value. Scoping this to .Heading specifically (not a blanket body
   rule) since a full body-level line-height/color change needs wider
   verification across pages than this session covered. */
.Heading { line-height: 1.2 !important; }


/* --- Main header nav typography (session 7 sixth follow-up) ---
   Christian: "the nav bar, the font looks different in size as well." Found
   the header nav menu had NEVER been styled at all across any session --
   only the FOOTER nav (a separate elementor-nav-menu widget) got custom CSS
   back in session 3. The header's own nav-menu widget was running on
   Elementor's raw defaults (Montserrat, weight 800, 22.5px, 1px
   letter-spacing) this whole time -- confirmed live's real values via
   .SiteNav__link in common.css: Archivo, weight 600, 18px, normal
   letter-spacing, uppercase, gray default / navy on hover+active. Scoped to
   .elementor-location-header so this can't leak into the footer nav's
   already-correct separate styling. */
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  color: var(--color-graytext) !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-item-active {
  color: var(--color-navy) !important;
}


/* --- Header nav dropdown submenu (session 7 seventh follow-up) ---
   Christian: live's dropdown has a red top border, an upward-pointing
   triangle arrow, and uppercase gray/navy text -- none of which existed on
   local (plain white box, title-case text). Same root cause as #45 (the
   header nav-menu widget was never styled at all) just for the submenu
   panel specifically. Live's real classes: .SiteNav__dropdown (the panel,
   border-top + :before/:after triangle) and .SiteNav__dropdownLink (the
   items). Local's equivalent Elementor markup: ul.elementor-nav-menu--dropdown
   / a.elementor-sub-item. */
.elementor-location-header .elementor-nav-menu--dropdown {
  border-top: 5px solid #b3001b;
  box-shadow: 10px 10px rgba(51,51,51,.1), 0 1px 0 1px rgba(51,51,51,.1);
}
.elementor-location-header .elementor-nav-menu--dropdown:before,
.elementor-location-header .elementor-nav-menu--dropdown:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
}
.elementor-location-header .elementor-nav-menu--dropdown:before {
  left: 0;
  right: 0;
  height: 6px;
}
.elementor-location-header .elementor-nav-menu--dropdown:after {
  left: 50%;
  border: 15px solid transparent;
  border-top-width: 0;
  border-bottom-color: #b3001b;
  margin-left: -15px;
}
.elementor-location-header .elementor-sub-item {
  color: var(--color-graytext) !important;
  font-family: "Archivo", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
}
.elementor-location-header .elementor-sub-item:hover,
.elementor-location-header .elementor-sub-item:focus {
  color: var(--color-navy) !important;
}


/* --- Dropdown font-size/padding specificity fix (session 7 eighth follow-up) ---
   Even after fixing the widget's own dropdown typography settings, font-size
   and padding stayed wrong (22.5px, squeezed padding) -- traced to a THEME-
   level rule (not from Elementor at all): `.header-nav .menu-item a` with
   !important, including a `@media (min-width:1400px){font-size:1.125rem
   !important}` responsive override, plus a base rule forcing
   padding-left/right:0 and padding-bottom:4px, all !important. This rule's
   specificity (2 classes + 1 element = 0,2,1) narrowly beats the earlier
   `.elementor-location-header .elementor-sub-item` fix (0,2,0) since equal
   class counts fall through to the element-.elementor-kit-8011 tiebreak. Adding the
   dropdown-panel class into the chain (one more class level) reliably wins. */
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
  font-size: 16px !important;
  padding: 15px 20px !important;
}


/* --- Dropdown horizontal centering (session 7 ninth follow-up) ---
   Christian: "see how it lines up nicely" on live -- the dropdown panel and
   its arrow are centered under the trigger link. Locally the dropdown had no
   explicit left/transform at all (confirmed: no matching CSS rule sets
   `left`), so it fell back to its plain static-flow position, landing offset
   to one side instead of centered. Live's real mechanism:
   .SiteNav__dropdown{left:50%;transform:translate3d(-50%,0,0) ...}. Ported
   directly; no specificity fight needed here since nothing else declares
   `left` on this element. */
@media (min-width: 1200px) {
  /* Scoped to desktop only -- this same .elementor-nav-menu--dropdown class is reused by the
     separate mobile off-canvas nav-menu widget (js-mobileMenu) to render its full vertical
     menu list, and centering it the same way as the small desktop hover-dropdown shoved the
     entire mobile menu ~155px off-screen to the left (half its own width, per translateX(-50%)). */
  .elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown {
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;
}
}


/* --- Dropdown border/shadow specificity fix + hover restyle (session 7 tenth follow-up) ---
   Christian: red bar didn't span the full width and had no visible drop
   shadow (only the :before pseudo triangle was rendering red, the actual
   border-top and box-shadow properties from the #45b fix were losing to
   theme rules -- `.elementor-nav-menu--main .elementor-nav-menu ul` (3
   classes) beat border-top-width, `.header-nav ul.sub-menu` (2 classes + 1
   element) beat box-shadow, since neither of my original declarations had
   !important). Specificity-boosted + added !important.
   Also: the hover state was a bright/dark Elementor default
   (var(--e-global-color-392f7f7), a raw Elementor Kit global color, not
   something exposed as a normal widget setting) with a bright-blue text
   color -- Christian wants to KEEP a background highlight on hover (unlike
   live, which only changes text color) but lighter, plus no shrink/layout
   shift. Using the site's existing --color-graylight token for a soft,
   on-brand highlight instead of Elementor's raw default. */
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown {
  border-top: 5px solid #b3001b !important;
  box-shadow: 10px 10px rgba(51,51,51,.1), 0 1px 0 1px rgba(51,51,51,.1) !important;
}
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:focus {
  background-color: var(--color-graylight) !important;
  color: var(--color-navy) !important;
}


/* --- Dropdown item hover padding/"shrink" fix (session 7 eleventh follow-up) ---
   Christian correctly diagnosed the exact culprits himself:
   `.header-nav ul.sub-menu li > a:hover` and `.header-nav .menu-item a:hover`
   (theme rules, both !important, padding: 0.5em 1em). The base (non-hover)
   version of the same theme rule loses to the #45c padding fix
   (`.elementor-location-header...a.elementor-sub-item`, 3 classes + 1
   element) since it only has 2 classes + 3 elements. But adding `:hover`
   counts as a class for specificity purposes, bumping the theme rule to 3
   classes + 3 elements -- now TYING on class count, so the element-count
   tiebreak flips it back to the theme rule on hover specifically. That's
   why padding (and therefore item height) visibly changed only on hover.
   Fixing by re-asserting the correct padding on :hover/:focus too, at the
   same boosted specificity used elsewhere in this file. */
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:focus {
  padding: 15px 20px !important;
}


/* --- Dropdown container padding (session 7 twelfth follow-up) ---
   Christian: local dropdown had extra space before/after the item list vs
   live's tight fit. Root cause: the UL itself (.elementor-nav-menu--dropdown)
   had 13px top/bottom padding from Elementor's own default nav-menu CSS --
   separate from the per-item padding already fixed in #45c. Live's real
   dropdown has zero padding on the panel itself; each item's own
   padding:15px 20px is the entire spacing. */
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu--dropdown.elementor-nav-menu--dropdown {
  padding: 0 !important;
}


/* --- Dropdown top margin + text wrap (Christian's direct requests) --- */
.elementor-7987 .elementor-element.elementor-element-131fe78 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown,
.elementor-7987 .elementor-element.elementor-element-131fe78 .elementor-nav-menu__container.elementor-nav-menu--dropdown {
  margin-top: 1rem !important;
}
.elementor-location-header.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}


/* Contact page 'Email Tom' / 'Email Tom's Press Office' buttons -- live wraps these in a
   Bootstrap col-12 col-sm-6 col-md-4 column, so .Button--block's width:100% only fills that
   narrow column, not the full 1330px content area. Locally the button widget sits directly in
   the boxed container (flex, default align-items:stretch), which is what stretched it edge to
   edge. Replicate the column width responsively rather than the missing Bootstrap wrapper. */
body.page-id-7989 .elementor-element-14e947f,
body.page-id-7989 .elementor-element-66360b7 {
  align-self: flex-start !important;
  width: 100% !important;
}
@media (min-width: 576px) {
  body.page-id-7989 .elementor-element-14e947f,
  body.page-id-7989 .elementor-element-66360b7 {
    width: 50% !important;
  }
}
@media (min-width: 992px) {
  body.page-id-7989 .elementor-element-14e947f,
  body.page-id-7989 .elementor-element-66360b7 {
    width: 31.3% !important;
  }
}

/* Home hero logo image (container 29f01c0, image widget 41d2494) -- correctly ported
   live's .HomeHero__logo{width:50%} onto the container's own native width setting, but
   Elementor's own core mobile stylesheet forces ALL flex containers to --width:100% at
   max-width:767px (custom-frontend.min.css, standard Elementor mobile-stacking behavior).
   Live isn't Elementor-based so it has no such override -- the logo stays 50% width on
   mobile there too. Re-assert 50% at this one breakpoint for this one container only;
   not touching Elementor's general mobile-stacking default anywhere else on the site. */
@media (max-width: 767px) {
  .elementor-element-29f01c0 {
    --width: 50% !important;
  }
}

/* About Tom mobile stacking order -- live shows the portrait photo + download buttons
   BEFORE the bio paragraphs when stacked on mobile; local's DOM order (bio text container
   3e72e64 first, photo column 4be5309 second) is correct for the desktop 2-column row but
   stacks in that same source order on mobile by default. Swap via flex order at the same
   max-width:767px breakpoint Elementor itself uses for its own mobile container behavior. */
@media (max-width: 767px) {
  .elementor-element-3e72e64 { order: 2; }
  .elementor-element-4be5309 { order: 1; }
}

/* Help For Arkansans -- Academy Nominations card link (a6eae69): its text is the longest
   of the 6 ImageWithButton labels ("academy nominations"), and at mobile widths the flex
   row (text + the :after arrow icon) wraps to 2 lines, dropping the arrow below the navy
   bar instead of beside the text like the other 5 cards. Force single-line for this widget. */
.elementor-element-a6eae69 {
  flex-wrap: nowrap !important;
}

/* Minimal Bootstrap-grid shim -- needed the first time a raw-HTML widget (News page's
   Speeches static snapshot, session 5) used literal Bootstrap .row / .col-N / .p-N / .m-N classes
   assuming Bootstrap CSS would be available. This is a WP/Elementor site with no Bootstrap
   loaded at all (unlike live, which is Bootstrap-based) -- these classes were doing nothing,
   so the 3 speech cards rendered full-width stacked instead of a 3-column row. Standard
   Bootstrap 4 values, reusable for any future raw-HTML snippet using this same pattern
   (e.g. the Videos section's own static snapshot). */
.row { display: flex; flex-wrap: wrap; margin-right: -1rem; margin-left: -1rem; }
.col-12 { flex: 0 0 100%; max-width: 100%; position: relative; width: 100%; padding-right: 1rem; padding-left: 1rem; }
@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
}
.m-n2 { margin: -0.5rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }


/* --- Press Releases archive page rebuild (session 10) ---
   Replaces the stray loop-grid-of-boxes with live's real plain-list layout:
   PageHeader, FilterBar (real month/year/search via the site's own
   Capigacr Loop Filters widget + a small Collapse/Expand JS toggle for
   .ArticleBlock__excerpt), then a PageList of ArticleBlock rows. */
.PageHeader { margin-bottom: 2rem; }
.PageContent { padding-top: 3rem; padding-bottom: 3rem; }
.FilterBar { margin-bottom: 1.5rem; row-gap: 0.75rem; column-gap: 1rem; }
.PageList { margin-bottom: 2rem; }
.PageList__item { margin-top: 1.5rem; }
.ArticleBlock__excerpt { font-size: 16px; line-height: 1.4; gap: 0 !important; }
.ArticleBlock__moreLink { font-weight: bold; text-transform: uppercase; display: inline-block; margin-top: 0.5rem; }
/* BugHerd #67: less gap between excerpt text and Read More link on the
   archive list template (10366) -- the excerpt widget's trailing <p> carries
   the site's normal body-copy paragraph-spacing margin (~30px), which is
   fine mid-article but reads as too much air right before a short link.
   Zero it out for this specific block only. */
.ArticleBlock__excerpt p:last-child { margin-bottom: 0 !important; }
.ArticleTitle__link, .ArticleBlock__moreLink {
  width: auto !important;
}

/* Capigacr Loop Filters widget -- ships with no CSS of its own; port the
   site's InputSelect/InputText look onto its actual class names. */
.capigacr-meetings-filters { margin: 0; }
.capigacr-meetings-filters__inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.capigacr-meetings-filters__field {
  display: flex;
  flex-direction: column;
}
.capigacr-meetings-filters__label {
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #60676d;
  margin-bottom: 0.25rem;
}
.capigacr-meetings-filters__select,
.capigacr-meetings-filters__input {
  font-family: "Archivo", sans-serif !important;
  background-color: #fff !important;
  color: #12284c !important;
  border: 2px solid #dce1e4 !important;
  min-height: 40px !important;
  padding: 0 1em !important;
  font-size: 16px !important;
}
.capigacr-meetings-filters__input::placeholder {
  color: #60676d !important;
  opacity: 1 !important;
}
.capigacr-meetings-filters__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}


.SearchResults__summary {
  padding: .5rem 0;
  margin-bottom: 1rem;
  border-top: 1px solid #a3acaf;
  border-bottom: 1px solid #a3acaf;
  font-size: 18px;
  color: #333;
}


/* Press/News share buttons + prev-next nav restyle to match live (BugHerd #13) --
   live uses the same .Button.Button--sm base already ported here, with color modifiers.
   Scoped to .Button--pressShare / .ButtonWrapper--pagination so it only hits these widgets. */
.Button--pressShare .elementor-share-btn {
  background-color: var(--color-graylight) !important;
  color: var(--color-royal) !important;
  padding: 0 1em !important;
  min-height: 40px !important;
  height: 36px !important;
  border-radius: 4px;
  display: inline-flex !important;
}
.Button--pressShare .elementor-share-btn .fa-long-arrow-alt-right {
  display: none !important;
}
.Button--pressShare .elementor-share-btn_facebook {
  background-color: #4268b2 !important;
  color: #fff !important;
}
.Button--pressShare .elementor-share-btn_twitter {
  background-color: #2aa3ef !important;
  color: #fff !important;
}
.Button--pressShare .elementor-share-btn_facebook i,
.Button--pressShare .elementor-share-btn_twitter i {
  color: #fff !important;
}
.ButtonWrapper--pagination .elementor-post-navigation {
  background: none !important;
}
.ButtonWrapper--pagination .elementor-post-navigation__link a {
  background: none !important;
  color: var(--color-navy) !important;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 !important;
}
.ButtonWrapper--pagination .elementor-post-navigation__link a i {
  color: var(--color-red, #B3001B) !important;
}
.ButtonWrapper--pagination .elementor-post-navigation__link a:hover i {
  transform: scale(1.4);
}


/* Gravity Forms intro copy + select centering (BugHerd #6/#7) -- GF renders its own
   form-level Description with zero site typography (bare browser <p> styling); style it
   like the sites normal body copy. Also center the selected value text in GF <select>
   fields, matching the InputSelect components use of centered text elsewhere. */
.gform_description {
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}
/* BugHerd #37/#38 (Internships page, post 8127) -- ".gform_heading > p" copy and
   ".gfield_label"/legend field labels read "way too small" at 768/414. Root cause for
   the labels: the existing ".hentry form label" / ".hentry form legend" rules just above
   this file (session ~16, live-parity pass) size type in `em` (0.9em / 0.95em), which
   inherits from the site's global html{font-size:10px/16px/20px} responsive-root rule
   (<992px / 992-1199px / >=1200px) -- so both label rules collapse to 9px/9.5px below
   992px, which covers both reported widths (768 and 414) identically. The description
   copy (".gform_description") isn't affected by that root-scale bug (it's already a flat
   px value from the earlier #6/#7 fix), it's just subjectively too small on its own at
   these widths. Fix: extend the existing rules rather than add parallel ones -- pin each
   to its own true desktop-equivalent px value (0.9em/0.95em of the 20px desktop root =
   18px/19px) at max-width:991px, matching the root rule's own <992px boundary, and bump
   the description copy to 18px in the same breakpoint for readability parity with the
   now-fixed label size. Desktop (>=992px) is untouched since it wasn't reported broken. */
@media (max-width: 991px) {
  .gform_description {
    font-size: 18px !important;
  }
}
.gform_description p {
  margin: 0;
}
.gform_wrapper select.gfield_select {
  padding: 5px !important;
}


/* Parent-item selected state in header/footer navs (BugHerd #5) -- Elementor only
   auto-styles the exact current-page nav-menu-item (.elementor-item-active); WP core still
   adds current-page-ancestor/current-menu-parent to the <li> when were on a CHILD page, but
   Elementor never styles those. Reuse the same active color for both. */
li.current-page-ancestor > a.elementor-item,
li.current-menu-parent > a.elementor-item {
  color: var(--color-navy) !important;
}


/* Link hover -> red (BugHerd #8, Christian confirmed a deliberate 1:1 deviation --
   live actually uses navy/royal-blue on hover, this is an intentional change). */
.BodyContent a:hover,
.elementor-widget-text-editor a:hover {
  color: var(--color-red, #B3001B) !important;
  text-decoration-color: var(--color-red, #B3001B) !important;
}





/* Kill the redundant top gap between the Filter/Collapse row and the list on
   Press Releases/Op-Eds/Speeches -- .PageContent normally reserves 3rem top padding for
   regular pages, but these three already get proper spacing from the Filter row above them. */
.elementor-page-7991 .PageContent,
.elementor-page-8129 .PageContent,
.elementor-page-8130 .PageContent {
  padding-top: 0 !important;
}


/* Previous/Next label text was invisible (white-on-white) -- native widget default. */
.ButtonWrapper--pagination .post-navigation__prev--label,
.ButtonWrapper--pagination .elementor-post-navigation__link a,
.ButtonWrapper--pagination .elementor-post-navigation__link a span {
  color: var(--color-navy) !important;
}
/* Share button text was white-on-light-gray for Print/Email -- override the nested title span
   too since it carries its own color independent of the outer .elementor-share-btn. */
.Button--pressShare .elementor-share-btn__title,
.Button--pressShare .elementor-share-btn_print .elementor-share-btn__title,
.Button--pressShare .elementor-share-btn_email .elementor-share-btn__title {
  color: var(--color-royal) !important;
}
.Button--pressShare .elementor-share-btn_facebook .elementor-share-btn__title,
.Button--pressShare .elementor-share-btn_twitter .elementor-share-btn__title {
  color: #fff !important;
}
/* Match live wording + uppercase on all four share buttons. */
.Button--pressShare .elementor-share-btn__title {
  text-transform: uppercase;
  font-weight: bold;
}
.Button--pressShare .elementor-share-btn_facebook .elementor-share-btn__title,
.Button--pressShare .elementor-share-btn_twitter .elementor-share-btn__title {
  font-size: 0 !important;
}
.Button--pressShare .elementor-share-btn_facebook .elementor-share-btn__icon,
.Button--pressShare .elementor-share-btn_twitter .elementor-share-btn__icon {
  font-size: 15px !important;
}
.Button--pressShare .elementor-share-btn_facebook .elementor-share-btn__title:before {
  content: "Like";
  font-size: 14px !important;
}
.Button--pressShare .elementor-share-btn_twitter .elementor-share-btn__title:before {
  content: "Tweet";
  font-size: 14px !important;
}


/* Print/Email/Like/Tweet icon glyphs + hover colors to match live exactly (BugHerd #13
   follow-up). Live uses fa-thumbs-up for Like and the classic fa-twitter bird for Tweet,
   not the platform logo icons Elementor auto-generates for facebook/x-twitter networks. */
.Button--pressShare .elementor-share-btn_print .elementor-share-btn__icon i,
.Button--pressShare .elementor-share-btn_email .elementor-share-btn__icon i {
  color: var(--color-red, #B3001B) !important;
}


.Button--pressShare .elementor-share-btn_print:hover,
.Button--pressShare .elementor-share-btn_email:hover {
  background-color: #c7ced2 !important;
}
.Button--pressShare .elementor-share-btn_facebook:hover {
  background-color: #2d477a !important;
}
.Button--pressShare .elementor-share-btn_twitter:hover {
  background-color: #0e7abe !important;
}


/* Beat .header-nav .menu-item a !important (higher-specificity override for the
   parent-active-state fix, needed on real WP pages like Tour Requests where the base
   rule was still winning despite li.current-page-ancestor having higher specificity --
   safer to just out-specify it directly than debug further). */
.header-nav li.current-page-ancestor > a.elementor-item,
.header-nav li.current-menu-parent > a.elementor-item,
.FooterNav li.current-page-ancestor > a.elementor-item,
.FooterNav li.current-menu-parent > a.elementor-item {
  color: var(--color-navy) !important;
}


/* Videos page -- YouTube Feed Pro grid restyled to match the site's card/typography system.
   Not a 1:1 port target (live's Videos page is a bespoke Angular component with its own
   featured-video + Month/Year/Filter/Search bar) -- Christian confirmed the plugin's own
   grid/pagination/search is fine as-is, this just brings the visual language in line with
   the rest of the site instead of the plugin's generic default look. */
.sb_youtube .sby_item .sby_inner_item {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-graylight) !important;
}
.sb_youtube .sby_info.sby_info_item {
  padding: 1rem !important;
}
.sb_youtube .sby_video_title_wrap,
.sb_youtube .sby_video_title {
  font-family: var(--font-body), sans-serif !important;
  font-weight: bold !important;
  color: var(--color-navy) !important;
  line-height: 1.3 !important;
  font-size: 16px !important;
}
.sb_youtube .sby_meta,
.sb_youtube .sby_username,
.sb_youtube .sby_date {
  font-family: var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: var(--color-graytext) !important;
  font-size: 12px !important;
}
.sb_youtube .sby_footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
  flex-wrap: wrap;
}
.sb_youtube .sby_load_btn {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: var(--color-graylight) !important;
  color: var(--color-royal) !important;
  font-family: var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 1.5em !important;
  height: 45px !important;
  font-size: 16px !important;
  transition: background-color 100ms ease-in-out !important;
}
.sb_youtube .sby_load_btn:hover {
  background-color: var(--color-gray) !important;
}
.sb_youtube .sby_follow_btn a {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5em !important;
  background-color: var(--color-navy) !important;
  color: #fff !important;
  font-family: var(--font-heading), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 0 1.5em !important;
  height: 45px !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: background-color 100ms ease-in-out !important;
}
.sb_youtube .sby_follow_btn a:hover {
  background-color: var(--color-royal) !important;
}
.sb_youtube .sby_follow_btn svg {
  fill: #fff !important;
  width: 1.1em !important;
  height: 1.1em !important;
}


/* Videos grid -- equalize card sizes. The plugin lays cards out as inline-block with no
   row-height stretching, so a 2-line title makes that one card taller than its row
   neighbors (confirmed via getBoundingClientRect: identical-width cards measured 369.98px
   vs 349.19px tall in the same row, purely from title line-wrap count). Switching the wrap
   to flex + stretch equalizes every card in a row to the tallest one automatically (a
   wrapped flex line stretches its own items by default), and the nested flex column + auto
   margin on the meta line keeps the date/author pinned to the same bottom position
   regardless of title length. Width/gap set explicitly (not inherited from the plugin's own
   inline-block sizing) so the !important stretch override doesn't fight column count. */
.sb_youtube .sby_items_wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 20px !important;
}
.sb_youtube .sby_item {
  display: flex !important;
  box-sizing: border-box !important;
  width: calc(33.333% - 13.333px) !important;
  max-width: calc(33.333% - 13.333px) !important;
  margin: 0 !important;
}
@media (max-width: 991px) {
  .sb_youtube .sby_item { width: calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; }
}
@media (max-width: 478px) {
  .sb_youtube .sby_item { width: 100% !important; max-width: 100% !important; }
}
.sb_youtube .sby_inner_item {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
}
.sb_youtube .sby_info.sby_info_item,
.sb_youtube .sby-video-info-bottom,
.sb_youtube .sby-video-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}
.sb_youtube .sby_meta {
  margin-top: auto !important;
  padding-top: .5rem !important;
}


/* Videos page spacing tweaks (Christian's request, session 17).
   1) .PageContent reserves 3rem top+bottom padding by default (see the Press
   Releases/Op-Eds/Speeches exception above) -- on Videos that reads as too much
   dead space around a single-line title with a large featured video right below it.
   2) The featured video's thumbnail and its channel-bar/title info sit in the same
   .sby_player_outer_wrap with zero gap (confirmed via bounding rect: thumbnail
   bottom == .sby-player-info top) -- add breathing room there too. */
.elementor-page-8131 .PageContent {
  padding-top: 2rem !important;
  padding-bottom: 1.5rem !important;
}
.sb_youtube .sby-player-info {
  padding-top: 1rem !important;
}


.sb_youtube .sby_player_outer_wrap {
  margin-bottom: 2.5rem !important;
}


/* #24 (BugHerd) -- "filtering by month+year together comes up empty". Verified the combined
   filter query itself is correct (Oct 2024 = 10 real posts, confirmed via direct query) --
   the reported URL was page 2 of that filter (.../2/?...month=10&year=2024), which only has
   10 results total (fits on page 1), so page 2 is legitimately empty. Elementor's own
   "nothing found" message was already enabled and rendering correctly, just completely
   unstyled -- looked like a broken blank page rather than an intentional empty state.
   Applies to all 3 archive pages sharing template 8015 (Press Releases/Op-Eds/Speeches). */
.e-loop-nothing-found-message {
  padding: 3rem 0;
  text-align: center;
}
.e-loop-nothing-found-message__text {
  font-family: var(--font-body), sans-serif;
  font-size: 18px;
  color: var(--color-graytext);
}


/* #15 (BugHerd) -- "center button" pin on Load More. Root cause: .sby_load_btn carries
   the plugin's own margin:auto (meant to self-center it as a block-level element in the
   default non-flex footer layout) -- once .sby_footer was switched to display:flex
   (session 17, for the Button/Button--primary restyle), those auto margins absorb nearly
   all the row's free space and shove the sibling Subscribe button to the far right instead
   of both buttons sitting together in the center. Neutralize the auto margin now that the
   footer positions both buttons itself via justify-content:center. */
.sb_youtube .sby_footer .sby_load_btn {
  margin: 0 !important;
}


@media print {
  .Breadcrumbs { display: none !important; }
}

/* #47 (BugHerd) -- "these buttons are so teeny tiny" at 768/414 on the Press Release
   Single template's Previous/Next post-navigation widget (.ButtonWrapper--pagination,
   widget 7d268b1). Root cause: the site's global html{font-size:10px} responsive-root
   rule (session 7) applies below 992px, and Elementor Pro's own post-navigation widget
   CSS sizes the visible label purely in em (.8em) with no absolute override of its own --
   0.8 * 10px = 8px at any viewport under 992px, so both 768 and 414 are affected
   identically. The icon glyph is nested inside the same label span and has no font-size
   of its own either, so it shrinks along with the text. Desktop looked fine only by
   coincidence (0.8 * 16-20px root = 12.8-16px). Fix: give the label an explicit absolute
   font-size using the same 16px->20px fluid scale already established sitewide for
   .Button (matches live's real .Button/.Button--previousButton font-size -- the closest
   live analog to this native-WP-only widget, confirmed in live's common.css). */
.ButtonWrapper--pagination .post-navigation__prev--label,
.ButtonWrapper--pagination .post-navigation__next--label {
  font-size: 16px !important;
}
@media screen and (min-width: 320px) {
  .ButtonWrapper--pagination .post-navigation__prev--label,
  .ButtonWrapper--pagination .post-navigation__next--label {
    font-size: calc(16px + 4 * ((100vw - 320px) / 880)) !important;
  }
}
@media screen and (min-width: 1200px) {
  .ButtonWrapper--pagination .post-navigation__prev--label,
  .ButtonWrapper--pagination .post-navigation__next--label {
    font-size: 20px !important;
  }
}


/* #48/#49 (BugHerd) -- breadcrumbs, post date, and Source/Author citation line all
   "too small" at 768/414 on the Op-Ed Single template (8044; the same bug also affects
   the equivalent breadcrumb/date widgets on the Press Release Single template, 8031,
   which share the identical root cause -- fixed here too since both templates are the
   same session's scope). Root cause: same html{font-size:10px} root (session 7) -- all
   three of these are heading widgets with no explicit font-size of their own, so below
   992px they inherit straight down to a flat 10px (measured: Breadcrumbs "News | Op-Eds"
   10px, post date 10px, Source:/Author: line 10px -- all identical symptom). Fix: give
   each an explicit absolute font-size matching live's own real value for the equivalent
   element, confirmed directly against live's common.css --
     .Breadcrumbs__link  = flat 14px (live hides breadcrumbs below lg entirely; this site
                            deliberately keeps them visible on mobile per an earlier
                            session's decision, so only the size is ported, not the
                            visibility rule)
     .ArticleHeader__date = flat 16px, no fluid scale
     .ArticleMeta         = fluid 16px->22px (same numbers as the already-ported
                            .RawHTML body-copy scale -- coincidentally identical)
   Neither the date widget nor the Source/Author container had ANY css class before this
   fix (checked _elementor_data directly) -- added .ArticleHeader__date (widget-level
   _css_classes, on the post-date heading widget in both 8044 and 8031) and .ArticleMeta
   (container-level css_classes, on the Source/Author wrapper container 8b009fb in 8044
   only -- 8031 doesn't have this element) so these rules have something to hook onto.
   Both new class names are reused directly from live's own real BEM class names for the
   same elements, matching this file's established naming convention. Selectors target
   the descendant .elementor-heading-title, not a compound class, per the standard
   heading-widget wrapper-vs-inner-element gotcha (_css_classes lands on the outer
   .elementor-widget-heading wrapper, not the inner element carrying the visible text). */
.Breadcrumbs .elementor-heading-title {
  font-size: 14px !important;
}

/* .Breadcrumbs link weight/color -- BugHerd #56 ("why are they so small now?"). Root cause is
   NOT font-size -- .Breadcrumbs .elementor-heading-title{font-size:14px} above (from the
   earlier #48/#49 sub-992px sweep) is already byte-for-byte correct and matches live's real,
   non-responsive .Breadcrumbs__link{font-size:14px} exactly at every viewport (confirmed via
   Playwright computed-style at 1440/768/390px -- 14px in all three, no root-scaling-driven
   shrink at play here since this is a plain px value, not em/rem). The real bug: this site's
   breadcrumb widget only bolds the FINAL segment via a hand-written <b> tag in the widget's
   title HTML (e.g. "News | <b>Press Releases</b>") while live achieves uniform boldness on
   EVERY breadcrumb link via a single CSS rule (.Breadcrumbs__link{font-weight:bold}), with no
   markup-level distinction between segments. Before the #48/#49 fix this was invisible --
   both segments inherited a much larger unstyled ambient size, so the thin "News" segment
   still read fine. Once shrunk to the (correct) compact 14px, the same thin-vs-bold
   inconsistency became the dominant visual signal, reading as "broken"/undersized even
   though the actual font-size number was already right -- the generic sitewide global-link
   letter-spacing default (Elementor's own Kit-level default link typography, 1px, not scoped
   to breadcrumbs) compounds this by spacing the thin segment out further than live's real
   letter-spacing:normal. Fix: bold + navy + normal letter-spacing on every .Breadcrumbs link,
   not just the one already wrapped in <b> -- matches live's uniform treatment exactly
   (confirmed live's "News" and "Press Releases" links both compute to font-weight:700,
   color:#12284C on a real live press-release page). */
.Breadcrumbs .elementor-heading-title a {
  font-weight: bold !important;
  color: var(--color-navy) !important;
  letter-spacing: normal !important;
}
.ArticleHeader__date .elementor-heading-title {
  font-size: 16px !important;
}
.ArticleMeta .elementor-heading-title {
  font-size: 16px !important;
}
@media screen and (min-width: 320px) {
  .ArticleMeta .elementor-heading-title {
    font-size: calc(16px + 6 * ((100vw - 320px) / 880)) !important;
  }
}
@media screen and (min-width: 1200px) {
  .ArticleMeta .elementor-heading-title {
    font-size: 22px !important;
  }
}


/* Body-copy fix: .elementor-widget-theme-post-content p (Elementor's native post-content
   widget, used to render bare imported paragraphs on Press Release/similar single templates)
   had ZERO font-size of its own -- inherited the html{font-size:10px} responsive-root value
   below 992px (confirmed 10px on a real Press Release single at both 768/414 vs 20px desktop).
   Reuses the same 16px->22px fluid scale as .RawHTML/.ArticleMeta for consistency. Deliberately
   NOT !important: some posts (mainly Op-Eds) have a pre-existing Word-paste inline font-size
   style on their <p> tags (a known, deliberately-untouched content artifact per an earlier
   session) -- inline styles already win over this plain class rule with zero extra work, so
   posts with the artifact are correctly left alone, and posts without it (plain paragraphs)
   get fixed. */
.elementor-widget-theme-post-content p { font-size: 16px; margin-bottom: 1em !important; }
@media screen and (min-width: 320px) {
  .elementor-widget-theme-post-content p { font-size: calc(16px + 6 * ((100vw - 320px) / 880)); }
}
@media screen and (min-width: 1200px) {
  .elementor-widget-theme-post-content p { font-size: 22px; }
}

/* Gravity Forms "*" indicates required fields note had zero font-size of its own, same
   html{font-size:10px} root-inheritance bug (confirmed 10px on the Internships form at both
   768/414 vs 20px desktop). Gravity Forms own CSS uses var(--gf-local-font-size) etc at
   comparable specificity, so !important needed (same reasoning as the other GF fixes already
   in this file). */
.gform_required_legend { font-size: 16px !important; }
@media screen and (min-width: 320px) {
  .gform_required_legend { font-size: calc(16px + 6 * ((100vw - 320px) / 880)) !important; }
}
@media screen and (min-width: 1200px) {
  .gform_required_legend { font-size: 22px !important; }
}

/* Banner dead-space fix, sitewide (was scoped to About Tom only, page 7988 -- Christian
   flagged the same gap on Internships and confirmed it happens on most pages). Root cause:
   .Banner (250px min-height / responsive clamp) doesn't get filled by its child
   .elementor-element-0cf920a (Layout) / .elementor-element-24a6ee9 (Banner__image,
   the actual photo+heading container) -- neither has height:100%, so on any page where
   the Banner box ends up taller than the photo/heading content needs, the extra space is
   just blank instead of being filled by the gray/photo background. These are the SAME
   element ids on every page (shared Site Header, post 7987) so one sitewide rule covers
   all of them -- confirmed via Internships (132px content in a 250px box, same as the
   originally-fixed About Tom case). */
.elementor-element-24a6ee9 { height: 100% !important; }
.elementor-element-0cf920a { height: 100% !important; }

/* PressBlock grid 3-tier responsive scheme, matching live's real Bootstrap breakpoints
   (col-12 col-sm-6 col-md-4 / hero item col-12 col-sm-12 col-md-4) exactly -- confirmed
   from cotton.senate.gov's actual markup. Christian flagged 768px looking bad (title too
   big / summary cut off) on the News page, and asked for the same 3-tier scheme live uses:
     >=768px:degrees 3 equal columns (already correct via columns_tablet/tablet_extra:3, an
       earlier session's fix -- Elementor's own "tablet" breakpoint IS 768-1024, matches).
     576-767px: 2 columns, with the FIRST item of every group of 3 spanning full width (a
       repeating hero-then-2-small pattern, not just the very first card overall) -- matches
       live's per-row Bootstrap col-sm-12/col-sm-6 alternation exactly.
     <576px: 1 column, full width, stacked (matches live's col-12 default and this site's
       existing columns_mobile:1 setting -- just narrowing where that 1-column behavior
       actually starts, since Elementor's own "mobile" breakpoint is 767, not 576).
   576px isn't one of this site's active Elementor breakpoints (mobile/tablet/tablet_extra
   only), so this is a plain custom media query rather than an Elementor per-device control.
   div:nth-of-type (not :nth-child) deliberately used to skip Elementor's own injected
   per-item <style> tag as the first child without needing an offset. Applied to all 4
   PressBlock loop grids that share this card: News page's Press Releases/Op-Eds/Speeches
   sections (a1ac5d1/f25abce/f031d6b) only. Deliberately NOT applied to the Press
   Releases/Op-Eds/Speeches archive pages (widget 1687717n) -- confirmed that widget is a
   plain single-column list on both local and live (columns:1, no PressBlock grid there at
   all), so no hero/grid CSS belongs on it. */
@media screen and (min-width: 576px) and (max-width: 767px) {
  /* Grid items default to min-width:auto (their own min-content width), so 1fr tracks
     refuse to shrink below that and the whole grid overflows -- confirmed: grid measured
     640px-per-track / ~1290px total at a 700px viewport before this. Standard CSS Grid fix. */

  .elementor-element-a1ac5d1 .elementor-loop-container, .elementor-element-f25abce .elementor-loop-container, .elementor-element-f031d6b .elementor-loop-container { grid-template-columns: repeat(2, 1fr) !important; } .elementor-element-a1ac5d1 .elementor-loop-container > div, .elementor-element-f25abce .elementor-loop-container > div, .elementor-element-f031d6b .elementor-loop-container > div { min-width: 0 !important; }
  .elementor-element-a1ac5d1 .elementor-loop-container > div:nth-of-type(3n+1), .elementor-element-f25abce .elementor-loop-container > div:nth-of-type(3n+1), .elementor-element-f031d6b .elementor-loop-container > div:nth-of-type(3n+1):nth-of-type(3n+1) { grid-column: 1 / -1 !important; }
}
@media screen and (max-width: 575px) {
  .elementor-element-a1ac5d1 .elementor-loop-container, .elementor-element-f25abce .elementor-loop-container, .elementor-element-f031d6b .elementor-loop-container { grid-template-columns: 1fr !important; }
}

/* PressBlock hover polish, matching live exactly (Christian compared side-by-side):
   1) No underline on hover -- a sitewide generic `a:hover{text-decoration:underline}`
      rule was bleeding onto .PressBlock (confirmed: computed text-decoration-line was
      "underline" on the card itself even though live only ever changes background-color
      on hover, never underline). Explicit override, matching live's real
      `a.PressBlock:hover{background-color:#12284c}` (no text-decoration at all).
   2) Slow ~2s zoom-in on the featured card's photo on hover, matching live's real rule
      exactly: `.PressBlock__background{transition:2s cubic-bezier(0.1,0.36,0.45,1);
      transition-property:transform,box-shadow} a.PressBlock:hover .PressBlock__background
      {transform:scale3d(1.2,1.2,1)}`. Our card has no separate __background div (the photo
      is a plain Elementor "classic" background-image directly on .PressBlock--featured
      itself, so scaling the whole element would also scale the text) -- used a ::before
      pseudo-element with `background-image: inherit` (a real supported CSS technique --
      the inherit keyword forces a computed-value copy even for a non-inherited property)
      to duplicate just the photo layer, so it can scale independently while the text
      content stays fixed. Kept behind the content (z-index) and clipped by the card's
      existing overflow:hidden. */
a.PressBlock:hover,
a.PressBlock:focus {
  text-decoration: none !important;
}
.PressBlock--featured {
  position: relative;
}
.PressBlock--featured:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  z-index: 0;
  transition: transform 2s cubic-bezier(0.1, 0.36, 0.45, 1);
}
a.PressBlock--featured:hover:before {
  transform: scale(1.2);
}
.PressBlock--featured .PressBlock__content {
  position: relative;
  z-index: 1;
}

/* Kill the element's default Elementor transition (background 0.3s/border/box-shadow/
   transform) specifically for the parallax hero -- it was smoothing/lagging every
   scroll-driven background-position update instead of snapping instantly, most
   noticeable scrolling up fast (Christian caught the dark background briefly showing
   through while the image lagged behind). This container has no hover effect that
   needs a transition anyway. */
.HomeHero__layout { transition: none !important; }

/* .OfficeLocationsMap__col -- Contact + Home page Office Locations map column (container
   51af7cf on Contact/7989, 3211da8 on Home/7976). Elementor's own core CSS forces
   .elementor-widget-container to height:100% inside a container/e-con, which combined
   with height:auto on the SVG (aspect-ratio-driven, viewBox 0 -21 426 414) never correctly
   resolves back up through the intermediate .elementor-widget wrapper div once this
   container wraps to its own line under Elementor's max-width:767px mobile stacking --
   the wrapper divs collapse to a stale/undersized auto-height instead of the SVG's real
   (much taller, since it now spans the full stacked-column width) rendered height, and the
   map visibly overlaps the address block below it from ~480px-767px wide. Setting
   aspect-ratio directly on the flex-item container itself (matching the SVG's own
   width:height ratio) sidesteps the broken multi-level auto-height chain -- the container
   computes its own height directly from its own width instead of needing to measure
   nested descendants. Confirmed no regression at desktop 3-column widths (768px+). */
.OfficeLocationsMap__col {
  aspect-ratio: 426 / 435;
  height: auto;
}
.OfficeLocationsMap__col .elementor-widget-container,
.OfficeLocationsMap__col.elementor-element > .elementor-widget {
  height: 100%;
}


/* .ArticleMeta__sourceAnchor -- BugHerd #53. Op-Ed Single template (8044, widget af96366)
   Source: line links to the original publisher (acf-url dynamic tag, news_source_url field)
   but rendered with zero link styling -- plain body-copy gray, no underline, indistinguishable
   from static text. Rest-state ported from live's real values (navy #12284C w/ underline).
   Hover state corrected to match this site's own established red-hover convention instead
   (BugHerd #8, .BodyContent a:hover/.elementor-widget-text-editor a:hover -- a deliberate,
   Christian-confirmed 1:1 deviation from live's real navy/royal-blue hover) -- this is the
   same "Source:" citation-line link family as .RawHTML body links, so it should follow the
   same site-wide hover convention rather than live's real (pre-deviation) hover color.
   _css_classes on a heading widget lands on the OUTER wrapper div, not the inner <a>, hence
   the descendant .elementor-kit-8011. */
.ArticleMeta__sourceAnchor a {
  color: #12284C !important;
  text-decoration: underline !important;
  text-decoration-color: #142D56 !important;
  font-weight: 500;
}
.ArticleMeta__sourceAnchor a:hover {
  color: var(--color-red, #B3001B) !important;
  text-decoration-color: var(--color-red, #B3001B) !important;
}


/* Banner photos hidden on mobile, site-wide -- BugHerd #54. Christian's call: rather than
   re-cropping every banner photo for narrow/tall mobile aspect ratios (cover-cropping a
   wide desktop photo at 400px-tall-ish tends to cut off the actual subject -- confirmed on
   Internships, Tom + intern pushed to the bottom-right, background wall dominating), just
   drop back to the existing plain-gray-box + heading look every no-photo page already uses
   below 768px. Deliberate deviation from live (which never hides banner photos at any width --
   confirmed no @media touches .Banner in common.css), same category of decision as the
   readability-gradient addition. Covers both the background-image itself and the has-photo
   gradient overlay so nothing is fighting under it once the photo is gone. */
@media (max-width: 768px) {
  .Banner__image {
    background-image: none !important;
  }
  .Banner__image.has-photo:after {
    content: none !important;
  }
  /* Banner heading defaults to a light color (widget 09be298's own title_color: #F1EFE4,
     assuming a dark photo behind it) -- with the photo now hidden at this width, force the
     same navy used by the known-no-photo-page exception (About Tom, page-id-7988) so the
     heading stays legible against the plain gray box. */
  .elementor-element-142cbf9 .elementor-heading-title,
  .elementor-element-09be298 .elementor-heading-title {
    color: var(--color-navy) !important;
  }
}


/* Filter/Collapse button icons -- BugHerd #58. Both icons were inheriting the button's own
   navy text color; live's real value (checked via computed style) is the site's red accent
   #B3001B on both .fa-filter and .fa-list, independent of the button text color. Descendant
   .elementor-kit-8011 reaches the icon regardless of the .elementor-button-wrapper/.elementor-button
   nesting in between -- color inherits down through wrapper divs either way, no wrapper-vs-
   inner-element gotcha to work around here since we are not targeting a compound class. */
.Button .fa-filter,
.Button .fa-list {
  color: #B3001B;
}


/* .Banner__image background-size/position -- BugHerd #63. Flag Requests page (post 8126,
   ACF banner_image attachment 8500, iStock-1148031281.jpg). Root cause is NOT page-specific
   composition -- confirmed the container's per-page inline rule (Elementor dynamic-tag
   background-image, printed per-post since 24a6ee9 is the shared Site Header's photo
   container, header 7987) sets background-image only, with zero background-size/position/
   repeat anywhere -- browser defaults apply: size:auto (native 1370x400px), position:0% 0%,
   repeat:repeat. Every banner photo on the site is pre-cropped to the exact same 1370x400px,
   just ~20px narrower than the ~1390px boxed Banner__image container at most desktop widths,
   so EVERY page has this same ~20px repeat-tile sliver of the image's own left edge peeking
   in at the container's right edge -- just invisible on busy photos (Casework, News, etc.)
   and glaringly obvious here because a hard capitol-dome-vs-flat-blue-sky edge sits right at
   the seam. Scoped to this one page only (per Christian's call, not a Kit-wide .Banner__image
   change) even though the underlying defaults-gap is sitewide, to avoid touching banners
   confirmed fine elsewhere. Values match live's real Flag Requests banner exactly (confirmed
   via live's own inline style: background-size:cover, background-position:67% center --
   the 67% shifts the visible crop right, toward the flag, cropping a bit of the dome's left
   edge instead of the flagpole/flag on the right). */
body.page-id-8126 .Banner__image {
  background-size: cover !important;
  background-position: 67% center !important;
  background-repeat: no-repeat !important;
}


/* Home page "Latest Press" -- BugHerd #60/#61 (768px only): the two non-featured
   PressBlock cards (widget 773e76c4, loop-item template 8017) overflowed/clipped at
   the top and broke titles mid-word specifically at the 768px tablet breakpoint.
   Two independent root causes, both scoped narrowly to avoid touching the
   already-correct 414px (2:1) and desktop/1025px+ (square) behavior:

   1. .PressBlock:not(.PressBlock--featured) forces aspect-ratio:1 (a hard square,
      overflow:hidden) from min-width:768px onward. At 768px the 2-column sub-grid next
      to the featured photo squeezes these cards to ~164px square -- too short to fit
      the title text, which (since the box is PressBlock--alignEnd, content anchored to
      the BOTTOM) overflows upward and gets clipped by overflow:hidden, cropping the top
      of the title (#60). Confirmed against live: live's real card at 768px is NOT
      square at all (179.5x262, taller than wide) -- it only becomes square again at
      desktop widths (matches viewport_lg:1025 (>=1025px = the site's own "desktop"
      breakpoint, above the "tablet"/"tablet_extra" range) where the wider column gives
      the same text enough room to fit inside a square. Confirmed via Playwright at
      768/900/1024/1030/1440: overriding to content-driven auto/height:100% (the same
      technique already used for the News-page cards, template 8513) removes all
      overflow across 768-1024 with zero visible change at 1030+ or below 768. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .elementor-8017 .PressBlock,
  .elementor-8017.PressBlock { aspect-ratio: auto !important; height: 100% !important; }
}

/* 2. Elementor Pro's own widget-loop-common.min.css ships a blanket
      ".e-loop-item * { word-break: break-word }" default on every loop-item's
      descendants (a defensive rule for unpredictable dynamic content) -- combined with
      the narrow ~134px title column at 768px, this forced a real word (e.g.
      "Infrastructure") to split mid-word instead of wrapping at the space before it
      (#61). Live's real CSS never sets word-break/overflow-wrap on .PressBlock__title
      at all -- confirmed live wraps at word boundaries only, at every width checked
      (414/768/1440). Overriding back to normal matches live exactly and is safe
      sitewide (not just at 768px) since live never relies on mid-word breaking here. */
.PressBlock__title,
.PressBlock__title .elementor-heading-title {
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Follow-up: the rule above alone doesn't reach the actual text -- Elementor's own core
   CSS (.e-loop-item * { word-break: break-word }, widget-loop-common.min.css) targets the
   inner .elementor-heading-title span DIRECTLY, and a direct match on an element always
   wins over an inherited value from an ancestor regardless of !important on the ancestor
   rule. Added the descendant .elementor-kit-8011 so word-break:normal is set directly on the span
   Elementor's own rule is also directly targeting -- confirmed via computed-style re-check
   that .e-loop-item * was the actual winning rule before this fix. */


/* Home page "Help for Arkansans" icon row (container 115e48f) -- BugHerd #62 (414px
   only). Each icon widget (.IconBoxLink) uses _flex_size:none (content/max-content
   width, session 16's BugHerd #1 fix) so labels never shrink/wrap mid-word -- correct
   at wider widths, but at 414px it produces an uneven 1-2-2-1 row pattern ("Constituent
   Services" alone, then 2 pairs, then "Academy Nominations" alone) since flex-wrap
   packs items left-to-right by natural width rather than balancing pairs. Live's real
   markup (col-12 col-sm-6 col-md-4 col-lg-auto) is a Bootstrap column, not
   content-driven, at any width below "lg" (>=992px) -- below Bootstrap's own "sm"
   breakpoint (576px, which covers our 414px test width) it's col-12: ALL SIX icons
   stack full-width, one per row, no pairing at all. Confirmed against live at 414px
   (Playwright: 6 items, identical x, stacked full-width). Ported that one breakpoint
   only -- 576px+ (2/3-per-row, then content-driven at 1025px+) is unchanged/out of
   scope for this ticket. Specificity note: Elementor's own per-page generated rule
   (.elementor-7976 .elementor-element.elementor-element-<id>{width:auto!important;
   flex:0 0 auto!important}) is 3 classes deep -- a plain ".IconBoxLink{...}" Kit rule
   loses that specificity fight even with !important (same family of issue as the
   Kit-vs-page-CSS cascade gotcha). Repeating the class 4x is the same
   specificity-inflation trick already used for the nav dropdown padding fix earlier in
   this file, cheaper than enumerating all 6 widget ids by hand. */
@media screen and (max-width: 575px) {
  .IconBoxLink.IconBoxLink.IconBoxLink.IconBoxLink {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}/* End custom CSS */