/* =============================================================
   site-shared.css
   Shared layout primitives, responsive helpers, and reusable
   UI components. Loaded from the master template (template.php)
   so every page gets it. Cache-busted via ?v= query in the
   <link> tag — bump that when you change anything here.

   Conventions:
     - Mobile-first. Default rules target small screens.
     - Breakpoints: 600 / 900 / 1200.
     - Design tokens live in design-system.css; use var(--c-*) here.
   ============================================================= */

/* ---------- 1. Universal box-sizing -------------------------- */
/* Without this, fixed-width legacy elements blow out the
   viewport on mobile. Padding included in the box width. */
*, *::before, *::after { box-sizing: border-box; }

/* Stop horizontal scrolling on small screens caused by widgets
   that hard-code 1000-1300px widths. Inner widgets that need
   to be wider should use overflow-x:auto themselves. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* ---------- 2. .wrapper — unified container at every width --- */
/* The legacy site uses .wrapper everywhere for the centered content
   column, often with a hard-coded width:990px. Replace with a single
   fluid container so the design behaves the same way on phone, tablet,
   and desktop. Maxes at 1180px (the design-system content width). */
.wrapper {
  width: auto !important;
  max-width: var(--c-page-max, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--c-page-gutter, clamp(12px, 2.5vw, 24px));
  padding-right: var(--c-page-gutter, clamp(12px, 2.5vw, 24px));
  box-sizing: border-box;
}

/* ---------- 3. Datatables — site uses class="datatable" for
   almost every tabular layout. Two-tier responsive strategy:
     <=900px: keep cells nowrap, allow horizontal scroll inside
              the table (good for compact numeric tables like
              rig counts, commodity prices, A&D Trends).
     <=600px: relax nowrap so text columns wrap. Long-string
              columns (deal titles, area-of-focus) otherwise
              push tbody to 1200px+ requiring awkward swipes.
   The wrap fallback uses :not() to leave alignment/numeric
   cells (.c-align-right etc.) and the rig table alone. ----- */
@media (max-width: 900px) {
  table.datatable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.datatable th, table.datatable td { white-space: nowrap; }
}
@media (max-width: 600px) {
  table.datatable th,
  table.datatable td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table.datatable th.c-align-right,
  table.datatable td.c-align-right,
  table.datatable th.c-align-center,
  table.datatable td.c-align-center,
  table.datatable td.numeric,
  table.datatable td.nowrap {
    white-space: nowrap;
  }
}

/* ---------- 4. Top header / nav strips ----------------------- */
/* The .toplinks bar (Permits / Completions / Rigs / Plays / Deals
   / Articles / etc.) is in includes/header.php with desktop styles
   inlined in a <style> block. Promote those rules to shared CSS so
   they're not duplicated, and add narrow-viewport behaviour. */
