/* -------------------------------------------------
   SITEWIDE - JONESPORTAMERICA.COM
   ------------------------------------------------- */

/*////// GLOBAL RESETS #1 - SITE SPECIFIC \\\\\\\\*/
:root {color-scheme: light;} /* so UAs style form controls/scrollbars correctly */
*, *::before, *::after {box-sizing: border-box;}
* {margin:0; padding:0;}
html {/* W3C lag */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; word-break: normal; overflow-wrap: break-word; scrollbar-gutter: stable; /* prevents layout shift */}
@supports (text-wrap: pretty) {html {text-wrap: pretty;}}
body {min-height: 100vh; /* fallback */ min-height: 100svh; /* stable viewport unit */ background-color: #fff;}
img, picture, video, canvas, svg {display: block; max-width: 100%; height: auto;}
ul[role="list"], ol[role="list"] {list-style: none;}
:where(ul[role="list"], ol[role="list"]) {list-style: none;}
textarea {resize: vertical;}
fieldset {border: none;}
button, input, select, textarea {font: inherit; color: inherit;}
button, [type="button"], [type="submit"], [role="button"] {cursor: pointer;}
legend {padding: 0;}
:focus-visible {outline: 2px solid currentColor; outline-offset: 2px;}
:focus:not(:focus-visible) {outline: none;}
/* Long-string resilience (modern browsers get nicer value) */
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption) {overflow-wrap: anywhere;}

/*////// FONTS \\\\\\\\*/
@font-face{font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/_fonts/open-sans/open-sans-v44-latin-regular.woff2") format("woff2");
}
@font-face{font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/_fonts/open-sans/open-sans-v44-latin-italic.woff2") format("woff2");
}
@font-face{font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/_fonts/open-sans/open-sans-v44-latin-600.woff2") format("woff2");
}
@font-face{font-family: "Open Sans"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/_fonts/open-sans/open-sans-v44-latin-600italic.woff2") format("woff2");
}

body {font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 400; font-style: normal; -webkit-text-size-adjust: 100%;}

