/* ─────────────── CSS rev‑4: fix mobile full‑bleed + kill inline max‑width wrappers ─────────────── */

/***** Design Tokens *****/
:root {
  --page-padding: 20px;   /* desktop default */

  /* Brand & accent */
  --brand-primary:    #0d47a1;
  --brand-primary-hi: #1976d2;
  --brand-accent:     #f9a825;   /* gold — primary conversion CTA */
  --brand-accent-ink: #1a1a1a;

  /* Semantic */
  --success:       #137333;
  --success-bg:    #e6f4ea;
  --danger:        #d93025;
  --danger-bg:     #fce8e6;
  --warning:       #b56b00;
  --warning-bg:    #fff8e1;

  /* Surfaces */
  --bg-page:       #f4f6f8;
  --bg-card:       #ffffff;
  --bg-soft:       #f9fbff;
  --border-light:  #e0e0e0;
  --border-muted:  #cbd6e2;
  --text-strong:   #1a1a1a;
  --text-body:     #333333;
  --text-muted:    #666666;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,.10);
  --shadow-cta: 0 2px 6px rgba(249,168,37,0.35);
}
@media (max-width: 992px) { :root { --page-padding: 16px; } }
@media (max-width: 480px) { :root { --page-padding: 12px; } }

/***** Base Styles *****/
html { scroll-behavior: smooth; scroll-padding-top: 175px; }
body {
  font-family: "Segoe UI", sans-serif;
  margin: 0;
  padding: var(--page-padding);
  background: #f4f6f8;
  color: #333;
  box-sizing: border-box;
}

/* All elements respect box‑sizing & never escape viewport */
*, *::before, *::after { box-sizing: border-box; }      /* no width clamp */
img, video, iframe  { max-width:100%; height:auto; display:block; }

/***************************** HEADER *****************************/
.sticky-header{
  position: sticky;
  top: 0;
  left: 0;            /* new */
  right: 0;           /* new */
  width:100%;     /* fills viewport regardless of body padding */
  max-width: none;    /* make sure #1 never bites us again       */
  margin: 0;          /* negative margins no longer needed       */
  padding: 10px var(--page-padding);
  z-index: 1000;
  background:#fff;
  border-bottom:1px solid #ddd;
  box-shadow:0 2px 6px rgba(0,0,0,.17);
}

/* ─────────────── Top Bar ─────────────── */
.top-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%;
}
.site-logo { height: 40px; }

/***** Search Bar *****/
.search-container {
  position: relative; flex: 1 1 240px; max-width: 100%; z-index: 2000;
}
#symbolSearch { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; }
#searchResults { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ccc; border-top: none; z-index: 2000; display: none; }
#searchResults div { padding: 8px; cursor: pointer; }
#searchResults div:hover { background: #f0f0f0; }

/* ────────── Mobile-first overflow + full-bleed helpers ────────── */

/* A) Let the nav-button row scroll horizontally instead of shrinking */
.section-links{
  overflow-x:auto;           /* enable swipe-scroll */
  white-space:nowrap;        /* keep buttons on one line if needed */
}

/* B) Kill any framework/inline .container max-width on small screens */
@media (max-width:768px){
  .container{
    max-width:100% !important;
    width:100%    !important;
    padding-left:var(--page-padding)  !important;
    padding-right:var(--page-padding) !important;
  }
}

/* C) Make wide tables friendly on touch devices */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}