.toplinks {
  overflow-x: auto;
  overflow-y: hidden;
  background: #000;
  border-bottom: solid var(--c-color-border, #dfdfdf) 1px;
  scrollbar-width: none;
}
.toplinks::before, .toplinks::after { content: " "; display: table; }
.toplinks::after { clear: both; }
ul.tplks {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  font-family: var(--c-font-base, 'Roboto', Arial, sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}
ul.tplks li {
  display: flex;
  align-items: center;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
  border-right: 0;
  min-height: 30px;
  height: auto;
}
ul.tplks li + li::before {
  content: "";
  display: block;
  flex: 0 0 1px;
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: rgba(255, 215, 0, 0.42);
}
ul.tplks li a {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: var(--c-color-accent-gold-light, gold);
  text-decoration: none;
  white-space: nowrap;
}
ul.tplks li a:hover { color: #efefef; }

/* Legacy area headers still inline float-based .tplks styles after this
   stylesheet. Keep the top-link bar viewport-safe until those headers are
   fully migrated to includes/toplinks.php. Known usage: /deals. */
.toplinks::-webkit-scrollbar { display: none; }
.toplinks .wrapper {
  width: min(100%, 1280px) !important;
  max-width: 100% !important;
}
.toplinks ul.tplks {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
}
.toplinks ul.tplks li {
  display: flex !important;
  flex: 0 0 auto !important;
  float: none !important;
  align-items: center !important;
  height: auto !important;
  min-width: 0;
  min-height: 30px;
  padding: 0 !important;
  border-right: 0 !important;
}
.toplinks ul.tplks li a {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 clamp(6px, 0.65vw, 10px) !important;
  font-size: clamp(12px, 0.88vw, 14px);
}
@media (max-width: 900px) {
  .toplinks .wrapper, .toplinks ul.tplks { width: 100% !important; max-width: 100%; }
  .toplinks ul.tplks { display: flex; flex-wrap: wrap; }
  .toplinks ul.tplks li { float: none !important; height: auto !important; padding: 0 !important; }
  /* Megamenu collapses to wrap on narrow viewports rather than
     getting cut off at 1260px. */
  nav.plays .wrapper, nav.canada .wrapper, ul.megamenu { width: 100% !important; max-width: 100%; }
  ul.megamenu { display: flex; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  ul.tplks { font-size: 13px; }
  ul.tplks li { padding: 0 !important; }
  ul.tplks li + li::before { height: 20px; margin: 0 2px; }
  ul.tplks li a { min-height: 30px; padding: 0 8px; line-height: 1.15; }
}

/* Logo block sometimes uses width:1040px hard-coded. Let it shrink. */
@media (max-width: 1100px) {
  #Logo, #Logo h1 { width: auto !important; max-width: 100%; }
  #Logo img { max-width: 100%; height: auto; }
}

/* ---------- 5. Legacy multi-column floats: progressive reflow --
   The legacy site uses .three_col_*, .two_col_*, .col4 with
   inline px widths and floats. We respect that on desktop (where
   the page already works) but progressively reflow on smaller
   widths so the same markup adapts fluidly:
     >=1100px: original float layout (legacy widths win)
     <1100px: cap any float to 50% width
     <700px:  stack everything full-width
*/
@media (max-width: 1100px) {
  .three_col_1, .three_col_2, .three_col_3,
  .two_col_1, .two_col_2,
  .col4, .col6 {
    width: auto !important;
    max-width: 50%;
    box-sizing: border-box;
  }
}
@media (max-width: 700px) {
  .three_col_1, .three_col_2, .three_col_3,
  .two_col_1, .two_col_2,
  .col2, .col3, .col4, .col6, .col7,
  .right_news_panel, .left_news_panel {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---------- 6. Large inline-styled image placements ---------- */
/* Many pages use <img width="900" height="..."> directly. We
   already set img{max-width:100%}; this also handles inline
   "width: 900px" style attributes by using attribute selector. */
img[width] { max-width: 100%; height: auto; }

/* ---------- 7. Subscribe-teaser pattern ---------------------- */
/* Pulled out of /deals, /permits, /infrastructure and /people
   teaser views so we don't duplicate ~50 lines of <style> per
   teaser file. Use <div class="se-teaser-page"> as the wrapper. */
.se-teaser-page {
  max-width: var(--c-page-max, 1180px);
  margin: 0 auto;
  padding: 28px 20px 48px;
  font-family: var(--c-font-base, 'Roboto', Arial, Helvetica, sans-serif);
  color: var(--c-color-text, #222);
}
@media (max-width: 1100px) {
  .se-teaser-page { padding: 24px 16px 40px; }
}
@media (max-width: 600px) {
  .se-teaser-page { padding: 18px 12px 32px; }
}
.se-teaser-page h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 6px;
  color: var(--c-color-primary, #03497e);
}
.se-teaser-page .lede {
  color: var(--c-color-text-muted, #444);
  font-size: 15px;
  margin: 0 0 20px;
  line-height: 1.55;
}
.se-teaser-page .recent {
  background: var(--c-color-bg-alt, #f6f8fa);
  border: 1px solid var(--c-color-border, #d6dbe0);
  padding: 16px 20px;
  margin: 18px 0;
}
.se-teaser-page .recent h2 {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 10px;
  color: var(--c-color-primary, #03497e);
  text-transform: uppercase;
}
.se-teaser-page .recent ul { margin: 0; padding: 0 0 0 18px; }
.se-teaser-page .recent li { margin-bottom: 6px; color: var(--c-color-text, #333); }
.se-teaser-page .feature-list { margin: 18px 0 28px; padding-left: 22px; line-height: 1.7; color: var(--c-color-text, #333); font-size: var(--c-fs-base, 15px); }
.se-teaser-page .feature-list li { margin-bottom: 4px; }
.se-teaser-page table.datatable { width: 100%; margin: 12px 0; }
.se-teaser-page .cta {
  background: var(--c-color-bg-elevated, #fff);
  border: 1px solid var(--c-color-border, #d6dbe0);
  padding: 22px;
  text-align: center;
  margin: 22px 0 0;
}
.se-teaser-page .cta .cta-heading { font-weight: bold; font-size: 17px; color: var(--c-color-primary, #03497e); margin: 0 0 6px; }
.se-teaser-page .cta p { margin: 0 0 14px; color: var(--c-color-text-muted, #444); }
.se-teaser-page .cta a.btn {
  display: inline-block;
  background: var(--c-color-primary, #03497e);
  color: var(--c-color-text-onbrand, #fff);
  padding: 10px 24px;
  text-decoration: none;
  font-weight: bold;
  margin: 0 6px;
}
.se-teaser-page .cta a.btn:hover { background: var(--c-color-primary-hover, #023a66); }
.se-teaser-page .cta a.signin { color: var(--c-color-primary, #03497e); text-decoration: underline; margin-left: 14px; }
@media (max-width: 600px) {
  .se-teaser-page { margin: 12px auto 24px; }
  .se-teaser-page h1 { font-size: 22px; }
  .se-teaser-page .cta a.btn, .se-teaser-page .cta a.signin {
    display: block;
    margin: 10px auto;
    text-align: center;
  }
}

/* ---------- 8. Forms / inputs commonly placed in pages ------- */
@media (max-width: 700px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- 9. Footer wrapper -------------------------------- */
@media (max-width: 900px) {
  footer .wrapper, footer .col4, footer .col3, footer .col2 {
    float: none !important;
    width: 100% !important;
    margin: 8px 0 !important;
  }
}

/* ---------- 10. Inline-style override safety net -------------- */
/* The legacy views set hard-coded pixel widths via inline style.
   At narrow viewports we override the most common large widths so
   pages don't horizontal-scroll. Targets containers (div, section,
   nav, header, footer), tables, and select panes — keeps inputs/
   icons/buttons at their authored size on purpose. */
@media (max-width: 1100px) {
  div[style*="width:"], section[style*="width:"], nav[style*="width:"],
  header[style*="width:"], footer[style*="width:"], table[style*="width:"],
  ul[style*="width:"], div[width] {
    max-width: 100% !important;
  }
}
@media (max-width: 700px) {
  /* Phones — be more aggressive: also collapse any inline-styled
     content blocks the legacy markup uses for left/right column floats. */
  div[style*="float:left"], div[style*="float: left"],
  div[style*="float:right"], div[style*="float: right"] {
    float: none !important;
    width: 100% !important;
  }
  /* Megamenu panels often have inline width/left/top — let them flow
     down rather than absolute-positioning at desktop coords. */
  .mm-item-content {
    position: static !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
  .usplay-col {
    width: 50% !important;
    float: left !important;
  }
}

/* ---------- 11. Article body images + iframes ---------------- */
/* Articles include user-uploaded <img width="900" height="..." />
   tags. Already handled by the global rule but reinforce here for
   inside the article container. */
.articles-body img, .articles-body iframe,
#article_content img, #article_content iframe,
.story-content img, .story-content iframe {
  max-width: 100%;
  height: auto;
}

/* ---------- 12. Site-wide search input (header.php) ---------- */
/* The header search bar in includes/header.php uses absolute or
   fixed widths via inline style. On phones it bleeds across into
   the navy nav row below; cap the wrapper, the input, and parent
   layout cells. */
@media (max-width: 900px) {
  #Search, #SearchForm {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    box-sizing: border-box;
  }
  #Sinput {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* The four-col header (logo | nav | search | account) tends to
     pile up. Stack into a single column on phones. */
  header > .wrapper, header > div > .wrapper {
    display: block !important;
  }
  #Logo { float: none !important; display: block; max-width: 220px; margin: 0 auto; }
  #Logo + ul, header ul[id*="nav"] { float: none !important; clear: both; }
}

/* ---------- 12b. News Alerts ribbon — REMOVED in Tier 39 --- */
/* The yellow/orange #EmailSignup ribbon was deleted from the
   homepage view; KPI Activity Monitor panel replaces that surface.
   Hide any stragglers if a cached page still has the markup. */
#EmailSignup { display: none !important; }

/* ---------- 12c. Story image overlay title --------------- */
/* The homepage big-image hero overlays a transparent-dark band
   over the bottom of the image for the headline (.item_wrapper2).
   Inline `width:572px; height:46px` clips multi-line titles on
   phones. Let it grow with content and span the parent. */
.item_wrapper2 {
  background: rgba(0, 0, 0, 0.55) !important;
}
@media (max-width: 900px) {
  .item_wrapper2 {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 46px;
    padding: 8px 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
  }
  .item_wrapper2 h2, .item_wrapper2 h3, .item_wrapper2 h4, .item_wrapper2 a {
    font-size: 16px !important;
    line-height: 1.25 !important;
    color: #fff !important;
    text-decoration: none !important;
    word-break: break-word;
  }
  /* Parent column also has fixed widths */
  #FeatureTop2 .col1 { width: auto !important; max-width: 100% !important; }
}

/* ---------- 12d. Inline navy section heading bar (legacy) ---- */
/* The home/play views emit dozens of these:
     <h3 style="float:left;font-weight:bold;background-color:#03497e;
        height:33px;width:955px;color:#fff;...">SOME TITLE</h3>
   That hard-coded 955px overflows at every viewport <955px. Force
   them to flow inside their parent column at every width and adopt
   the design-token rhythm. Selectors target both the standalone
   color attribute and the float pattern. */
/* Match any element styled with the navy bg color AND a wide pixel
   width (944/950/955/960px etc) — that's the legacy section-bar
   pattern. Narrow elements (badges, chips) keep their authored width. */
[style*="background-color:#03497e"][style*="width:9"],
[style*="background-color: #03497e"][style*="width:9"],
[style*="background-color:#03497e"][style*="width: 9"],
[style*="background-color: #03497e"][style*="width: 9"],
[style*="background-color:#03497E"][style*="width:9"],
[style*="background-color: #03497E"][style*="width:9"] {
  width: auto !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
  height: auto !important;
  min-height: 36px;
  padding: 8px 14px !important;
  margin: var(--c-space-md, 14px) 0 var(--c-space-sm, 8px) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
}
[style*="background-color:#03497e"][style*="width:9"] a,
[style*="background-color: #03497e"][style*="width:9"] a {
  color: #fff !important;
}

/* Same treatment for the "More News" pseudo-bar that uses
   <div class="more" style="background-color:#FFF; width:944px;..."> */
div.more[style*="width:9"],
div.more[style*="width: 9"] {
  width: auto !important;
  max-width: 100% !important;
  margin: var(--c-space-sm, 8px) 0 var(--c-space-md, 16px) !important;
  padding: 10px 0 !important;
  box-sizing: border-box;
}

/* ---------- 12e. Legacy map grid (Play Maps section) --------- */
/* The 2018 Play Maps loop emits repeated `<div id="main_img1">`
   wrappers with floated `<span style="width: 33.3%; ...">` cells
   each holding a 283x270px image. Reflow into a proper CSS grid
   so the maps line up at every width and don't tower-stack. */
#main_img1 {
  display: contents;          /* let the parent .row become the grid */
}
.row:has(> #main_img1) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--c-space-md, 16px);
  margin-top: var(--c-space-md, 16px);
  margin-bottom: var(--c-space-md, 16px);
  padding: 0 var(--c-space-md, 12px);
  background: var(--c-color-bg, #fff) !important;
  float: none !important;
}
#main_img1 > span,
#main_img1 > span[style*="width"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: auto !important;
  float: none !important;
  font-size: var(--c-fs-xs, 12px) !important;
  color: var(--c-color-primary-deep, #03497e) !important;
  font-weight: 700 !important;
}
#main_img1 > span > a > img,
#main_img1 > span img[style*="width:283px"] {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--c-radius-sm, 2px);
  border: 1px solid var(--c-color-border, #d6dbe0);
}
@media (max-width: 800px) {
  .row:has(> #main_img1) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .row:has(> #main_img1) { grid-template-columns: 1fr; }
}

/* ---------- 12g. Legacy nav width cap (#navLeft, ul.main_menu) - */
/* nav.css / screen.css fix #navLeft and ul.main_menu at >600px so
   they overflow narrow viewports. Cap them. */
@media (max-width: 900px) {
  #navLeft, ul.main_menu, nav.main, nav.main .navwrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---------- 12f. Generic .row reset for legacy float layouts -- */
/* Many .row containers from the legacy markup carry an inline
   `style="margin-top:-80px;...padding-left:14px;float:left;"`
   that pulls them OUT of normal flow on phones, causing collisions.
   Cancel float + extreme negative margins below 1100px. */
@media (max-width: 1100px) {
  .row[style*="float:left"], .row[style*="float: left"],
  .row[style*="float:right"], .row[style*="float: right"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .row[style*="margin-top:-"], .row[style*="margin-top: -"] {
    margin-top: var(--c-space-md, 16px) !important;
  }
}

/* ---------- 13. Article detail layout (.story-content) ------- */
/* /articles/<slug> uses a "main column + side rail" layout with
   inline style="width:920px" on the article body and 760px on
   #Right_Content. Reflow them so on tablets/phones the article
   takes full width and the rail moves below. */
@media (max-width: 1100px) {
  #Right_Content, #right_content {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px 0 !important;
  }
  .story-content, .articles-body, #Article_Content, #article_content,
  .article_content, .article-detail {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}
#Article_Content .info {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  /* Many <h1> in article views are styled font-size:36px inline.
     That's too big on a phone. */
  .articles-body h1, .story-content h1, #article_content h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  #Article_Content {
    box-sizing: border-box;
    margin-left: 0 !important;
    padding-left: clamp(16px, 7vw, 30px) !important;
    padding-right: clamp(16px, 7vw, 30px) !important;
  }
  #Article_Content .article_body {
    overflow-wrap: break-word;
  }
  #Article_Content .article_body h1,
  #Article_Content .article_body h1 a {
    width: auto !important;
    max-width: 100% !important;
    font-size: 27px !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word;
  }
  #Article_Content .socialbar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 1.7;
    white-space: normal;
  }
  #Article_Content hr {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
  .articles-body h2, .story-content h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
}

/* ---------- 14. Modal / fancybox inline panes ---------------- */
/* The site uses inline <div id="inline_X" style="width:500px;
   display:none;"> for modal contents. Phones can't fit a 500px
   modal — let CSS shrink them when displayed. */
@media (max-width: 700px) {
  div[id^="inline"][style*="width:"], div[id^="inline_"][style*="width:"] {
    width: 92vw !important;
    max-width: 100% !important;
  }
}

/* ---------- 15. Plays page row layout ------------------------ */
/* /plays/<slug> uses .row blocks with hard-coded widths for the
   M&A / news / capex sections. Stack on phones. */
@media (max-width: 700px) {
  .play_news760, .play_news, .play_news950,
  .row[style*="background"][style*="white"] {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .play_news760 .col4, .play_news .col4 {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ---------- 15b. Sitewide subscribe banner above footer ------ */
/* Replaces inline-styled banner block at top of includes/footer.php */
.se-footer-cta {
  background: linear-gradient(135deg, #084d79 0%, #062a42 100%);
  color: var(--c-color-text-onbrand, #fff);
  text-align: center;
  padding: 18px 15px;
  font-size: 16px;
  font-family: var(--c-font-base, Arial, Helvetica, sans-serif);
  line-height: 1.4;
  border-top: 1px solid rgba(255,255,255,.08);
}
.se-footer-cta a.subscribe {
  display: inline-block;
  color: var(--c-color-text-onbrand, #fff);
  background: var(--c-color-accent, #c8215d);
  padding: 8px 20px;
  margin-left: 12px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 3px;
}
.se-footer-cta a.subscribe:hover { background: var(--c-color-accent-hover, #a31a4d); }
@media (max-width: 600px) {
  .se-footer-cta a.subscribe { display: block; margin: 10px auto 0; max-width: 200px; }
}

/* ---------- 16. Universal footer ----------------------------- */
html { background: #061a24; }

.se-site-footer {
  clear: both;
  width: 100%;
  min-height: 320px;
  padding: 0;
  color: #a9bdc8;
  background:
    radial-gradient(circle at 18% 0%, rgba(21, 87, 118, .55), transparent 32rem),
    linear-gradient(180deg, #0c4056 0%, #071f2c 48%, #061a24 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}

.se-site-footer .wrapper,
.se-site-footer__inner {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 42px 0 54px;
  background: transparent !important;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: 44px;
}

.se-site-footer .fcol1,
.se-site-footer .fcol2,
.se-site-footer .fcol3,
.se-site-footer .fcol4 {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.se-site-footer .fcol1 a img {
  border: 0;
  max-width: 225px;
  height: auto;
}

.se-site-footer h2 {
  margin: 0 0 18px;
  padding: 0;
  color: #d8e6ec;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.se-site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.se-site-footer li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.3;
}

.se-site-footer ul li a,
.se-site-footer a:link,
.se-site-footer a:visited {
  color: #f1aa23;
  text-decoration: none;
}

.se-site-footer ul li a {
  display: inline-block;
  padding: 5px 0;
  border-bottom: 0;
}

.se-site-footer ul li a:hover,
.se-site-footer a:hover {
  color: #ffd073;
  text-decoration: underline;
}

.se-site-footer .copyright {
  max-width: 285px;
  margin-top: 22px;
  color: #93a8b3;
  font-size: 12px;
  line-height: 1.7;
}

.se-site-footer .social_ico {
  width: 18px;
  height: 18px;
  margin: 2px 8px 0 0;
  vertical-align: middle;
}

@media (max-width: 1100px) {
  .se-site-footer .wrapper,
  .se-site-footer__inner {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 30px 42px;
  }
}
@media (max-width: 700px) {
  .se-site-footer .wrapper,
  .se-site-footer__inner {
    width: min(100% - 32px, 520px);
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 34px 0 44px;
  }
  .se-site-footer .fcol1,
  .se-site-footer .fcol2,
  .se-site-footer .fcol3,
  .se-site-footer .fcol4 {
    text-align: center;
  }
  .se-site-footer .copyright { margin-left: auto; margin-right: auto; }
  /* Footer subscribe banner — let the button wrap below the text */
  footer + div, body > div[style*="background:#03497e"][style*="text-align:center"] {
    line-height: 1.5;
  }
  body > div[style*="background:#03497e"][style*="text-align:center"] a {
    display: inline-block;
    margin: 8px 0 0 !important;
  }
}

/* ---------- 17. Forms used on /user/login, /user/plans ------- */
@media (max-width: 700px) {
  form input[type="text"], form input[type="email"], form input[type="password"],
  form input[type="tel"], form select, form textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Login + plans forms tend to set ".form-row { width: 600px }"
     style on a wrapper. */
  .form-row, .form-group, .login-form, .plans-form {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 18. Reusable utility classes --------------------- */
/* Named classes views can opt into instead of inline width:NNNpx.
   Lets us delete inline style attributes incrementally. */
.se-narrow   { max-width: 480px;  margin-left: auto; margin-right: auto; }
.se-medium   { max-width: 720px;  margin-left: auto; margin-right: auto; }
.se-wide     { max-width: 960px;  margin-left: auto; margin-right: auto; }
.se-fullbleed { max-width: 100%; }
.se-text-block { max-width: 65ch; line-height: 1.6; }
.se-card {
  background: var(--c-color-bg-elevated, #fff);
  border: 1px solid var(--c-color-border, #d6dbe0);
  border-radius: var(--c-radius-md, 4px);
  box-shadow: var(--c-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  padding: var(--c-space-md, 16px);
  margin: 12px 0;
}
.se-card h2, .se-card h3 { color: var(--c-color-primary, #03497e); margin-top: 0; }
.se-section-heading {
  background-color: var(--c-color-primary, #03497e);
  color: var(--c-color-text-onbrand, #fff);
  padding: 8px 12px;
  font-size: var(--c-fs-md, 16px);
  font-weight: bold;
  margin: 14px 0 10px;
  line-height: 1.25;
  border-radius: 0;
}
.se-section-heading-extra {
  font-weight: normal;
  font-size: 13px;
  margin-left: 12px;
  color: var(--c-color-text-onbrand-soft, #cfe2f4);
}
.se-section-heading-extra a, .se-section-heading-extra a:visited {
  color: var(--c-color-text-onbrand, #fff);
  text-decoration: underline;
}
.se-button-primary {
  display: inline-block;
  background: var(--c-color-primary, #03497e);
  color: var(--c-color-text-onbrand, #fff);
  padding: 10px 22px;
  text-decoration: none;
  font-weight: bold;
  border: 0;
  cursor: pointer;
}
.se-button-primary:hover { background: var(--c-color-primary-hover, #023a66); color: var(--c-color-text-onbrand, #fff); }
.se-button-secondary {
  display: inline-block;
  background: var(--c-color-bg, #fff);
  color: var(--c-color-primary, #03497e);
  border: 1px solid var(--c-color-primary, #03497e);
  padding: 9px 21px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}
.se-button-secondary:hover { background: var(--c-color-primary-tint, #f0f4f8); }

/* ---------- 18b. Login / forgot-password / reset card -------- */
/* Used by user/views/{login,forgotpassword*,resetpassword,
   successfully_change}.php — replaces the duplicated inline
   "width:500px; margin:0 auto; margin-top:40px" wrapper. */
.se-auth-card {
  width: 500px;
  max-width: 100%;
  margin: 40px auto;
  padding: 24px;
  background: var(--c-color-bg-elevated, #fff);
  border: 1px solid var(--c-color-border, #d6dbe0);
  border-radius: var(--c-radius-md, 4px);
  box-shadow: var(--c-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.se-auth-card h1, .se-auth-card h2 {
  color: var(--c-color-primary, #03497e);
  font-size: 22px;
  margin: 0 0 14px;
}
.se-auth-card label {
  display: block;
  font-weight: bold;
  margin: 10px 0 4px;
  color: var(--c-color-text, #333);
}
.se-auth-card input[type="text"],
.se-auth-card input[type="email"],
.se-auth-card input[type="password"],
.se-auth-card select, .se-auth-card textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-color-border-strong, #c0c6cc);
  font-size: 14px;
  font-family: inherit;
}
.se-auth-card .form-actions {
  margin-top: 18px;
}
.se-auth-card .form-error {
  color: var(--c-color-error-fg, #b91c1c);
  font-size: 13px;
  margin: 6px 0;
}
@media (max-width: 600px) {
  .se-auth-card { margin: 20px 12px; padding: 18px; }
}

/* ---------- 19. Utility helpers controllers/views can use ---- */
.se-hide-desktop { display: none !important; }
@media (max-width: 700px) {
  .se-hide-mobile { display: none !important; }
  .se-hide-desktop { display: block !important; }
}
@media (max-width: 700px) {
  .se-stack-mobile > * {
    float: none !important;
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =============================================================
   Tier 44 — module sweep (deals, permits, infrastructure, news,
   articles, wellactivity, wellcompletions, company, plays).
   Adds responsive coverage for inline-style patterns the
   homepage rules didn't already catch.
   ============================================================= */

/* ---------- 20. Two-column inline-style reflow --------------- */
/* Many module index views render side-by-side charts/tables as:
     <div class="two_col_1" style="margin-top:-13px; width:47%;">
     <div class="two_col_2" style="margin-top:-13px; width:48%;">
   Section 5 already reflows naked .two_col_*, but inline `width`
   wins over class rules. Force the override even when the inline
   style is present. Also kill the small negative margin-top that
   pulls the second pair into the first on narrow viewports. */
@media (max-width: 1100px) {
  div.two_col_1[style], div.two_col_2[style] {
    width: 48% !important;
    max-width: 48% !important;
    box-sizing: border-box;
  }
}
@media (max-width: 700px) {
  div.two_col_1[style], div.two_col_2[style] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* The inline `margin-top:-13px` (and related negative-margin
     overlays) collide once stacked. Reset them. */
  div.two_col_1[style*="margin-top:-"], div.two_col_2[style*="margin-top:-"],
  div.two_col_1[style*="margin-top: -"], div.two_col_2[style*="margin-top: -"] {
    margin-top: 8px !important;
  }
}

/* ---------- 21. Right_Content / Left_Content / Right_Sidebar - */
/* permits, wellactivity, wellcompletions, company, news views
   wrap the main listing in:
     <div id="Right_Content" style="width:77%; float:left; ...">
     <div id="Right_Content" style="width: 950px;">
     <div id="Right_Sidebar" style="width:700px;">
     <div id="Left_Content" style="width:250px;">
   Section 13 already handled #Right_Content for /articles, but
   only for the article-detail layout. Generalize: at narrow
   viewports, drop the float and let them flow full-width. */
@media (max-width: 1100px) {
  #Right_Content, #right_content, #Right_Sidebar, #right_sidebar,
  #Left_Content, #left_content {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- 22. Negative margin-top inline overrides --------- */
/* permits/wellactivity index views use:
     <div id="standrad_search" style="margin-top:-32px; padding:15px;">
     <div class="permits_map" style="margin-top:-50px;">
   These pull the section UP by 30-50px to overlap with a banner
   above. On phones that banner has stacked vertically and the
   negative margin punches the search box into the prior row. */
@media (max-width: 1100px) {
  #standrad_search[style*="margin-top:-"],
  #standrad_search[style*="margin-top: -"],
  .permits_map[style*="margin-top:-"],
  .permits_map[style*="margin-top: -"] {
    margin-top: 12px !important;
  }
}

/* ---------- 23. Highcharts/echarts containers with min-width - */
/* permits/index.php has 8 chart divs hard-coding
     style="height:420px; min-width:990px"
   That min-width forces page horizontal scroll on every viewport
   <990px. Strategy: at <=900px, drop min-width and let the chart
   library re-render at the container width. The chart divs are
   ID'd — match the common naming pattern. */
@media (max-width: 900px) {
  div[id$="_chart"][style*="min-width:9"],
  div[id$="_chart"][style*="min-width: 9"],
  div[id$="_chart"][style*="min-width:1"],
  div[id$="_chart"][style*="min-width: 1"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Highcharts default container — same treatment. */
  div#container[style*="min-width:"], div#Piecontainer[style*="min-width:"],
  div#barcontainer[style*="min-width:"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 24. Articles socialbar (print/email/share) ------- */
/* articles/views/articles*.php repeats:
     <div class="socialbar" style="width:610px;">
   That fixed 610px width pushes the row beyond the article column
   on phones. Allow it to fit the parent. */
.socialbar[style*="width:610"], .socialbar[style*="width: 610"] {
  max-width: 100% !important;
}
@media (max-width: 700px) {
  .socialbar { width: 100% !important; max-width: 100% !important; }
  .socialbar a { display: inline-block; margin: 4px 6px 4px 0; }
}

/* ---------- 25. Inline-styled `.wrapper` width override ------ */
/* Section 2 defines .wrapper { width: auto !important; ... } but
   browsers honor inline style over external stylesheets without
   !important on each property. Inline `style="width:1030px"` would
   normally lose to !important, but some legacy markup uses
   `style="background-color:white;width:1050px"` on the wrapper.
   Section 2 already wins for width — verify by adding an explicit
   override for the most common values. */
.wrapper[style*="width:10"], .wrapper[style*="width: 10"],
.wrapper[style*="width:9"], .wrapper[style*="width: 9"] {
  width: auto !important;
  max-width: 1180px !important;
}

/* ---------- 26. .row inline width hard-codes ----------------- */
/* company/views/people.php and several plays views use
     <div class="row" style="margin-bottom:5px; width:1030px;">
   Section 12f only canceled .row inline FLOAT/negative-margin —
   add width override too. */
@media (max-width: 1100px) {
  .row[style*="width:10"], .row[style*="width: 10"],
  .row[style*="width:9"], .row[style*="width: 9"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 27. Tall <td style="width:NNNpx"> in detail tables - */
/* wellcompletions/views/details.php emits dozens of
     <td style="width:170px;"> / <td style="width:120px;">
   Inside table.datatable our existing rules already wrap text
   on <=600px, but the inline width still constrains the column.
   Drop the cell inline width when scrolled. */
@media (max-width: 600px) {
  table.datatable td[style*="width:1"], table.datatable td[style*="width: 1"],
  table.datatable th[style*="width:1"], table.datatable th[style*="width: 1"] {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ---------- 28. Subscribe-Now button graphic ----------------- */
/* deals/permits/infrastructure all emit:
     <div><div style="float:left;"><a><img src="...Subscribe-Now-Button.PNG"></a></div>
   Float wraps it tight to the prior block; on phones, center it. */
@media (max-width: 700px) {
  div > div[style*="float:left"] > a > img[src*="Subscribe-Now-Button"],
  div > div[style*="float: left"] > a > img[src*="Subscribe-Now-Button"] {
    display: block;
    margin: 12px auto;
  }
  div[style*="float:left"]:has(> a > img[src*="Subscribe-Now-Button"]),
  div[style*="float: left"]:has(> a > img[src*="Subscribe-Now-Button"]) {
    float: none !important;
    text-align: center;
  }
}

/* ---------- 29. Header/nav responsive polish ---------------- */
/* Keep the legacy header structure but make the logo/account/search
   block behave like a fluid layout instead of two fixed-width floats. */
header .wrapper {
  width: auto !important;
  max-width: var(--c-page-max, 1180px) !important;
  padding-left: var(--c-page-gutter, clamp(12px, 2.5vw, 24px)) !important;
  padding-right: var(--c-page-gutter, clamp(12px, 2.5vw, 24px)) !important;
  display: block !important;
  position: relative;
}
header .wrapper #Logo {
  flex: none !important;
  min-width: 0 !important;
}
#Logo h1,
#Logo h1 a {
  display: block !important;
}
#Logo img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}
#HeaderRight {
  float: right !important;
  flex: none !important;
  width: min(440px, 100%) !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#Account {
  font-family: var(--c-font-base, Arial, Helvetica, sans-serif) !important;
  letter-spacing: 0.02em;
}
#Account ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0 4px !important;
}
#Account ul li {
  float: none !important;
}
#Account ul li a {
  border-radius: 3px;
}
#Search {
  float: right !important;
  width: 100% !important;
  max-width: 400px !important;
  margin-left: 0 !important;
}
#SearchForm {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
}
#Search #Sinput {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 0 10px !important;
}
#Search #Ssubmit {
  flex: 0 0 42px !important;
  height: 24px !important;
  min-height: 24px !important;
}
nav.plays .wrapper {
  height: auto !important;
  width: auto !important;
}
nav.plays .megamenu {
  max-width: 100% !important;
}

/* ---------- 29a. "BACK TO" logo + page-database header ------- */
/* The /permits, /rigs, /completions, /deals, /infrastructure, /pe,
   /oilfield-water headers each emit:
     <div id="Logo">
       <h1><a>BACK TO + <img logo></a></h1>
       <span style="font-size:32px; margin-left:225px;">
         <a>US Permit Database</a></span>
     </div>
   The hard-coded margin-left:225px was meant to clear the floated
   logo on a 1180px desktop. On every narrower viewport (and even
   at desktop when the logo image renders slightly differently) the
   page-title overlaps the logo or escapes the float. Promote #Logo
   to a flex row, drop the inline margin, and clamp the title font
   so it scales from the 32px desktop down to a readable mobile size.
   Targets the inline style attribute directly so it wins specificity
   without touching the seven copies of header*.php. */
#Logo {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--c-space-md, 14px) !important;
  padding-top: 8px !important;
}
#Logo > h1 { margin: 0 !important; flex: 0 0 auto; }
#Logo > span[style*="font-size: 32px"],
#Logo > span[style*="font-size:32px"],
#Logo > span[style*="margin-left: 225px"],
#Logo > span[style*="margin-left:225px"] {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(18px, 2.6vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
#Logo > span[style*="font-size: 32px"] a,
#Logo > span[style*="font-size:32px"] a,
#Logo > span[style*="margin-left: 225px"] a,
#Logo > span[style*="margin-left:225px"] a {
  color: #fff !important;
  text-decoration: none !important;
}
@media (max-width: 700px) {
  #Logo {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  #Logo > span[style*="font-size: 32px"],
  #Logo > span[style*="font-size:32px"],
  #Logo > span[style*="margin-left: 225px"],
  #Logo > span[style*="margin-left:225px"] {
    font-size: 18px !important;
    white-space: normal;
  }
}

@media (max-width: 700px) {
  .toplinks {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toplinks::-webkit-scrollbar { display: none; }
  .toplinks ul.tplks {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100%;
  }
  header .wrapper {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
  #Logo {
    flex: 0 0 auto !important;
    width: min(280px, 100%) !important;
    padding-top: 0 !important;
    margin: 0 auto !important;
  }
  #HeaderRight {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #Account {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  #Account ul {
    justify-content: center !important;
    gap: 2px 4px !important;
  }
  #Account ul li a {
    padding: 6px 7px 5px !important;
  }
  #Search {
    float: none !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
    margin: 8px auto 0 !important;
    align-self: center !important;
  }
  #SearchForm {
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    min-height: 32px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    padding-right: 4px !important;
  }
  #Search #Sinput {
    flex: none !important;
    width: 100% !important;
    height: 26px !important;
  }
  #Search #Ssubmit {
    position: static !important;
    width: 42px !important;
    height: 26px !important;
    background-color: #d99000 !important;
  }
  nav.plays {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.plays::-webkit-scrollbar { display: none; }
  nav.plays .wrapper {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  nav.plays .megamenu {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    white-space: nowrap !important;
  }
  nav.plays .mm-item {
    float: none !important;
    flex: 0 0 auto !important;
  }
  nav.plays a.mm-item-link {
    padding: 10px 11px !important;
    line-height: 1.1 !important;
  }
}

/* ---------- 30. Homepage refresh containment ---------------- */
/* The homepage now has a small class hook so we can modernize its
   above-the-fold layout without changing the many legacy pages that
   reuse .row/.col1/.col3 names. */
#content.home-refresh {
  margin-top: 0 !important;
  padding: clamp(18px, 3vw, 32px) 0 44px;
}
#content.home-refresh > .wrapper.home-refresh__lead {
  background: var(--c-color-bg-elevated, #ffffff) !important;
  border: 1px solid rgba(3, 73, 126, 0.10);
  border-radius: var(--c-radius-lg, 8px);
  box-shadow: var(--c-shadow-xl, 0 10px 28px rgba(3, 39, 70, 0.10));
  padding: clamp(14px, 2vw, 20px) !important;
}
.home-refresh .c-kpi-panel {
  margin: 0 0 10px !important;
  border-radius: var(--c-radius-lg, 8px);
}
.home-refresh .c-home-indicators {
  margin: 0 0 16px;
  border-color: rgba(3, 73, 126, 0.12);
}
.home-refresh .c-home-indicators__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: stretch;
}
.home-refresh .c-home-indicators__table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-color-card-border, #d8e3ec);
  border-radius: var(--c-radius-sm, 3px);
  overflow: hidden;
  font-size: 14px;
  background: var(--c-color-bg-elevated, #ffffff);
}
.home-refresh .c-home-indicators__table th {
  color: var(--c-color-primary-deep, #061f38);
  background: linear-gradient(180deg, #ffffff, #f5f8fb);
  border-bottom: 2px solid var(--c-color-primary, #03497e);
  font-weight: 900;
  text-align: left;
  padding: 9px 10px;
  white-space: nowrap;
}
.home-refresh .c-home-indicators__table td {
  padding: 9px 10px;
  border-top: 1px solid var(--c-color-border, #e2e8ef);
  line-height: 1.25;
}
.home-refresh .c-home-indicators__table tr:nth-child(even) td {
  background: rgba(3, 73, 126, 0.035);
}
.home-refresh .c-home-indicators__up {
  color: #0f7a35;
  font-weight: 800;
}
.home-refresh .c-home-indicators__down {
  color: #b42318;
  font-weight: 800;
}
.home-refresh .c-home-indicators__neutral {
  color: var(--c-color-text-muted, #5c6f82);
  font-weight: 700;
}
.home-refresh #FeatureTop2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  gap: 22px;
  align-items: start;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 0 !important;
  background: transparent !important;
}
.home-refresh #FeatureTop2 > br,
.home-refresh #FeatureTop2 > .clear {
  display: none !important;
}
.home-refresh #FeatureTop2 .col1,
.home-refresh #FeatureTop2 .col3 {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.home-refresh #FeatureTop2 .col1 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-refresh #FeatureTop2 .col1 > br,
.home-refresh #FeatureTop2 .col1 > .clear {
  display: none !important;
}
.home-refresh #FeatureTop2 .col1 > .image,
.home-refresh #FeatureTop2 .col1 > .item_wrapper2 {
  grid-column: 1 / -1;
}
.home-refresh #FeatureTop2 .col1 > .image {
  width: 100% !important;
  height: auto !important;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: var(--c-color-primary-deep-2, #04192d);
}
.home-refresh #FeatureTop2 .col1 > .image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.home-refresh #FeatureTop2 .item_wrapper2 {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 58px;
  margin: -58px 0 0 !important;
  padding: 12px 14px !important;
  background: linear-gradient(180deg, rgba(4, 18, 32, 0.15), rgba(4, 18, 32, 0.84)) !important;
  box-sizing: border-box !important;
}
.home-refresh #FeatureTop2 .item_wrapper2 h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--c-font-base, Arial, Helvetica, sans-serif);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 500;
  line-height: 1.15;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.home-refresh #FeatureTop2 .item_wrapper2 h4 a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.home-refresh #FeatureTop2 .col1 > div[style*="width:196px"],
.home-refresh #FeatureTop2 .col1 > div[style*="width: 196px"] {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: var(--c-color-bg-elevated, #ffffff);
  border: 1px solid var(--c-color-card-border, #d8e3ec);
  border-radius: var(--c-radius-md, 4px);
  overflow: hidden;
}
.home-refresh #FeatureTop2 .col1 > div[style*="width:196px"] .image,
.home-refresh #FeatureTop2 .col1 > div[style*="width: 196px"] .image {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  background: var(--c-color-bg-alt, #f2f6fa);
}
.home-refresh #FeatureTop2 .col1 > div[style*="width:196px"] img,
.home-refresh #FeatureTop2 .col1 > div[style*="width: 196px"] img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.home-refresh #FeatureTop2 .item_wrapper21 {
  width: auto !important;
  height: auto !important;
  min-height: 72px;
  margin: 0 !important;
  padding: 10px !important;
  line-height: 1.22 !important;
  background: var(--c-color-bg-elevated, #ffffff) !important;
  box-sizing: border-box !important;
}
.home-refresh #FeatureTop2 .item_wrapper21 h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--c-font-base, Arial, Helvetica, sans-serif);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.home-refresh #FeatureTop2 .item_wrapper21 h4 a {
  color: var(--c-color-primary-deep, #061f38) !important;
}
.home-refresh #FeatureTop2 .col3 {
  background: var(--c-color-bg-elevated, #ffffff);
  border: 1px solid var(--c-color-card-border, #d8e3ec);
  border-radius: var(--c-radius-md, 5px);
  box-shadow: var(--c-shadow-md, 0 8px 20px rgba(3, 39, 70, 0.08));
  padding: 18px !important;
}
.home-refresh #FeatureTop2 .col3 h1 {
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  color: var(--c-color-primary-deep, #061f38) !important;
  border-bottom: 3px solid var(--c-color-accent-gold, #d99000);
  font-family: var(--c-font-base, Arial, Helvetica, sans-serif);
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: 900;
  line-height: 1.1;
}
.home-refresh #FeatureTop2 .col3 table.datatable {
  width: 100% !important;
  margin: 0 0 16px !important;
  border: 1px solid var(--c-color-card-border, #d8e3ec);
  border-collapse: collapse;
  font-size: 13px;
}
.home-refresh #FeatureTop2 .col3 table.datatable:last-child {
  margin-bottom: 0 !important;
}
.home-refresh #FeatureTop2 .col3 table.datatable th {
  background: var(--c-color-bg-elevated, #ffffff) !important;
  color: var(--c-color-primary-deep, #061f38) !important;
  border-bottom: 2px solid var(--c-color-primary, #03497e) !important;
  font-weight: 900;
  padding: 8px 9px !important;
}
.home-refresh #FeatureTop2 .col3 table.datatable td {
  padding: 8px 9px !important;
  border-top: 1px solid var(--c-color-border, #e2e8ef);
  line-height: 1.25;
}

@media (max-width: 960px) {
  #content.home-refresh > .wrapper.home-refresh__lead {
    border-radius: 0;
  }
  .home-refresh #FeatureTop2 {
    grid-template-columns: 1fr;
  }
  .home-refresh .c-home-indicators__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  #content.home-refresh {
    padding-top: 16px;
  }
  #content.home-refresh > .wrapper.home-refresh__lead {
    padding: 0 !important;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .home-refresh .c-kpi-panel {
    border-radius: 0;
    margin-bottom: 14px !important;
  }
  .home-refresh .c-home-indicators {
    margin: 0 14px 16px;
    padding: 14px;
  }
  .home-refresh .c-home-indicators__grid {
    overflow-x: auto;
  }
  .home-refresh .c-home-indicators__table {
    min-width: 0;
    font-size: 13px;
  }
  .home-refresh .c-home-indicators__table th,
  .home-refresh .c-home-indicators__table td {
    padding: 8px;
    white-space: normal;
  }
  .home-refresh #FeatureTop2 {
    gap: 16px;
    padding: 0 14px;
  }
  .home-refresh #FeatureTop2 .col1 {
    grid-template-columns: 1fr;
  }
  .home-refresh #FeatureTop2 .item_wrapper2 {
    margin: -64px 0 0 !important;
    min-height: 64px;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(4, 18, 32, 0.08), rgba(4, 18, 32, 0.92)) !important;
  }
  .home-refresh #FeatureTop2 .item_wrapper2 h4 {
    font-size: 18px;
    line-height: 1.2;
  }
  .home-refresh #FeatureTop2 .col3 {
    padding: 14px !important;
  }
  .home-refresh #FeatureTop2 .col3 table.datatable {
    display: table;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }
  .home-refresh #FeatureTop2 .col3 table.datatable th,
  .home-refresh #FeatureTop2 .col3 table.datatable td {
    white-space: normal;
  }
}