/* =============================================================
   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 {
  /* The legacy listing templates lay their columns out with float:left and never
     clear them -- /news floats two blocks 2,212px and 1,845px tall. Without this
     the CTA is last in the DOM (97% of the way through the document) but renders
     at y=610, straight through the middle of the article list, on the page this
     release most wants people to read and share. Measured on staging: y=610 ->
     y=2708, below the last article at y=2544. */
  clear: both;
  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;
}
/* h2 is listed alongside h1 because the "Key Industry Indicators" title in
   frontend/views/index.php was demoted to h2 (the homepage's single h1 is the
   Activity Monitor at the top of the column). Every metric that title renders
   with comes from this rule, so both tags have to match it or the box moves.
   text-transform is declared for the same reason and is the one property that
   was NOT already here: screen.css's bare `h2` rule sets uppercase and its
   (absent) `h1` rule did not, so without this the demotion would have shouted
   a title that used to be in sentence case. Measured before and after: 332x37
   at 22px/24.2px, weight 900, rgb(6,39,70), 3px gold underline. */
.home-refresh #FeatureTop2 .col3 h1,
.home-refresh #FeatureTop2 .col3 h2 {
  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;
  text-transform: none;
}
.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;
  }
}

/* The paywall and upgrade prompts used to be <h1>, which gave a gated article
   three top-level headings -- the real headline plus "To continue reading....."
   and "Click here to subscribe". They are calls to action, not headings. The tag
   changed to a div; these declarations replay what the h1 default supplied so
   the rendering is unchanged. */
.se-paywall-cta { font-weight: bold; line-height: 55px; margin: 0; }

/* Same treatment for the /videos masthead logo (videos/views/video.php): it
   was an <h1> wrapping an image, i.e. the page's only top-level heading had no
   words in it. Now a div, and these two declarations are what `#Logo h1` and
   `#Logo h1 a` above supplied -- the anchor has to stay block so the block
   image inside it does not gain an inline line box, and the flex basis keeps
   the mark from stretching inside #Logo's flex row. */
#Logo > .se-video-logo,
#Logo > .se-video-logo a { display: block; }
#Logo > .se-video-logo { margin: 0; padding: 0; flex: 0 0 auto; width: auto; max-width: 100%; }

/* ---------- Listing filter forms on narrow viewports ---------------
   The /news and /epnews filter is a legacy <table> declaring
   width:395px whose cells render to 754px of real content -- three
   columns of selects side by side. In a 390px viewport that puts the
   Search button at x=687, and because html,body carry
   overflow-x:hidden (above) the overflow is CLIPPED rather than
   scrollable, so the button is not merely awkward, it is unreachable.
   A visitor arriving from social on a phone cannot filter at all.

   Stack the cells below 760px. Desktop is untouched -- the legacy
   float layout above this breakpoint already works. The inline
   margin-left:100px on the buttons has to be overridden explicitly
   because it is set on the element. */
@media (max-width: 760px) {
  form[name="company_search"] table,
  form[name="company_search"] tbody,
  form[name="company_search"] tr,
  form[name="company_search"] td {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }
  form[name="company_search"] td { padding: 5px 0; }
  form[name="company_search"] select,
  form[name="company_search"] input[type="text"],
  form[name="company_search"] .fcbkcomplete_holder,
  form[name="company_search"] ul.holder {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  form[name="company_search"] input[type="submit"],
  form[name="company_search"] input[type="button"],
  form[name="company_search"] .buttonss {
    margin-left: 0 !important;
    margin-top: 8px !important;
    margin-right: 8px !important;
  }
}