/***************************** NAV LINKS ROW *****************************/
.symbol-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 15px 20px;
  padding: 12px var(--page-padding);
  background: #eaf3ff;
  border-top: 1px solid #cbd6e2; border-bottom: 1px solid #cbd6e2;
}
.section-links { display: flex; flex-wrap: wrap; gap: 12px; }
.section-links a { text-decoration: none; color: #007acc; font-weight: 500; }
.section-links a:hover { text-decoration: underline; }

/***************************** SCROLLING BANNER *****************************/
.scroll-banner { overflow: hidden; white-space: nowrap; position: relative; width: 100%; }
.scroll-track  { display: inline-block; white-space: nowrap; animation: scroll-loop 60s linear infinite; }
.scroll-banner:hover .scroll-track { animation-play-state: paused; }
@keyframes scroll-loop { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/***************************** DATA TABLE *****************************/
.table-scroll {
  overflow-x: auto; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 0 6px rgba(0,0,0,0.05);
  margin-bottom: 10px; -webkit-overflow-scrolling: touch; width: 100%;
}
.data-table { width: 100%; border-collapse: collapse; min-width: max-content; }
.data-table th, .data-table td { padding: 6px 7px; border: 1px solid #e0e0e0; text-align: right; white-space: nowrap; }
.data-table tr:nth-child(even) { background: #fcfcfc; }
.data-table thead { background: #f9fafb; }
.data-table td:first-child, .data-table th:first-child { position: sticky; left: 0; background: #fff; font-weight: bold; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }

/* Shrink font on very small screens */
@media (max-width: 480px) { .data-table th, .data-table td { font-size: 0.8rem; padding: 5px 6px; word-break: break-word; } }

/***************************** UTILITIES *****************************/
.debug { color: red; font-weight: bold; margin: 10px 0; }
.symbol-name { font-weight: bold; margin-bottom: 5px; }
.hide-mobile { display: none !important; }

/***************************** BREAK OUT INLINE MAX‑WIDTH WRAPPERS *****************************/
/* Some pages wrap content in inline‑styled <div style="max-width:700px">
   This rule removes that cap on mobile so the layout can breathe.
   Exception: elements inside a modal overlay (fixed, dim background) keep their
   max-width + rounded corners so they stay visually a card, not edge-to-edge. */
@media (max-width: 768px) {
  div[style*="max-width" i]:not([style*="position:fixed" i] *):not([style*="position: fixed" i] *) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    padding-left: var(--page-padding) !important;
    padding-right: var(--page-padding) !important;
  }
}

/* Modal panels: keep card appearance on mobile, just shrink margins */
@media (max-width: 600px) {
  div[style*="position:fixed" i] > div,
  div[style*="position: fixed" i] > div {
    margin: 10% auto !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    border-radius: 10px !important;
    padding: 18px !important;
  }
}


/* ---------- Navigation visibility by screen size ----------------- */

/* Base – everything (desktop first) */
#mobileMenu            { display:flex;  flex-direction:row;  gap:12px; }
.mobile-menu-toggle    { display:none;  }               /* hide ☰ by default */

/* Mobile overrides */
@media (max-width:768px){
  #mobileMenu          { display:none;  flex-direction:column; gap:8px; width:100%;
                         background:#fff; padding:var(--page-padding); border-top:1px solid #ddd; }
  #mobileMenu.open     { display:flex; }                /* show when toggled */
  .mobile-menu-toggle  { display:block;  font-size:1.6rem; margin-left:auto;
                         background:none; border:0; cursor:pointer; }
}


/* Shared button look */
.nav-link{
  padding:6px 14px;
  border-radius:6px;
  font-weight:bold;
  text-decoration:none;
}

/* Individual colours – all now AA-compliant */
.nav-home     { background:#212529; color:#fff; }  /* Dark Slate */
.nav-super30,
.nav-reg      { background:#f9a825; color:#000; }  /* Amber */
.nav-results  { background:#ff7043; color:#fff; }  /* Deep Orange */
.nav-screen   { background:#198754; color:#fff; }  /* Green */
.nav-port     { background:#6f42c1; color:#fff; }  /* Purple */
.nav-refer    { background:#0d6efd; color:#fff; }  /* Blue */
.nav-login    { background:#17a2b8; color:#000; }  /* Teal */
.nav-profile  { background:#ffc107; color:#000; }  /* Yellow (Profile) */
.nav-logout   { background:#dc3545; color:#fff; }  /* Red */

.nav-link:hover,
.nav-link:focus { filter: brightness(1.08); }

/* APK link styling */
.nav-link.nav-apk {
  background: #28a745;      /* Green */
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
  display: inline-block;
  margin-left: 6px;
}
.nav-link.nav-apk:hover {
  background: #218838;      /* Darker green on hover */
}

/* YouTube link styling */
.nav-link.nav-youtube {
  background: #c4302b;      /* YouTube red */
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
  display: inline-block;
  margin-left: 6px;
}
.nav-link.nav-youtube:hover {
  background: #a52a23;      /* Darker red on hover */
}

/* Make all nav buttons consistent height */
#mobileMenu .nav-link {
  line-height: 1.4;
}


/* ——— Mobile dropdown should overlay, not push ——————————————— */
@media (max-width:768px){

  /* anchor for absolutely-positioned menu */
  .top-bar{
      position: relative;       /* new */
      flex-wrap: nowrap;        /* already there but keep for clarity */
  }

  /* hidden by default, sits just below the bar */
  #mobileMenu{
      position: absolute;       /* take it *out* of the flex row   */
      top: 100%;                /* 0 = top of .top-bar, 100% = bottom */
      left: 0;
      right: 0;
      display: none;            /* closed */
      flex-direction: column;
      gap: 8px;
      background: #fff;
      padding: var(--page-padding);
      border-top: 1px solid #ddd;
      z-index: 999;             /* above page content */
  }
  #mobileMenu.open{ display:flex; }   /* show when toggled */
}


/* ─────────────── Trendlyne widgets – mobile wrap ─────────────── */
@media (max-width: 768px) {          /* tweak 768 px if you prefer */
  .widgets-table tr { 
    display: flex;                   /* replace table-layout      */
    flex-wrap: wrap;                 /* allow wrapping            */
  }

  .widgets-table td {                /* each cell fills full line */
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;          /* keep padding inside width */
    padding: 1px 0;                  /* slightly tighter spacing  */
  }

  .widgets-table td:first-child { flex: 1 1 100%; }   /* full width  */
  .widgets-table td:nth-child(2),
  .widgets-table td:nth-child(3) { flex: 1 1 50%; }   /* 2-up layout */

}


/* Apply full borders to all Insights table cells */
.Insights-table th,
.Insights-table td {
  border: 1px solid #ccc !important;
}

/* ── Keep Insights table as real table on phones ─────────────── */
@media (max-width: 600px) {
  /* 1) Use auto layout so columns size to content */
  .Insights-table {
    table-layout: auto !important;
  }
  /* 2) Ensure we're back to real table rows, not flex */
  .Insights-table tr {
    display: table-row !important;
  }
  /* 3) Default: no wrapping in any cell */
  .Insights-table td {
    white-space: nowrap !important;
  }
  /* 4) Exception: first cell can wrap and break words */
  .Insights-table td:first-child {
    white-space: normal !important;       /* allow wrap at whitespace */
    word-break: normal !important;        /* don't break mid-word */
    overflow-wrap: normal !important;     /* only wrap at normal break points */
  }
}




/* hide white card on phones */
@media (max-width: 600px){
  .Insights-box{
    background: transparent !important; /* no white block      */
    border: none !important;            /* optional—remove frame*/
    box-shadow: none !important;        /* optional—no shadow   */
  }
}

/* ───────── Rolling Returns – mobile wrap ───────── */
@media (max-width: 600px) {          /* tweak breakpoint if needed */
  .rolling-table tr{
    display: flex;                   /* turn the single row into flex */
    flex-wrap: wrap;                 /* allow wrapping to new lines  */
    justify-content: center;         /* nicer centring               */
  }

  /* every period cell */
  .rolling-table td{
    flex: 1 1 45%;                   /* two cells per line (≈50%)    */
    min-width: 130px;                /* never shrink below this      */
    box-sizing: border-box;          /* padding inside the width     */
    margin: 4px 0;                   /* small vertical gap           */
    text-align: center;              /* keep original alignment      */
  }

  /* first cell ("📊 Rolling Returns") stays full-width */
  .rolling-table td:first-child{
    flex: 1 1 100%;
  }
}

/* Modern polish — safe; preserves Stox color identity, no third-party widget changes */
.nav-link{ transition: transform .15s ease, filter .15s ease, box-shadow .2s ease; }
.nav-link:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.search-container input:focus{ outline:none !important; box-shadow:0 0 0 3px rgba(42,91,255,.22) !important; border-color:#2a5bff !important; }

/* ——— Nav refresh: one calm, cohesive, trustworthy bar ———————————
   Neutral ghost buttons by default, a single blue accent for the
   flagship action, quiet treatment for everything else. Overrides the
   older per-link colours above. */
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:8px;
  font-weight:600; font-size:14px; line-height:1.4;
  color:#334155; background:transparent; border:1px solid transparent;
  text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-link:hover, .nav-link:focus{
  background:#eef3fb; color:#0d47a1; filter:none; transform:none;
}
/* Neutralise old loud per-link colours */
.nav-home, .nav-results, .nav-profile, .nav-login,
.nav-screen, .nav-port, .nav-refer{ background:transparent; color:#334155; }
/* Current page — subtle orientation cue */
.nav-link.nav-active{ background:#e7effb; color:#0d47a1; border-color:#cddffa; }
/* Single primary accent — flagship Super 30 (and Register CTA) */
.nav-super30, .nav-reg{
  background:linear-gradient(135deg,#1e88e5,#0d47a1); color:#fff; border-color:transparent;
  box-shadow:0 2px 6px rgba(13,71,161,.22);
}
.nav-super30:hover, .nav-super30:focus,
.nav-reg:hover, .nav-reg:focus{
  background:linear-gradient(135deg,#1976d2,#0b3d8a); color:#fff;
}
/* Logout — quiet until hovered */
.nav-logout{ color:#b02a37; }
.nav-logout:hover, .nav-logout:focus{ background:#fdeaec; color:#b02a37; }
/* YouTube — ghost with red accent, not a solid red block */
.nav-link.nav-youtube{
  background:transparent; color:#c4302b !important;
  padding:7px 14px; border-radius:8px; font-weight:600;
}
.nav-link.nav-youtube:hover{ background:#fdecec; }
/* APK download — keep one distinct green CTA */
.nav-link.nav-apk{
  background:#1e8e4e; color:#fff !important; padding:7px 14px; border-radius:8px;
  font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.nav-link.nav-apk:hover{ background:#186c3c; }
/* Logged-in name chip — align with the calmer bar */
#mobileMenu > span{ color:#475569 !important; font-weight:600 !important; }

/* ═══════ Typography & spacing polish (premium feel) ═══════════════════
   Global, low-risk refinements: a crisper cross-platform font stack,
   font smoothing, calmer heading rhythm, and a more refined search box. */
:root{
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3{ letter-spacing:-0.01em; }
h1{ line-height:1.15; }
h2{ line-height:1.2; }

/* Refined search box */
#symbolSearch{
  /* The app's primary entry point. It computed to 42px — 2px under the §6c tap
     floor — and 15px is under the 16px body floor (which also makes iOS zoom the
     page on focus, on the one field every visitor touches first). */
  padding:11px 14px;
  min-height:44px;
  border:1px solid #cbd6e2;
  border-radius:10px;
  font-size:16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Clear, consistent keyboard-focus ring for accessibility */
a:focus-visible, button:focus-visible,
.nav-link:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid #1976d2;
  outline-offset:2px;
  border-radius:6px;
}

/* ═══════ Mobile refinements ═══════════════════════════════════════════ */
@media (max-width:768px){
  /* 16px inputs stop iOS from auto-zooming on focus */
  #symbolSearch{ font-size:16px; }

  /* Comfortable full-width tap targets in the dropdown nav */
  #mobileMenu .nav-link{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
  }
  #mobileMenu .nav-link.nav-super30,
  #mobileMenu .nav-link.nav-reg{ justify-content:center; }

  /* Give the ☰ toggle a clear tappable size */
  .mobile-menu-toggle{
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
  }
}

/* Wide data tables: momentum scroll + a subtle edge hint they can swipe */
.table-scroll, .portfolio-table, div[style*="overflow: auto"], div[style*="overflow:auto"]{
  -webkit-overflow-scrolling: touch;
}

/* ═══════ CRYO-ERGO pass — master §6c (thumb ergonomics) ═══════════════════
   Everything below is a tap-target / type / contrast fix. It lives at the end
   of the file on purpose: style.css loads after the shared cryo-*.css, and a
   later declaration of equal specificity wins, so these are the final word for
   every stox page. Nothing here changes what a control DOES — only how big,
   how legible and how reachable it is with one thumb.

   Deliberately NOT enlarged: the financial data grids (.data-table /
   .portfolio-table cells). They are dense by design and live in a horizontal
   scroller; their rows only get taller padding + a legible type size, because
   forcing 44px on every cell would turn a 40-column quarterly table into a
   page of whitespace. The tappable thing in those tables is the symbol link,
   and that is sized below. */

/* ── Section jump-links in the .symbol-links bar (index.php / stock.php).
      These were bare text links: a ~19px tall target for the four most-used
      shortcuts on the page. */
.section-links a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:8px 12px;
  border-radius:8px; font-size:15px; line-height:1.5;
  background:rgba(255,255,255,.72); border:1px solid #cbd6e2;
}
.section-links a:hover,
.section-links a:focus{ background:#fff; text-decoration:none; }
.section-links{ gap:8px; }          /* the §6c 8px dead space between neighbours */

/* ── Symbol search suggestions (header.php). 8px padding gave ~35px rows on a
      list the user picks from constantly; they are also keyboard-reachable now
      (role=option + tabindex in header.php), so they need the focus ring. */
#searchResults div{
  min-height:44px; display:flex; align-items:center;
  padding:11px 14px; font-size:16px; line-height:1.5;
  border-bottom:1px solid #eef2f7;
}
#searchResults div:last-child{ border-bottom:0; }
#searchResults div:hover,
#searchResults div:focus-visible{ background:#eef3fb; }

/* ── Data tables: keep the density, raise the floor.
      Row padding 6px→9px puts the symbol link's row at ~44px, and the ≤480px
      rule dropped body text to 0.8rem (12.8px) — under the §6c 14px secondary
      floor — on the one screen where it is hardest to read. */
.data-table th, .data-table td{ padding:9px 10px; }
@media (max-width: 480px){
  .data-table th, .data-table td{ font-size:14px; padding:8px 8px; line-height:1.5; }
}
.data-table td:first-child a,
.data-table th:first-child a{ display:inline-flex; align-items:center; min-height:44px; }

/* ── Contrast: plain `red` on the #f4f6f8 page is 3.99:1, under the 4.5:1 floor. */
.debug{ color:#c5221f; }

/* ── Desktop nav pills — 7px padding put them at ~34px. */
.nav-link{ min-height:44px; }

/* ── The Trendlyne QVT/SWOT widget wrappers carry min-width:350px, which beats
      their own max-width:100% and pushed the page ~14px wider than a 360px
      phone. Releasing the min-width on phones is the whole fix; the widgets
      already reflow. */
@media (max-width: 600px){
  .widgets-table td > div{ min-width:0 !important; }
}

/* ── Footer legal links (footer.php) were 6px/12px pills ≈ 31px tall. */
.stox-footer-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 16px; font-size:15px;
}