/*////// GLOBAL RESETS #2 - SITE SPECIFIC \\\\\\\\*/
html {scroll-behavior: smooth; }
body {position: relative; background: #ededed; color: #3c3c3b; line-height:1.125;}
h1, h2, h3, h4, h5 {color: #165d83; line-height: 1.25; }
h1 {letter-spacing: clamp(-0.05em, calc((1em - 1rem) / -10), 0em);}
h1 span {letter-spacing: normal;}
h1.clr-bl, h2.clr-bl, h3.clr-bl, h4.clr-bl, h5.clr-bl {color: #2599d6;}
h1.clr-blk, h2.clr-blk, h3.clr-blk, h4.clr-blk, h5.clr-blk {color: #3c3c3b;}
p {line-height: 1.625;}
ul, ol {line-height: 1.375;}
ul.ul-nobl, ul.ul-nobl ul {list-style-type: none;}
a {color: inherit; text-decoration: underline; text-decoration-skip-ink: all;}
a:hover {text-decoration: none;}
a.a-udl-n {text-decoration: none;}
a.a-udl-y {text-decoration: underline;}
a.a-udl-n:hover {text-decoration: underline;}
a.a-udl-y:hover {text-decoration: none;}
.bld-y, strong, b {font-weight: 600;}
.bld-n {font-weight: 400;}
.it-y, em, i {font-style: italic;}
.it-n {font-style: normal;}

/* POSITION, CLEAR, HIDE, SCALE */
.rltv {position:relative;}
.scalable {width: auto; height: auto; max-width: 100% !important;}
.clearfix:after, .clearfix:before {content: " "; display: table;}
.clearfix:after {clear: both !important;}
.hdn {display: none !important;}
.scalable {width: auto; height: auto; max-width: 100% !important;}
.wrapno {white-space: nowrap;}
.bal {text-wrap: balance;}
.ctr {text-align: center;}
.blck {display: block;}
.blck-inl {display: inline-block;}

/* TYPOGRAPHY */
.fnt-14 {font-size: .875em;} /* 14px */
.fnt-16 {font-size: 1em;} /* 16px */
.fnt-17 {font-size: 1.0625em;}
.fnt-18 {font-size: 1.125em;}
.fnt-19 {font-size: 1.1875em;}
.fnt-20 {font-size: 1.25em;}
.fnt-21 {font-size: 1.3125em;}
.fnt-22 {font-size: 1.375em;}
.fnt-23 {font-size: 1.4375em;}
.fnt-24 {font-size: 1.5em;}
.fnt-25 {font-size: 1.5625em;}
.fnt-26 {font-size: 1.625em;}
.fnt-27 {font-size: 1.6875em;}
.fnt-28 {font-size: 1.75em;}
.fnt-29 {font-size: 1.8125em;}
.fnt-30 {font-size: 1.875em;}
.fnt-31 {font-size: 1.9375em;}
.fnt-32 {font-size: 2em;}
.fnt-33 {font-size: 2.0625em;}
.fnt-34 {font-size: 2.125em;}
.fnt-35 {font-size: 2.1875em;}
.fnt-36 {font-size: 2.25em;}
.fnt-37 {font-size: 2.3125em;}
.fnt-38 {font-size: 2.375em;}
.fnt-39 {font-size: 2.4375em;}
.fnt-40 {font-size: 2.5em;}

/* RESIZING */
.sz-40 {font-size: 40%;}
.sz-45 {font-size: 45%;}
.sz-50 {font-size: 50%;}
.sz-55 {font-size: 55%;}
.sz-60 {font-size: 60%;}
.sz-65 {font-size: 65%;}
.sz-70 {font-size: 70%;}
.sz-75 {font-size: 75%;}
.sz-80 {font-size: 80%;}
.sz-85 {font-size: 85%;}
.sz-90 {font-size: 90%;}
.sz-110 {font-size: 110%;}

/* LINE HEIGHTS */
.lne-100 {line-height: 1;}
.lne-1125 {line-height: 1.125;}
.lne-125 {line-height: 1.25;}
.lne-150 {line-height: 1.5;}
.lne-175 {line-height: 1.75;}
.lne-200 {line-height: 2;}

/* MARGINS */
.mar-lr-auto {margin-left: auto; margin-right: auto;}

.mar-top--01 {margin-top: -1em;}

.mar-top-00 {margin-top: 0em;}
.mar-rgt-00 {margin-right: 0em;}
.mar-btm-00 {margin-bottom: 0em;}
.mar-lft-00 {margin-left: 0em;}
.mar-tb-00 {margin-top: 0em; margin-bottom: 0em;}
.mar-lr-00 {margin-left: 0em; margin-right: 0em;}
.mar-all-00 {margin: 0em;}

.mar-top-025 {margin-top: 0.25em;}
.mar-rgt-025 {margin-right: 0.25em;}
.mar-btm-025 {margin-bottom: 0.25em;}
.mar-lft-025 {margin-left: 0.25em;}
.mar-tb-025 {margin-top: 0.25em; margin-bottom: 0.25em;}
.mar-lr-025 {margin-left: 0.25em; margin-right: 0.25em;}
.mar-all-025 {margin: 0.25em;}

.mar-top-050 {margin-top: 0.5em;}
.mar-rgt-050 {margin-right: 0.5em;}
.mar-btm-050 {margin-bottom: 0.5em;}
.mar-lft-050 {margin-left: 0.5em;}
.mar-tb-050 {margin-top: 0.5em; margin-bottom: 0.5em;}
.mar-lr-050 {margin-left: 0.5em; margin-right: 0.5em;}
.mar-all-050 {margin: 0.5em;}

.mar-top-075 {margin-top: 0.75em;}
.mar-rgt-075 {margin-right: 0.75em;}
.mar-btm-075 {margin-bottom: 0.75em;}
.mar-lft-075 {margin-left: 0.75em;}
.mar-tb-075 {margin-top: 0.75em; margin-bottom: 0.75em;}
.mar-lr-075 {margin-left: 0.75em; margin-right: 0.75em;}
.mar-all-075 {margin: 0.75em;}

.mar-top-100 {margin-top: 1em;}
.mar-rgt-100 {margin-right: 1em;}
.mar-btm-100 {margin-bottom: 1em;}
.mar-lft-100 {margin-left: 1em;}
.mar-tb-100 {margin-top: 1em; margin-bottom: 1em;}
.mar-lr-100 {margin-left: 1em; margin-right: 1em;}
.mar-all-100 {margin: 1em;}

.mar-top-110 {margin-top: 1.1em;}
.mar-rgt-110 {margin-right: 1.1em;}
.mar-btm-110 {margin-bottom: 1.1em;}
.mar-lft-110 {margin-left: 1.1em;}
.mar-tb-110 {margin-top: 1.1em; margin-bottom: 1.1em;}
.mar-lr-110 {margin-left: 1.1em; margin-right: 1.1em;}
.mar-all-110 {margin: 1.1em;}

.mar-top-125 {margin-top: 1.25em;}
.mar-rgt-125 {margin-right: 1.25em;}
.mar-btm-125 {margin-bottom: 1.25em;}
.mar-lft-125 {margin-left: 1.25em;}
.mar-tb-125 {margin-top: 1.25em; margin-bottom: 1.25em;}
.mar-lr-125 {margin-left: 1.25em; margin-right: 1.25em;}
.mar-all-125 {margin: 1.25em;}

.mar-top-150 {margin-top: 1.5em;}
.mar-rgt-150 {margin-right: 1.5em;}
.mar-btm-150 {margin-bottom: 1.5em;}
.mar-lft-150 {margin-left: 1.5em;}
.mar-tb-150 {margin-top: 1.5em; margin-bottom: 1.5em;}
.mar-lr-150 {margin-left: 1.5em; margin-right: 1.5em;}
.mar-all-150 {margin: 1.5em;}

.mar-top-175 {margin-top: 1.75em;}
.mar-rgt-175 {margin-right: 1.75em;}
.mar-btm-175 {margin-bottom: 1.75em;}
.mar-lft-175 {margin-left: 1.75em;}
.mar-tb-175 {margin-top: 1.75em; margin-bottom: 1.75em;}
.mar-lr-175 {margin-left: 1.75em; margin-right: 1.75em;}
.mar-all-175 {margin: 1.75em;}

.mar-top-200 {margin-top: 2em;}
.mar-rgt-200 {margin-right: 2em;}
.mar-btm-200 {margin-bottom: 2em;}
.mar-lft-200 {margin-left: 2em;}
.mar-tb-200 {margin-top: 2em; margin-bottom: 2em;}
.mar-lr-200 {margin-left: 2em; margin-right: 2em;}
.mar-all-200 {margin: 2em;}

.mar-top-225 {margin-top: 2.25em;}
.mar-rgt-225 {margin-right: 2.25em;}
.mar-btm-225 {margin-bottom: 2.25em;}
.mar-lft-225 {margin-left: 2.25em;}
.mar-tb-225 {margin-top: 2.25em; margin-bottom: 2.25em;}
.mar-lr-225 {margin-left: 2.25em; margin-right: 2.25em;}
.mar-all-225 {margin: 2.25em;}

.mar-top-250 {margin-top: 2.5em;}
.mar-rgt-250 {margin-right: 2.5em;}
.mar-btm-250 {margin-bottom: 2.5em;}
.mar-lft-250 {margin-left: 2.5em;}
.mar-tb-250 {margin-top: 2.5em; margin-bottom: 2.5em;}
.mar-lr-250 {margin-left: 2.5em; margin-right: 2.5em;}
.mar-all-250 {margin: 2.5em;}

.mar-top-300 {margin-top: 3em;}
.mar-rgt-300 {margin-right: 3em;}
.mar-btm-300 {margin-bottom: 3em;}
.mar-lft-300 {margin-left: 3em;}
.mar-tb-300 {margin-top: 3em; margin-bottom: 3em;}
.mar-lr-300 {margin-left: 2.5em; margin-right: 3em;}
.mar-all-300 {margin: 3em;}


/* PADDING */
.pad-top-00 {padding-top: 0.0em;}
.pad-rgt-00 {padding-right: 0.0em;}
.pad-btm-00 {padding-bottom: 0.0em;}
.pad-lft-00 {padding-left: 0.0em;}
.pad-tb-00 {padding-top: 0.0em; padding-bottom: 0.0em;}
.pad-lr-00 {padding-left: 0.0em; padding-right: 0.0em;}
.pad-all-00 {padding: 0.0em;}

.pad-top-01 {padding-top: 0.1em;}
.pad-rgt-01 {padding-right: 0.1em;}
.pad-btm-01 {padding-bottom: 0.1em;}
.pad-lft-01 {padding-left: 0.1em;}
.pad-tb-01 {padding-top: 0.1em; padding-bottom: 0.1em;}
.pad-lr-01 {padding-left: 0.1em; padding-right: 0.1em;}
.pad-all-01 {padding: 0.1em;}

.pad-top-02 {padding-top: 0.2em;}
.pad-rgt-02 {padding-right: 0.2em;}
.pad-btm-02 {padding-bottom: 0.2em;}
.pad-tb-02 {padding-top: 0.2em; padding-bottom: 0.2em;}
.pad-lr-02 {padding-left: 0.2em; padding-right: 0.2em;}
.pad-all-02 {padding: 0.2em;}

.pad-top-03 {padding-top: 0.3em;}
.pad-rgt-03 {padding-right: 0.3em;}
.pad-btm-03 {padding-bottom: 0.3em;}
.pad-lft-03 {padding-left: 0.3em;}
.pad-tb-03 {padding-top: 0.3em; padding-bottom: 0.3em;}
.pad-lr-03 {padding-left: 0.3em; padding-right: 0.3em;}
.pad-all-03 {padding: 0.3em;}
.pad-lft-02 {padding-left: 0.2em;}

.pad-top-04 {padding-top: 0.4em;}
.pad-rgt-04 {padding-right: 0.4em;}
.pad-btm-04 {padding-bottom: 0.4em;}
.pad-lft-04 {padding-left: 0.4em;}
.pad-tb-04 {padding-top: 0.4em; padding-bottom: 0.4em;}
.pad-lr-04 {padding-left: 0.4em; padding-right: 0.4em;}
.pad-all-04 {padding: 0.4em;}

.pad-top-05 {padding-top: 0.5em;}
.pad-rgt-05 {padding-right: 0.5em;}
.pad-btm-05 {padding-bottom: 0.5em;}
.pad-lft-05 {padding-left: 0.5em;}
.pad-tb-05 {padding-top: 0.5em; padding-bottom: 0.5em;}
.pad-lr-05 {padding-left: 0.5em; padding-right: 0.5em;}
.pad-all-05 {padding: 0.5em;}

.pad-top-06 {padding-top: 0.6em;}
.pad-rgt-06 {padding-right: 0.6em;}
.pad-btm-06 {padding-bottom: 0.6em;}
.pad-lft-06 {padding-left: 0.6em;}
.pad-tb-06 {padding-top: 0.6em; padding-bottom: 0.6em;}
.pad-lr-06 {padding-left: 0.6em; padding-right: 0.6em;}
.pad-all-06 {padding: 0.6em;}

.pad-top-07 {padding-top: 0.7em;}
.pad-rgt-07 {padding-right: 0.7em;}
.pad-btm-07 {padding-bottom: 0.7em;}
.pad-lft-07 {padding-left: 0.7em;}
.pad-tb-07 {padding-top: 0.7em; padding-bottom: 0.7em;}
.pad-lr-07 {padding-left: 0.7em; padding-right: 0.7em;}
.pad-all-07 {padding: 0.7em;}

.pad-top-08 {padding-top: 0.8em;}
.pad-rgt-08 {padding-right: 0.8em;}
.pad-btm-08 {padding-bottom: 0.8em;}
.pad-lft-08 {padding-left: 0.8em;}
.pad-tb-08 {padding-top: 0.8em; padding-bottom: 0.8em;}
.pad-lr-08 {padding-left: 0.8em; padding-right: 0.8em;}
.pad-all-08 {padding: 0.8em;}

.pad-top-09 {padding-top: 0.9em;}
.pad-rgt-09 {padding-right: 0.9em;}
.pad-btm-09 {padding-bottom: 0.9em;}
.pad-lft-09 {padding-left: 0.9em;}
.pad-tb-09 {padding-top: 0.9em; padding-bottom: 0.9em;}
.pad-lr-09 {padding-left: 0.9em; padding-right: 0.9em;}
.pad-all-09 {padding: 0.9em;}
.pad-top-9 {padding-top: 0.9em;}

.pad-top-10 {padding-top: 1.0em;}
.pad-rgt-10 {padding-right: 1.0em;}
.pad-btm-10 {padding-bottom: 1.0em;}
.pad-lft-10 {padding-left: 1.0em;}
.pad-tb-10 {padding-top: 1.0em; padding-bottom: 1.0em;}
.pad-lr-10 {padding-left: 1.0em; padding-right: 1.0em;}
.pad-all-10 {padding: 1.0em;}

.pad-top-11 {padding-top: 1.1em;}
.pad-rgt-11 {padding-right: 1.1em;}
.pad-btm-11 {padding-bottom: 1.1em;}
.pad-lft-11 {padding-left: 1.1em;}
.pad-tb-11 {padding-top: 1.1em; padding-bottom: 1.1em;}
.pad-lr-11 {padding-left: 1.1em; padding-right: 1.1em;}
.pad-all-11 {padding: 1.1em;}

.pad-top-12 {padding-top: 1.2em;}
.pad-rgt-12 {padding-right: 1.2em;}
.pad-btm-12 {padding-bottom: 1.2em;}
.pad-lft-12 {padding-left: 1.2em;}
.pad-tb-12 {padding-top: 1.2em; padding-bottom: 1.2em;}
.pad-lr-12 {padding-left: 1.2em; padding-right: 1.2em;}
.pad-all-12 {padding: 1.2em;}

.pad-top-13 {padding-top: 1.3em;}
.pad-rgt-13 {padding-right: 1.3em;}
.pad-btm-13 {padding-bottom: 1.3em;}
.pad-lft-13 {padding-left: 1.3em;}
.pad-tb-13 {padding-top: 1.3em; padding-bottom: 1.3em;}
.pad-lr-13 {padding-left: 1.3em; padding-right: 1.3em;}
.pad-all-13 {padding: 1.3em;}

.pad-top-14 {padding-top: 1.4em;}
.pad-rgt-14 {padding-right: 1.4em;}
.pad-btm-14 {padding-bottom: 1.4em;}
.pad-lft-14 {padding-left: 1.4em;}
.pad-tb-14 {padding-top: 1.4em; padding-bottom: 1.4em;}
.pad-lr-14 {padding-left: 1.4em; padding-right: 1.4em;}
.pad-all-14 {padding: 1.4em;}

.pad-top-15 {padding-top: 1.5em;}
.pad-rgt-15 {padding-right: 1.5em;}
.pad-btm-15 {padding-bottom: 1.5em;}
.pad-lft-15 {padding-left: 1.5em;}
.pad-tb-15 {padding-top: 1.5em; padding-bottom: 1.5em;}
.pad-lr-15 {padding-left: 1.5em; padding-right: 1.5em;}
.pad-all-15 {padding: 1.5em;}

.pad-top-16 {padding-top: 1.6em;}
.pad-rgt-16 {padding-right: 1.6em;}
.pad-btm-16 {padding-bottom: 1.6em;}
.pad-lft-16 {padding-left: 1.6em;}
.pad-tb-16 {padding-top: 1.6em; padding-bottom: 1.6em;}
.pad-lr-16 {padding-left: 1.6em; padding-right: 1.6em;}
.pad-all-16 {padding: 1.6em;}

.pad-top-17 {padding-top: 1.7em;}
.pad-rgt-17 {padding-right: 1.7em;}
.pad-btm-17 {padding-bottom: 1.7em;}
.pad-lft-17 {padding-left: 1.7em;}
.pad-tb-17 {padding-top: 1.7em; padding-bottom: 1.7em;}
.pad-lr-17 {padding-left: 1.7em; padding-right: 1.7em;}
.pad-all-17 {padding: 1.7em;}

.pad-top-18 {padding-top: 1.8em;}
.pad-rgt-18 {padding-right: 1.8em;}
.pad-btm-18 {padding-bottom: 1.8em;}
.pad-lft-18 {padding-left: 1.8em;}
.pad-tb-18 {padding-top: 1.8em; padding-bottom: 1.8em;}
.pad-lr-18 {padding-left: 1.8em; padding-right: 1.8em;}
.pad-all-18 {padding: 1.8em;}

.pad-top-19 {padding-top: 1.9em;}
.pad-rgt-19 {padding-right: 1.9em;}
.pad-btm-19 {padding-bottom: 1.9em;}
.pad-lft-19 {padding-left: 1.9em;}
.pad-tb-19 {padding-top: 1.9em; padding-bottom: 1.9em;}
.pad-lr-19 {padding-left: 1.9em; padding-right: 1.9em;}
.pad-all-19 {padding: 1.9em;}

.pad-top-20 {padding-top: 2.0em;}
.pad-rgt-20 {padding-right: 2.0em;}
.pad-btm-20 {padding-bottom: 2.0em;}
.pad-lft-20 {padding-left: 2.0em;}
.pad-tb-20 {padding-top: 2.0em; padding-bottom: 2.0em;}
.pad-lr-20 {padding-left: 2.0em; padding-right: 2.0em;}
.pad-all-20 {padding: 2.0em;}

.pad-top-30 {padding-top: 3.0em;}
.pad-rgt-30 {padding-right: 3.0em;}
.pad-btm-30 {padding-bottom: 3.0em;}
.pad-lft-30 {padding-left: 3.0em;}
.pad-tb-30 {padding-top: 3.0em; padding-bottom: 3.0em;}
.pad-lr-30 {padding-left: 3.0em; padding-right: 3.0em;}
.pad-all-30 {padding: 3.0em;}


/* ALIGN */
.left {text-align: left; }
.rgt {text-align: right; }
.ctr {text-align: center; }

/* WRAP & BREAK */
.nowrap {white-space: nowrap; }
.wrap {white-space: normal; }
.brk-wrd {overflow-wrap: break-word; } /* prevent overflow */
.brk-any {overflow-wrap: anywhere; } /* more aggressive wrapping */
.brk-all {word-break: break-all; } /* last resort for unspaced strings */

/* COLOR */
.clr-wht {color: #fff;}
.clr-gry-md {color: #666;}
.clr-blu {color: #165d83;}
.clr-std {color: #3c3c3b;}
.clr-red {color: #e30614;}
.clr-red-dk {color: #ac0a15;}
.clr-gld {color: #ffd43b;}

.bkgd-clr-wht {background: #fff;}
.bkgd-clr-blue-light {background: rgba(201,233,251,1);}
section.bkgd-clr-blue-light2 {background: rgba(201,233,251,.8);}
section.bkgd-clr-blue-light {background: rgba(201,233,251,1);}

/* CUSTOM LINKS */
/* headline link: subtle underline by default + soft wash on hover/focus */
.lnk-lne {color: #165d83; font-weight: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: #165d83; padding: .03em .10em; background: transparent; transition: background-color .15s ease, text-decoration-color .15s ease;}
.lnk-lne:visited {color: #165d83;}
.lnk-lne:hover, lnk-lne:active {color: #165d83; background-color: #dff2fd; text-decoration-color: #dff2fd; /* underline “off” without layout shift */}
.lnk-lne:focus-visible {color: #165d83; background-color: #dff2fd; outline: 2px solid #dff2fd; outline-offset: .18em;}

/* SEPARATORS */
p.sep-lne-top::before {content: ''; display: block; width: 25%; min-width: 150px; height: 1px; background-color: #4a8db3; margin: 1rem auto 1rem 0;}
p.sep-lne-btm::after {content: ''; display: block; width: 25%; min-width: 150px; height: 1px; background-color: #4a8db3; margin: 1rem auto 1rem 0;}
hr.sep-lne-btm {width: 25%; min-width: 150px; height: 1px; background: #4a8db3; margin: 1rem auto 1rem 0; border: 0;}

/* ///// WRAPPER - FOR PAGE ///// */
#wrapper {max-width: 1920px; margin-inline: auto; display: flex; flex-direction: column;  background: #fff; overflow: visible;}

/* ///// HEADER ///// */
/* site-header overlays the hero image, scrolls away with the page */

#lgo-nav {position: absolute; inset: 0 0 auto 0; z-index: 1000; padding: 16px 0px 0px; display: flex; justify-content: space-between; align-items: center; overflow: visible; background-color: #fff; border-bottom: 1px solid #1b5b83;}

/* 980px and down: paired with .nav-container {padding-bottom:0} in the NAV section to vertically center the logo with the hamburger */
@media (max-width: 980px) {#lgo-nav {padding: 10px 0px 14px;} #pg-hme #brand {padding-top: 0;}}

#lgo {display: inline-block; line-height: 0; position: relative;}
#lgo img {display: block;}
#lgo:focus {outline: none;}
#lgo:focus-visible {outline: none;}
@media (forced-colors: active) {#lgo:focus, #lgo:focus-visible {outline: 2px solid CanvasText; outline-offset: 2px; box-shadow: none;}}

#brand {flex: 0 0 auto; /*padding-top: 10px;*/ margin-left: 5vw;}
@media (max-width: 1280px){#pg-hme #brand {}}
#brand img {display: block; height: auto;}
@media (min-width: 1440px){#brand img {max-width: 100%;}}
@media (max-width: 1280px){#brand img {max-width: 410px;}}
@media (max-width: 768px){#brand img {width: 370px;}}
@media (max-width: 500px){#brand img {width: 300px;}}
@media (max-width: 360px){#brand img {width: 250px;}}

/* =======================================================================
   NAVIGATION — MAIN  (consolidated)
   (Mon, 06/15/2026) Claude Opus 4.8
   Order: container -> desktop menu -> desktop dropdown -> hamburger (base)
          -> mobile menu (base) -> mobile breakpoint (980 and down)
          -> small screens -> no-JS fallback
   ======================================================================= */

/* ===== NAVIGATION CONTAINER ===== */
.nav-container {position: relative; top: 0px; right: 25px; z-index: 100; padding-bottom: 1em;}

/* ===== DESKTOP MENU (DEFAULT: 981px and up) ===== */
.desktop-menu {display: flex; list-style: none; gap: 10px;}
.desktop-menu > li {position: relative;}
.desktop-menu > li > a {display: block; padding: 12px 24px; color: #fff; text-decoration: none; background: #114159; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; transition: background 0.3s; font-weight: 500; white-space: nowrap;}
.desktop-menu > li:hover > a, .desktop-menu > li > a:focus {background: #1e4358;}

/* ===== DESKTOP DROPDOWN ===== */
.dropdown {position: absolute; top: 100%; left: 0; background: #2c5f7c; min-width: 235px; display: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); border-radius: 5px; overflow: hidden; padding-top: 3px; z-index: 110;}
.dropdown::before {content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 3px; background: transparent;}
.dropdown li {list-style: none;}
.dropdown li:not(:last-child) {border-bottom: 1px solid rgba(255,255,255,0.25);}
.dropdown a {display: block; padding: 12px 20px; color: #fff; text-decoration: none; transition: background 0.3s;}
.dropdown a:hover, .dropdown a:focus {background: #25b5e7;}
/* Show dropdown on hover or keyboard focus */
.desktop-menu > li:hover .dropdown, .desktop-menu > li:focus-within .dropdown {display: block;}

/* ===== HAMBURGER BUTTON (DEFAULT: hidden until mobile breakpoint) ===== */
.hamburger-btn {display: none;}

/* ===== MOBILE MENU (STRUCTURE + BASE STYLES) =====
   Note: visibility is controlled by the [hidden] attribute + your JS. */
.mobile-menu {position: fixed; /*top: 45px;*/ top: 60px; right: 15px; background: #2c5f7c; min-width: 250px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); max-height: calc(100vh - 10px); overflow-y: auto; border-radius: 5px;}
.mobile-menu ul {list-style: none;}
.mobile-menu > ul > li {border-bottom: 1px solid rgba(255,255,255,0.1);}
.mobile-menu > ul > li:last-child {border-bottom: none;}
/* Shared row styling for BOTH mobile links and mobile-toggle buttons */
.mobile-menu a, .mobile-menu .mobile-toggle {display: block; padding: 15px 20px; color: #fff; transition: background 0.3s;}
/* Link-only defaults */
.mobile-menu a {text-decoration: none;}
/* Button-only defaults */
.mobile-menu .mobile-toggle {width: 100%; background: transparent; border: 0; border-radius: 0; font: inherit; text-align: left; cursor: pointer;}
.mobile-menu a:hover, .mobile-menu .mobile-toggle:hover {background: #25b5e7;}
.mobile-menu a:focus-visible, .mobile-menu .mobile-toggle:focus-visible {outline: 1px solid #f1f1f1; outline-offset: -1px;}
/* Submenu (mobile) */
.mobile-menu .mobile-dropdown {display: none; /* closed by default */ background: rgba(0,0,0,0.15);}
.mobile-menu .mobile-dropdown a {padding-left: 40px; font-size: 14px;}
/* Ensure [hidden] always wins (even if an ".active" class is present). */
.js .mobile-menu[hidden], .js .mobile-dropdown[hidden] {display: none !important;}

/* ===== MOBILE BREAKPOINT (980px and down) ===== */
@media (max-width: 980px) {
/* Hide desktop menu */
.desktop-menu {display: none;}
/* Vertical-centering fix (logo <-> hamburger): drop the desktop tab spacing so the
   nav box height equals the hamburger. (Logo's top-padding reset lives in the
   HEADER section's 980px block.) */
.nav-container {padding-bottom: 0;}
/* Hamburger button — position:static (was absolute) keeps it in normal flow so
   #lgo-nav's align-items:center centers it against the logo. Horizontal placement
   is unchanged: .nav-container keeps its right:25px. */
.hamburger-btn {display: grid; place-items: center; position: static; width: 44px; height: 42px; background: #fff; border: none; cursor: pointer; padding: 0; /* grid handles centering */ border-radius: 3px; transition: background 0.3s;}
.hamburger-btn:hover {background: #f0f0f0;}
.hamburger-btn:focus {outline: 2px solid #195f83; outline-offset: 2px;}
.hamburger-btn:focus-visible {outline: 2px solid #25b5e7; outline-offset: 1px;}
/* Hamburger icon + bars */
.hamburger-icon {width: 32px; height: 32px; position: relative; display: block;}
.hamburger-icon span {position: absolute; left: 0; top: 50%; width: 32px; height: 3px; background: #195f83; transform-origin: center; transition: transform 0.3s, opacity 0.2s;}
.hamburger-icon span:nth-child(1) {transform: translateY(calc(-50% - 8px));}
.hamburger-icon span:nth-child(2) {transform: translateY(-50%);}
.hamburger-icon span:nth-child(3) {transform: translateY(calc(-50% + 8px));}
/* Hamburger OPEN state (aria-expanded) */
.hamburger-btn[aria-expanded="true"] .hamburger-icon span:nth-child(1) {transform: translateY(-50%) rotate(45deg);}
.hamburger-btn[aria-expanded="true"] .hamburger-icon span:nth-child(2) {opacity: 0;}
.hamburger-btn[aria-expanded="true"] .hamburger-icon span:nth-child(3) {transform: translateY(-50%) rotate(-45deg);}
/* Dropdown indicator on the BUTTON */
.mobile-menu .has-dropdown > .mobile-toggle {position: relative;}
.mobile-menu .has-dropdown > .mobile-toggle::after {content: '▼'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 12px; transition: transform 0.3s;}
.mobile-menu .has-dropdown.active > .mobile-toggle::after {transform: translateY(-50%) rotate(180deg);}
/* Show submenu when open */
.mobile-menu .has-dropdown.active > .mobile-dropdown {display: block;}
}

/* ===== SMALL SCREENS (500px and down) ===== */
@media (max-width: 500px) {.mobile-menu {min-width: 90%; border-radius: 0;}}

/* ===== NO-JS FALLBACK (html.no-js) =====
   Hide hamburger + mobile menu, keep desktop menu at all widths,
   always show dropdown content (no JS to toggle). */
.no-js .hamburger-btn {display: none;}
.no-js .mobile-menu {display: none;}
/* Use desktop menu at all widths */
.no-js .desktop-menu {display: flex; flex-wrap: wrap;}
/* Always show dropdown content (no JS to toggle) */
.no-js .desktop-menu > li {position: static;}
.no-js .desktop-menu .dropdown {position: static; display: block; box-shadow: none; border-radius: 0; padding-top: 0;}
/* no-JS menu collapses to a column at the same 980px breakpoint as the hamburger */
@media (max-width: 980px) {
.no-js .nav-container {top: 0; right: 0; padding-bottom: 0.5em;}
.no-js .desktop-menu {flex-direction: column; align-items: stretch;}
.no-js .desktop-menu > li > a {border-radius: 0; width: 100%;}
}
/* ===== END NAVIGATION — MAIN ===== */


main {padding-bottom: 3rem; position: relative;}
#maincontent {background: rgba(201,233,251,.55);}

/* SECTION WIDTHS & HEIGHTS */
.wde-1600px90vw {width: 90vw; max-width: 1600px; margin-left: auto; margin-right: auto;}
.wde-1550px90vw {width: 90vw; max-width: 1500px; margin-left: auto; margin-right: auto;}
.wde-1466px90vw {width: 90vw; max-width: 1466px; margin-left: auto; margin-right: auto;}
.wde-1460px90vw {width: 90vw; max-width: 1460px; margin-left: auto; margin-right: auto;}
.wde-1450px90vw {width: 90vw; max-width: 1450px; margin-left: auto; margin-right: auto;}
.wde-1440px90vw {width: 90vw; max-width: 1440px; margin-left: auto; margin-right: auto;}
.wde-1400px90vw {width: 90vw; max-width: 1400px; margin-left: auto; margin-right: auto;}
.wde-1200px90vw {width: 90vw; max-width: 1200px; margin-left: auto; margin-right: auto;}
.wde-1160px90vw {width: 90vw; max-width: 1160px; margin-left: auto; margin-right: auto;}
.wde-1080px90vw {width: 90vw; max-width: 1080px; margin-left: auto; margin-right: auto;}
.wde-1060px90vw {width: 90vw; max-width: 1060px; margin-left: auto; margin-right: auto;}
.wde-0950px90vw {width: 90vw; max-width: 950px; margin-left: auto; margin-right: auto;}
.wde-0800px90vw {width: 90vw; max-width: 800px; margin-left: auto; margin-right: auto;}
.wde-0700px90vw {width: 90vw; max-width: 700px; margin-left: auto; margin-right: auto;}
.wde-0400px90vw {width: 90vw; max-width: 400px; margin-left: auto; margin-right: auto;}
.wde-100pct {width: 100%;}
.hgt-min-30vh {min-height: 30vh;}

/* -------------------------------------------------
   FOOTER - JONESPORTAMERICA.COM
   (Sun, 06/14/2026) Claude Opus 4.8
   ------------------------------------------------- */
footer {background: #195f83; text-align: center; padding: 0; color: #fff;}
footer::before {content: " "; display: table;}
#ftr-container {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; padding: 0 1rem 1rem;}
#ftr-container .flex-item {padding: 10px; text-align: center;}
.two-col-even#ftr-container .flex-item {flex: 0 0 calc(50% - 20px);}
.three-col-even#ftr-container .flex-item {flex: 0 0 calc(33.333% - 15px);}
footer p {text-align: center;}
footer a {color: #fff;}

#ftr-nav-main {margin-top: 3em;}
#ftr-nav-main ul {list-style: none; text-align: center;}
#ftr-nav-main ul li {margin-bottom: 1em;}
#ftr-nav-main a {display: inline-block; text-decoration: none; border-bottom: 1px dotted #fff; padding-bottom: 1px;}
#ftr-nav-main a:hover {border-bottom: 1px dotted #195f83;}

#ftr-nav-2nd {padding: 0;}
#ftr-nav-2nd ul {display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 1em 0 0; padding: 0; gap: 0;}
#ftr-nav-2nd li {position: relative; margin: 0;}
#ftr-nav-2nd li:not(:last-child)::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 16px; width: 1px; background: rgba(255,255,255,.4);}
#ftr-nav-2nd a {display: block; padding: 12px 20px; text-decoration: none; white-space: nowrap;}
#ftr-nav-2nd li:last-child a {border-right: none;}
#ftr-nav-2nd a:hover {background: rgba(255,255,255,.2);}

/* Top-of-page link */
.to-top {display: inline-flex; align-items: center; margin: 0 auto; padding: .5rem .75rem; text-decoration: none; background: #114159; border: 1px solid #306f8f; border-radius: .375rem; line-height: 1.2;}
.to-top::before {content: "↑\00a0"; /* up arrow */ font-size: 1.1em; line-height: 1; transform: translateY(-1px);}
.to-top:hover {background-color: rgba(0,0,0,.06);}

/* ----- Stacked layout (single column) -----
   Three-col footer stacks at 900px; spacing rules below are scoped to
   .three-col-even so a .two-col-even footer is never disturbed in the
   741-900px range. nav-2nd links mirror nav-main when stacked. */
@media (max-width: 740px) {
.two-col-even#ftr-container .flex-item {flex: 0 0 100%;}
h2#ftr-nme {margin-top: 1.5em;}
}
@media (max-width: 900px) {
.three-col-even#ftr-container {gap: 0;}
.three-col-even#ftr-container .flex-item {flex: 0 0 100%; padding-top: 0; padding-bottom: 0;}
.three-col-even#ftr-container .flex-item + .flex-item {margin-top: 1.5rem;}
.three-col-even#ftr-container .flex-item p.mar-btm-125 {margin-bottom: 0;}
.three-col-even#ftr-container #ftr-nav-main {margin-top: 0;}
#ftr-nav-2nd {background: transparent;}
#ftr-nav-2nd ul {flex-direction: column;}
#ftr-nav-2nd li {margin-bottom: 1em;}
#ftr-nav-2nd li:not(:last-child)::after {display: none;}
#ftr-nav-2nd a {display: inline-block; padding: 0 0 1px; border-bottom: 1px dotted #fff; white-space: normal;}
#ftr-nav-2nd a:hover {background: transparent; border-bottom: 1px dotted #195f83;}
}
.ftr-photo {width: 100%; max-width: 280px; height: auto; margin: 2em auto 0;}

/* MAPS */
.map-frame {inline-size: 100%; margin-inline: auto; border: 0;}
/* The box that enforces aspect ratio and cropping */
.map-frame-inner {inline-size: 100%; max-inline-size: 950px; margin-inline: auto; aspect-ratio: 2 / 1; /* default ratio lg map */
position: relative; overflow: hidden; background: #eef; min-width: 0; min-height: 0;}
/* responsive ratios for lg map */
@media (max-width: 900px) {.map-frame-lg .map-frame-inner {aspect-ratio: 4 / 3;}}
.map-frame-inner > iframe {display: block; inline-size: 100%; block-size: 100%; border: 0;}
.map-caption {font-size: .875rem; text-align: right; margin-top: .4rem;}

h2.h2-cms, h3.h3-cms {margin-top: 2.25rem; margin-bottom: .75rem;}
@media (min-width: 0px) and (max-width: 767px) {
h2.h2-cms, h3.h3-cms {font-size: 1.5rem;}
h2.h2-cms.clr-blk, h3.h3-cms.clr-blk {font-size: 1.25rem;}
}
@media (min-width: 768px) and (max-width: 1200px) {
h2.h2-cms, h3.h3-cms {font-size: 1.5rem;}
h2.h2-cms.clr-blk, h3.h3-cms.clr-blk {font-size: 1.25rem;}
}
@media (min-width: 1201px) and (max-width: 1600px) {
h2.h2-cms, h3.h3-cms {font-size: 1.625rem;}
h2.h2-cms.clr-blk, h3.h3-cms.clr-blk {font-size: 1.375rem;}
}
@media (min-width: 1601px) {
h2.h2-cms, h3.h3-cms {font-size: 1.75rem;}
h2.h2-cms.clr-blk, h3.h3-cms.clr-blk {font-size: 1.5rem;}
}

/* CMS - public */
h2.h2-lne, h3.h3-lne {position: relative; padding-top: .625em; padding-bottom: .625em; margin-bottom: 2rem; margin-top: 2.5rem;}
h2.h2-lne::after, h3.h3-lne::after {content: ''; position: absolute; bottom: 0; left: 0px; right: 0; height: 2px; background: linear-gradient(to right, #2c6b7f 0%, rgba(44, 107, 127, 0.3) 50%, transparent 100%);}
h2.h2-lne::before, h3.h3-lne::before {content: ''; position: absolute; top: 0; left: 0px; right: 0; height: 2px; background: linear-gradient(to right, #2c6b7f 0%, rgba(44, 107, 127, 0.3) 50%, transparent 100%);}

.cmscontent p {margin-bottom: 1em;}

/* CMS - editor */
body#tinymce {padding: 1rem .5rem .5rem; line-height: 1.25em; background-image: none; background-color: #fff;}
#tinymce .h2-cms, #tinymce .h3-cms {margin-top: 1em; font-size: 1.25em; margin-bottom: .375em; text-align: left;}
#tinymce p {line-height: 1.75; margin-bottom: 1.25em; font-weight: 400;}
#tinymce p strong {margin-bottom: 1em; font-weight: 600;}
#tinymce ul, #tinymce ol, .cmscontent ul, .cmscontent ol {list-style-position: outside; margin: 0 0 1em 1.125em; padding-left: 0; text-align: left;}
#tinymce ul, .cmscontent ul {list-style: disc;}
#tinymce ol, .cmscontent ol {list-style: decimal;}
#tinymce li, .cmscontent li {margin-bottom: .75em;}

/* ----- ACCESSIBILITY -----  */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; /*fb*/ clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
a[href^="tel"],.tel, .tel:visited, a[href^="tel"]:hover, a[href^="tel"]:focus {color: inherit; text-decoration: none; border-bottom: none; padding: 5px 3px;}
a[href^="tel"]:hover {text-decoration: underline;}

/* Hide skip link by default (accessible hiding) */
a#skiplink:not(:focus):not(:active):not(:hover) {position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;}

/* Show skip link on focus */
a#skiplink:focus-visible {position: fixed; left: 0; top: 0; width: auto; height: auto; padding: .5rem .75rem; border: 1px dotted #222; background: #ff3; color: #000; -index: 1222222;}

@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transform: unset !important; transition-delay: 0s !important; transition-duration: 0s !important;}
 html {scroll-behavior: auto; }
}

/* MOBILE SPECIAL */
@media (max-width: 500px) {
.mblblck-500 {display: block;}
.mblno-500 {display: none !important;}
}
@media (max-width: 768px) {.mblblck-768 {display: block;}}

@media only print {
#maincontent {padding-bottom: 10pt; border-bottom: 1px solid #ccc;}
footer nav, .nav-container, .to-top, #formsrch, #btn-expand, .map-frame {display: none;}
footer, footer h2.clr-wht {color: #3c3c3b;}
footer p.pad-top-15 {padding-top: 15pt;}
}