/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --blue-900:    #071d38;
  --blue-700:    #0b3d67;          /* indigo blue from the South Carolina flag */
  --blue-600:    #155a95;
  --blue-500:    #2f7ab8;
  --gold:        #f2b705;          /* gold, after the Carolina jessamine */
  --panel:       #eaf0f7;          /* floating panel background */

  --white:       #ffffff;

  --ink:         #17201c;
  --ink-2:       #414b46;
  --ink-3:       #6d7873;

  --line:        #e2e8e4;
  --line-soft:   #eef2f0;

  --bg:          #ffffff;
  --bg-soft:     #f6f8f7;

  --radius-card: 10px;
  --radius-panel:18px;
  --shell:       1240px;
  --gap:         16px;

  --shadow:      0 4px 12px rgba(7,29,56,.10);
  --shadow-md:   0 10px 24px rgba(7,29,56,.14);
  --box-shadow-2:0 2px 8px rgba(7,29,56,.08);
  --box-shadow-3:0 8px 22px rgba(7,29,56,.14);

  /* Banner image. */
  --banner-image: url('https://pit21.s3.amazonaws.com/cdn/80fafb7b-1caf-4ac6-9a45-4f70d816d2f9.jpg');
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue-700);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--blue-500);
  outline-offset:2px;
  border-radius:4px;
}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
ul{margin:0;padding:0;list-style:none}
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   3. HEADER + LASSO SHELL NAV
   Adapted from the template's own header language onto the shell's
   class names (.nav-links / .nav-dropdown / #mobile-menu).
   ============================================================ */
.site-header{
  display:flex;align-items:center;gap:32px;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
  height:70px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.logo{max-width:120px}
.logo a{display:flex}

.site-header nav{flex:1;display:flex;justify-content:flex-end;align-self:stretch}

.nav-links{display:flex;align-items:stretch;gap:22px;height:100%}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:15px;font-weight:600;color:var(--ink);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.nav-item > a:hover{
  text-decoration:none;
  color:var(--blue-700);
  border-bottom-color:var(--blue-600);
}
.nav-caret{
  width:10px;height:6px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s ease;
}
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown:focus-within .nav-caret{transform:rotate(180deg)}

.nav-dropdown{
  position:absolute;top:100%;left:0;z-index:70;
  display:none;
  min-width:260px;
  padding:10px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);
}
.nav-dropdown-right{left:auto;right:0}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown{display:block}
.nav-dropdown a{
  display:block;
  padding:9px 12px;
  border-radius:7px;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  transition:background .16s ease, color .16s ease;
}
.nav-dropdown a:hover{text-decoration:none;background:var(--bg-soft);color:var(--blue-700)}

.nav-toggle{
  display:none;
  margin-left:auto;
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;
  padding:0 9px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
}
.nav-toggle-bar{
  display:block;height:2px;width:100%;
  background:var(--ink);
  border-radius:2px;
}

#mobile-menu{
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.mobile-menu-inner{
  max-width:var(--shell);
  margin:0 auto;
  padding:14px 24px 22px;
}
.mobile-menu-head{display:flex;justify-content:flex-end;margin-bottom:6px}
.mobile-menu-close{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:transparent;color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
}
.mobile-menu-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mobile-menu-inner > ul > li{border-bottom:1px solid var(--line-soft)}
.mobile-menu-inner > ul > li > a{
  display:block;
  padding:13px 0 9px;
  font-size:16px;font-weight:700;
  color:var(--ink);
}
.mobile-sublist{padding:0 0 12px 2px}
.mobile-sublist li{margin-bottom:2px}
.mobile-sublist a{
  display:block;
  padding:7px 0;
  font-size:14.5px;
  color:var(--ink-2);
}

/* ============================================================
   4. HERO — the site's only image
   ============================================================ */
.hero{
  position:relative;
  background-color:var(--blue-700);
  background-image:
    linear-gradient(100deg,
      var(--blue-700) 0%,
      var(--blue-700) 16%,
      rgba(11,61,103,.95) 28%,
      rgba(11,61,103,.6) 40%,
      rgba(11,61,103,.12) 52%,
      rgba(11,61,103,0) 64%),
    linear-gradient(rgba(11,61,103,.42), rgba(7,29,56,.46)),
    var(--banner-image);
  background-size:cover,cover,cover;
  background-position:center,center,center right;
  background-repeat:no-repeat;
  color:#fff;
  padding:76px 0 190px;
}
.hero-inner{max-width:640px}
.hero h1{
  font-size:clamp(34px,4.6vw,56px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.06;
  margin-bottom:16px;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{
  margin:0 0 30px;
  font-size:18px;
  color:rgba(255,255,255,.92);
  max-width:46ch;
}

/* Search */
.search{
  max-width:570px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(4,20,38,.22);
}
/* The search bar markup is fixed: Lasso's search script binds to #query and
   #search by id, so the ids, tag types and class list cannot change and the
   look is set from here instead.

   `no-gutters` and `btn-block` are Bootstrap 4 names that do nothing in the
   Bootstrap 5 the shell loads; `btn-orange` and `fs-14` are site classes
   Bootstrap has never had. All four are defined below. `.btn-orange` is the
   site's primary blue, not an orange - the name is Lasso's, the colour is
   this template's. */
.search .form{
  display:flex;align-items:center;
  background:#fff;
  padding:6px;
}
.search .no-gutters{margin-left:0;margin-right:0}
.search .no-gutters>[class*="col-"]{padding-left:0;padding-right:0}
.search .form-group{margin-bottom:0}
.search .form-control{
  border:0!important;outline:0;box-shadow:none;
  font:inherit;font-size:16px;
  color:var(--ink);
  padding:12px 12px 12px 14px;
  background:transparent;
  width:100%;
}
.search .form-control:focus{
  border:0;box-shadow:none;background:transparent;color:var(--ink);
}
.search .form-control::placeholder{color:var(--ink-3)}
.btn-block{display:block;width:100%}
.fs-14{font-size:14px}
.btn-orange{
  border:0;border-radius:8px;
  background:var(--blue-600);color:#fff;
  font-weight:600;
  padding:11px 18px;
  transition:background .16s ease, transform .16s ease;
}
.btn-orange:hover,.btn-orange:focus{background:var(--blue-700);color:#fff;transform:scale(1.02)}
/* Below 768px none of the col-* classes in the block apply, so the two
   form-groups would shrink to their content inside the flex row. */
@media (max-width:767.98px){
  .search .form-group{flex:0 0 100%;max-width:100%}
  .search .form-control{padding-bottom:6px}
}

.search-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 18px;
  background:linear-gradient(90deg,var(--blue-900),var(--blue-500) 65%,var(--gold));
  font-size:13px;
}
.search-strip b{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.18);
  padding:3px 8px;border-radius:4px;
}
.search-strip a{color:#fff;font-weight:500;transition:opacity .16s ease}
.search-strip a:hover{opacity:.75;text-decoration:none}

/* ============================================================
   5. FLOATING CATEGORY PANEL
   ============================================================ */
.panel-wrap{
  position:relative;
  z-index:10;
  margin-top:-150px;
}
.panel{
  background:var(--panel);
  border-radius:var(--radius-panel);
  padding:20px;
  box-shadow:0 18px 44px rgba(7,29,56,.10);
}

.tile-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--gap);
}

.tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  min-height:210px;
  padding:30px 20px 26px;
  background:var(--bg);
  border:1px solid transparent;
  border-radius:var(--radius-card);
  color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tile:hover{
  text-decoration:none;
  transform:translateY(-3px);
  border-color:var(--blue-500);
  box-shadow:0 10px 24px rgba(7,29,56,.10);
}

.tile-arrow{
  position:absolute;top:14px;right:14px;
  width:15px;height:15px;
  fill:none;stroke:var(--ink-3);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease, stroke .18s ease;
}
.tile:hover .tile-arrow{
  stroke:var(--blue-600);
  transform:translate(3px,-3px);
}

.tile-icon{
  width:52px;height:52px;
  margin-bottom:16px;
}

.tile .tile-h{
  display:block;
  font-size:18px;
  font-weight:700;
  color:var(--blue-700);
  margin-bottom:7px;
  transition:color .16s ease;
}
.tile:hover .tile-h{color:var(--blue-900)}
.tile .tile-p{
  display:block;
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:var(--ink-3);
}

/* ============================================================
   5b. ARTICLE CONTAINERS (no icons)
   ============================================================ */
.col-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.col-card{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:24px 24px 20px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.col-card:hover{border-color:#c3d2c9;box-shadow:0 6px 18px rgba(7,29,56,.07)}
.col-card > h3{
  font-size:13px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue-700);
  padding-bottom:14px;
  border-bottom:2px solid var(--blue-600);
}
.article-list{margin-bottom:18px}
.article-list li{border-bottom:1px solid var(--line-soft)}
.article-list a{
  display:block;
  margin:0 -12px;
  padding:13px 12px;
  border-radius:8px;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
  transition:background .16s ease, color .16s ease;
}
.article-list a:hover{background:var(--bg-soft);color:var(--blue-700)}
.article-list .meta{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  font-weight:400;
  color:var(--ink-3);
}
.col-more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:auto;
  font-size:14px;
  font-weight:700;
  color:var(--blue-700);
  transition:color .16s ease;
}
.col-more::after{
  content:'\2192';
  transition:transform .16s ease;
}
.col-more:hover{color:var(--blue-900);text-decoration:none}
.col-more:hover::after{transform:translateX(3px)}

@media (max-width:1024px){
  .col-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .col-grid{grid-template-columns:1fr;gap:14px}
}

/* ============================================================
   6. LOWER BLOCKS
   ============================================================ */
.block{padding:60px 0}
.block--soft{background:var(--bg-soft);border-top:1px solid var(--line-soft)}
.block-head{margin-bottom:26px;max-width:70ch}
.block-head h2{font-size:27px;font-weight:800;margin-bottom:8px}
.block-head p{margin:0;color:var(--ink-3);font-size:15px}

.wide-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 48px;
  border-top:1px solid var(--line);
}
.wide-list li{border-bottom:1px solid var(--line)}
.wide-list a{
  display:block;
  margin:0 -14px;
  padding:17px 14px;
  border-radius:8px;
  color:var(--ink);
  transition:background .16s ease, color .16s ease;
}
.wide-list a:hover{background:var(--bg-soft);color:var(--blue-700);text-decoration:none}
.wide-list a:hover .wide-title{text-decoration:underline}
.wide-title{font-size:16px;font-weight:600;line-height:1.4}
.wide-meta{display:block;margin-top:5px;font-size:13px;color:var(--ink-3)}
.tag{
  display:inline-block;margin-right:8px;
  padding:2px 8px;border-radius:4px;
  background:var(--panel);color:var(--blue-700);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:1px;
}

/* ============================================================
   7. FOOTER (Lasso shell)
   ============================================================ */
.site-footer{
  margin-top:auto;
  background:var(--blue-900);
  color:rgba(255,255,255,.82);
  padding:44px 24px 34px;
  font-size:14px;
  text-align:center;
}
.site-footer .logo{margin:0 auto 22px}
.footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 26px;
  max-width:var(--shell);
  margin:0 auto 24px;
}
.footer-links a{
  color:rgba(255,255,255,.82);
  transition:color .16s ease;
}
.footer-links a:hover{color:#fff}
.site-footer > span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.site-disclaimer{
  max-width:78ch;
  margin:20px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.65;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width:1150px){
  .nav-links{gap:16px}
  .nav-item > a{font-size:14px}
}
@media (max-width:1024px){
  .site-header nav{display:none}
  .nav-toggle{display:flex}
  .tile-grid{grid-template-columns:repeat(3,1fr)}
  .hero{padding:60px 0 150px}
  .panel-wrap{margin-top:-120px}
}
@media (max-width:760px){
  .wide-list{grid-template-columns:1fr;gap:0}
}
@media (max-width:600px){
  .site-header{height:62px;gap:12px}
  .hero{
    padding:44px 0 110px;
    background-image:
      linear-gradient(180deg,rgba(11,61,103,.93) 12%,rgba(7,29,56,.72) 100%),
      linear-gradient(rgba(11,61,103,.42),rgba(7,29,56,.46)),
      var(--banner-image);
    background-position:center,center,center;
  }
  .hero-sub{font-size:16px}
  .panel-wrap{margin-top:-84px}
  .panel{padding:12px;border-radius:14px}
  .tile-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile{min-height:0;padding:24px 14px 20px}
  .tile-icon{width:42px;height:42px;margin-bottom:12px}
  .tile .tile-h{font-size:15px}
  .tile .tile-p{font-size:13px}
  .block{padding:42px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile,.tile-arrow,.btn-orange,.col-more::after,.nav-caret{transition:none}
  .tile:hover{transform:none}
  .tile:hover .tile-arrow{transform:none}
  .btn-orange:hover{transform:none}
  .col-more:hover::after{transform:none}
}

/* ============================================================
   9. LASSO WIDGET STYLESHEET
   Files from the lasso-refactor widget registry, appended in
   filename order. Copied verbatim except 00-token-map.css.
   ============================================================ */

/* WIDGET TOKEN MAP
   THE ONLY FILE IN widgets/ THAT CHANGES PER SITE.

   Every other file in this folder is identical across all domains and must
   never be edited for a single site. They reference --w-* tokens only.
   This block wires those tokens to whatever the site's own palette calls
   things, so the designer keeps their own variable names.

   Right-hand side = this site's variables, taken from its :root.
   Left-hand side  = fixed. Do not rename.

   Mapping below is southcarolina.com.
*/

:root {
  --w-white:         var(--white);
  --w-bg-alt:        var(--bg-soft);        /* page/zebra background */
  --w-bg-tint:       var(--panel);      /* hover tint            */
  --w-brand:         var(--blue-600);        /* links, accents, focus */
  --w-brand-dark:    var(--blue-700);       /* headings, table head  */
  --w-brand-dark-2:  var(--blue-900);    /* active/pressed        */
  --w-highlight:     var(--gold);
  --w-text-muted:    var(--ink-2);
  --w-border:        var(--line);
  --w-radius:        var(--radius-card);
  --w-shadow:        var(--shadow);
  --w-shadow-md:     var(--shadow-md);
  --w-shadow-2:      var(--box-shadow-2);
  --w-shadow-3:      var(--box-shadow-3);
}

/* LAYOUT RESET
   Shell/container resets required by the Lasso wrapper. Not a widget, but must ship with them.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

.home .container.main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.container.layout {
  max-width: 100%;
  padding: 0;
}

.container.layout .row.layout {
  margin: 0;
}

.home .container.layout .row.layout > .cols {
  padding: 0;
}

.pages .main-wrapper .container.main {
  padding: 24px 16px;
}

/* FONTS RESET
   Typography inside .pages article bodies.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

.pages h1,
.pages h2 {
  font-weight: 700;
  color: var(--w-brand-dark);
}

.pages h1,
.pages h2,
.pages h3,
.pages p,
.pages strong {
  color: var(--w-brand-dark);
}

.pages h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.pages h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 40px 0 18px;
}

.pages h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 24px 0 10px;
}

.pages p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.pages strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .pages h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .pages h2 {
    font-size: 25px;
    margin: 32px 0 16px;
  }

  .pages h3 {
    font-size: 20px;
    margin: 22px 0 8px;
  }

  .pages p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* TABLE RESET
   Tables rendered inside article bodies.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

table { margin: 32px 0; }

table th, table td {
  border-color: var(--w-border) !important;
  padding: 8px 16px !important;
}

table td {
  color: var(--w-text-muted) !important;
}

table th {
  background: var(--w-brand-dark) !important;
  color: var(--w-white) !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

table tbody tr:nth-child(even) td {
  background: var(--w-bg-alt) !important;
}

@media (max-width: 992px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    border: 0 !important;
  }
}

@media (max-width: 768px) {
  .pages h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .pages h2 {
    font-size: 25px;
    margin: 32px 0 16px 0;
  }

  .pages h3 {
    font-size: 20px;
    margin: 22px 0 8px 0;
  }

  .pages p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* DROPDOWN SUBLIST WIDGET
   Collapsible sublist panel. Pairs with the scroll-lock logic in main.js.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

/* Anchor for overlay so the panel doesn't push content down */
.col-gap:has(.dropdown-sublist):has(.bubbles-link),
.cols:has(.dropdown-sublist):has(.bubbles-link) {
  position: relative;
  margin-bottom: 32px;
}

/* Trigger button/bar */
.item-sublist:has(.bubbles-link) .dropdown-sublist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--w-brand-dark);
  color: var(--w-white);
  border-radius: var(--w-radius);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: var(--w-shadow);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.item-sublist:has(.bubbles-link) .dropdown-sublist :hover {
  background: var(--w-brand-dark-2);
  box-shadow: var(--w-shadow-md);
}

/* Circular icon button with chevron */
.item-sublist:has(.bubbles-link) .dropdown-sublist::after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--w-highlight);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%231A2E4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  transition: transform 0.25s ease, background-color 0.2s;
}

/* Open state — stays in place; JS locks page scroll */
.item-sublist:has(.bubbles-link) .dropdown-sublist.open {
  background: var(--w-brand-dark-2);
  border-radius: var(--w-radius) var(--w-radius) 0 0;
  z-index: 160;
}

.item-sublist:has(.bubbles-link) .dropdown-sublist.open::after {
  transform: rotate(180deg);
  background-color: var(--w-highlight);
}

/* Panel: scrollable within itself, max-height so trigger is always visible */
.item-sublist:has(.bubbles-link) .dropdown-sublist + * {
  position: absolute;
  left: max(0px, calc(50% - 400px));
  right: max(0px, calc(50% - 400px));
  z-index: 150;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-top: 1px solid var(--w-bg-alt);
  border-radius: 0 0 var(--w-radius) var(--w-radius);
  box-shadow: var(--w-shadow-md);
  padding: 4px 12px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 65vh;
}

/* CONTACT US FORM
   #contact-form on the contact page.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

#contact-form {
  margin: 45px auto 0;
  max-width: 500px;
}

#contact-form input,
#contact-form textarea {
  flex: 1;
  border: 2px solid var(--bs-gray-300);
  border-radius: 6px;
  outline: 0;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--w-brand-dark);
  min-width: 100%;
}

#contact-form input:active,
#contact-form input:focus,
#contact-form textarea:active,
#contact-form textarea:focus {
  border: 2px solid var(--w-brand);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--bs-gray-600);
}

#contact-form button {
  background: var(--w-brand);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s;
  white-space: nowrap;
  width: 100%;
}

#contact-form button:hover {
  background: var(--w-brand-dark);
}

/* CORE WIDGETS
   item-current-image, item-sublist, item-bubbles, sublist.card.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

/* IMAGE STYLE RESET */
.item-current-image img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: none !important;
  border-radius: 4px !important;
  border-color: var(--bs-gray-300) !important;
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

.item-html,
.item-paragraph {
  max-width: 800px;
  margin: 0 auto;
}

/* SUBLIST */
.item-sublist a {
  width: 100%;
  height: 100%;
}

.item.item-bubbles {
  margin-bottom: 32px;
}

.item-bubbles .row {
  margin: 0;
}

.bubbles-chip {
  align-items: center;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  color: var(--w-brand-dark);
  display: flex;
  font-weight: 500;
  height: 100%;
  padding: 16px 48px 16px 24px;
  position: relative;
  transition: padding 0.2s ease-in-out;
}

.bubbles-chip:hover {
  color: var(--w-brand-dark);
  background: var(--w-bg-tint);
  border-color: var(--w-brand);
  padding-left: 20px;
}

.bubbles-chip:active,
.bubbles-chip:focus {
  background: var(--w-brand-dark-2);
  color: var(--w-white);
}

.bubbles-link {
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
}

.bubbles-link .bubbles-outer {
  height: 100%;
  padding: 5px;
  max-width: 100%;
}


.sibling.link-button .bubbles-link .bubbles-outer,
.sibling.link-button .bubbles-chip {
  height: auto;
}

.col-gap:has(> .item-bubbles)::before {
  display: none !important;
}

.bubbles-chip::after {
  content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87771 7.01782H1.02042C0.737361 7.01782 0.496528 6.91886 0.297917 6.72094C0.0993056 6.52317 0 6.2833 0 6.00136C0 5.71942 0.0993056 5.4781 0.297917 5.2774C0.496528 5.07657 0.737361 4.97615 1.02042 4.97615H8.87771L5.66583 1.76428C5.46111 1.55955 5.35681 1.31719 5.35292 1.03719C5.34889 0.757332 5.45076 0.510249 5.65854 0.295943C5.86632 0.0948319 6.11014 -0.00377823 6.39 0.000110661C6.66986 0.00399955 6.91236 0.108583 7.1175 0.313861L12.0713 5.27407C12.1699 5.37282 12.2464 5.4856 12.3008 5.6124C12.3551 5.73935 12.3823 5.86865 12.3823 6.00032C12.3823 6.13199 12.3551 6.26122 12.3008 6.38803C12.2464 6.51497 12.1727 6.62497 12.0798 6.71803L7.10958 11.688C6.89403 11.9037 6.65368 12.0081 6.38854 12.0012C6.12354 11.9942 5.88715 11.8862 5.67938 11.6772C5.4716 11.4629 5.36771 11.2166 5.36771 10.9382C5.36771 10.6599 5.4716 10.4192 5.67938 10.2162L8.87771 7.01782Z' fill='%231570B5'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-in-out;
}

.bubbles-chip:hover::after {
  right: 10px;
}

/* SUBLIST CARDS */
.item-sublist:has(.sublist.card) .row > div {
  padding: 5px !important;
}

.sublist.card {
  border: none;
  border-radius: 6px;
  box-shadow: var(--w-shadow-2);
  transition: 0.2s ease-in;
}

.sublist.card:hover {
  box-shadow: var(--w-shadow-3);
  color: var(--w-brand);
  transform: translateY(-4px);
}

.sublist.card h5 {
  margin-bottom: 0;
  font-weight: 500;
}

.sublist.card .card-body {
  padding: 16px;
}

@media (max-width: 767.98px) {
  .row div:has(> .sublist.card) {
    padding: 0 !important;
  }

  .row:has(> div .sublist.card) {
    margin: 0;
    gap: 10px;
  }

  .sublist.card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .sublist.card .card-img-top {
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    width: 120px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .sublist.card .card-body {
    flex: 1;
    padding: 1rem;
  }

  .sublist.card .card-body * {
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sublist.card .card-body h5 {
    font-size: 16px;
  }
}

/* WIDGET & SECTION BEHAVIORS
   Cross-widget responsive behaviour.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

@media (max-width: 991px) {
  .cols:has(.sidebar-desktop){
    display:none;
  }
}

/* WIDGET MIN-HEIGHTS
   CLS guards. Values are measured, not designed — do not round them.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

.loco-widget {
  min-height: 672.547px;
}

.item-external-scripts {
  min-height: 566px;
}

@media (max-width: 767.98px) {
  .loco-widget {
    min-height: 1568px;
  }

  .item-external-scripts {
    min-height: 716px;
  }
}