/* ==================================================
   checktaxsalary.com — Cleaned CSS (mobile-safe)
   - Design tokens
   - Base & layout
   - Header  (UNIVERSAL, non-cut)
   - Sections (form/result)
   - Controls (inputs/buttons)
   - Result table (rows, explanations, PIT list)
   - Composition card
   - Links page
   - About page
   - Responsive
================================================== */

/* ------------------------
   Design Tokens
------------------------ */
:root {
  --bg: #ffffff;
  --surface: #f6f6f636;
  --text: #2d3748;         /* slate-700 */
  --muted: #6b7280;        /* gray-500 */
  --brand: #5c79e0;        /* blue */
  --accent: #FF9500;       /* orange */
  --hoverbutton: #f0c050;  /* button hover */
  --header-bg: #000000d4;  /* translucent black */
  --hover: #f3f4f6;        /* gray-100 */
  --ring: #c7d2fe;         /* indigo-200 */
  --border: #e2e8f0;       /* slate-200 */
  --g-top:   #f1f3f5; /* strongest band (totals) */
  --g-group: #f6f7f9; /* middle band (employer/employee groups) */
  --g-leaf:  #fbfbfc; /* subtle zebra/leaf background */
  --g-hover: #eceff2; /* generic hover */
  --g-hover2:#e6eaee; /* stronger hover for top/group */

  --radius: 12px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 15px 24px rgba(0,0,0,0.14);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  /* About page */
  --linkedin: #0a66c2;
  --linkedin-bg: rgba(10,102,194,.08);
}

/* ------------------------
   Base
------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: auto;
  display: block;
  font-weight: 600;
  
}

a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

img { display: block; max-width: 100%; }

/* ------------------------
   Layout
------------------------ */
.main-layout {
  display: flex;
  flex-direction: row;
  margin: auto;
  font-size: 0.84rem;
}

.sidebar {
  width: 20%;
  height: calc(100vh - 56px); /* header ~56px */
  min-height: 0;
  overflow-y: auto;
}

.container {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  max-width: 1200px;       /* wider canvas */
  margin: 1.6rem auto;
  padding: 0 1rem;
  flex-wrap: nowrap;       /* keep side-by-side on desktop */
  height: 100%;
}

/* ------------------------
   Header (UNIVERSAL — same on all pages, never cut)
------------------------ */
.header-stripe {
  /* remove fixed height so it never clips two-line labels */
  height: auto;                 /* was: 6vh */
  min-height: 56px;             /* visual minimum */
  max-height: none;             /* allow growth when needed */

  display: flex;
  align-items: center;
  width: 100%;
  background: var(--header-bg);
  box-shadow: var(--shadow-lg);
  position: sticky; position: -webkit-sticky; top: 0; z-index: 1000;

  /* full-bleed + notches */
  left: 0; right: 0;
  padding-left: calc(0px + env(safe-area-inset-left));
  padding-right: calc(0px + env(safe-area-inset-right));
  padding-top: calc(0px + env(safe-area-inset-top));
  overflow: visible;
}

.header-title, .header-title a {
  flex: 1;
  display: grid; align-items: center;
  padding-left: 1rem;
}

.header-title-text, .header-title-text a {
  padding: .1rem 0;
  font-size: 1.5em;             /* shrinks on very small phones below */
  font-weight: 700; color: #fff;
}
/* prevent hover bump from shifting layout */
.header-title-text:hover { text-decoration: underline;}

.header-right {
  /* don't force 20%/6vh; size to content so two-line labels fit */
  width: auto;
  height: auto;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .2%;
  gap: 0;                        /* keep tight */
}

.useful-info, .about {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  height: auto;                  /* was: 6vh (caused clipping) */
  font-size: 1.2em; font-weight: 700;
  color: #fff; cursor: pointer; word-break: break-word;
  white-space: normal; border-left: 2px solid #fff;
}
.about { border-right: 2px solid #fff; }

.useful-info-text, .about-text { padding: 8px; text-align: center; line-height: 1.2; }

.header-links {
  display: flex; align-items: center;
  height: auto;                  /* was: 6vh */
  font-size: .8em; font-weight: 700; color: #fff;
  margin: auto; border-radius: 0; transition: background-color 0ms;
}
.header-links:hover, .useful-info:hover, .about:hover {
  background: #fff; color: var(--text); text-decoration: underline;
}

/* ------------------------
   Sections (form/result)
------------------------ */


.form-section, .result-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-md);
}

/* consolidate to a single declaration */
.form-section { flex: 0 0 35%; min-width: 450px; max-width: 600px; }
.result-section { flex: 1 1 auto; }




/* ------------------------
   Controls
------------------------ */
input, select, button { font-family: inherit; }

input, select {
  width: 100%;
  padding: 8px 11.2px;
  margin-top: .4em; margin-bottom: .96em;
  border: 1px solid #cbd5e0;
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  font-size: .84em;
}
input[type="text"] {
  text-align: right; font-variant-numeric: tabular-nums;
  letter-spacing: .24px; font-weight: 600; color: var(--text);
  border-color: #a0aec0; box-shadow: var(--shadow-sm);
}
#salary_amount, #bonus_amount { text-align: right; }
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 173, 92, 0.25);
}

button {
  background: var(--accent); color: #fff; border: none;
  padding: 9.6px 16px; margin-top: .8em; width: 100%;
  border-radius: var(--radius-sm); font-size: .84em; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background-color 180ms ease, transform 80ms ease, box-shadow 180ms ease;
}
button:hover { background: var(--hoverbutton); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,149,0,.35); }



/* Smaller label/input that still matches the big Salary Amount look */
.label-sm {
  display: block;

}

.field-error { color: #d00; font-size: 0.85em; margin-top: -0.4em; }

/* 13th salary block: compact + aligned checkbox */

.thirteen-controls.card {
  border: none;
  background: var(--surface);
  border-radius: none;
  padding: .5rem 0;
  margin-top: .2rem;
  
}
.thirteen-controls .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.thirteen-controls .row input[type="checkbox"] { 
  flex: 0 0 25%;
  align-self: flex-end;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);  /* works in modern browsers for check color */
}
.thirteen-controls .row-label {

  flex: 0 0 75%;
}
.thirteen-controls .sub-label {
  display: block;
  margin: .25rem 0 .25rem;
}
.thirteen-controls select {

  padding: 6px 10px;
  max-width: 260px;
}

#thirteen_sub{
  display:flex;
  align-items: center;
  justify-content: space-between;

}

#thirteen_sub label {
  flex: 0 0 70%;   /* fixed 75% of container */
}

#thirteen_sub select {
  flex: 0 0 25%;   /* fixed 25% of container */
}

#thirteen_included option {
  text-align: left;        /* items in the dropdown list */
}
/* On small screens, keep things readable */
@media (max-width: 480px) {
  .form-section { flex: 1 1 100%; }
  .thirteen-controls select { max-width: 100%; }
}

/* Make sure the sub-section really disappears when hidden */
#thirteen_sub[hidden] { 
  display: none !important;
}
/* inline rows: same width behavior as other selects/inputs */
.inline-row{
  display:grid;
  grid-template-columns: 2fr 1fr 2fr;  /* label | checkbox | field */
  align-items:center;
  gap:0.5rem;
  margin:0.2rem 0;
}
.inline-label{ font-weight:600; font-size: normal; white-space:wrap; }
.inline-row.sub .inline-label{ white-space:normal; line-height:1.25; } /* allow wrapping on sub-question */
.inline-row.sub {
    display:grid;
  grid-template-columns: 2fr 0fr 1fr;  /* label | checkbox | field */
}
.inline-checkbox{ width:1.1rem; height:1.1rem; accent-color:var(--accent); }
.inline-spacer{ width:1.1rem; height:1.1rem; } /* occupies checkbox column on sub-row */
.inline-field-wrap{ display:flex; align-items:center; width:100%; }
.inline-field{ width:100%; }     /* look like other controls */
.inline-field[type="text"]{ text-align:right; }   /* only for the bonus amount */
[hidden]{ display:none !important; }

/* BONUS width override (fixes your old 45% rule) */
#bonus_row{ display:grid; grid-template-columns: 2fr 1fr 2fr; align-items:center; }
#bonus_amount{ 
  flex:1 1 auto !important; 
  width:100% !important; 
  min-width:0 !important; 
  height: var(--field-h);

}



/* (optional) tighter mobile */
@media (max-width:480px){
  .inline-row{ grid-template-columns: minmax(160px, 48%) auto 1fr; font-size: small; }
  #bonus_amount{font-size: .0.95em;}
}


/* Inline rows: label | checkbox | field (no wrap) */

.inline-label{ font-weight:600; white-space:wrap; }   /* keep on one line */
.inline-checkbox{ width:1.1rem;height:1.1rem;accent-color:var(--accent); }
.inline-field-wrap{ min-height:40px; display:flex; align-items:center; justify-content:flex-end; }
.inline-field{ width:100%; text-align:right; }

/* hide content but keep the cell size -> no layout jump */
.visually-hide-keep-space{ visibility:hidden; opacity:0; pointer-events:none; }







/* ------------------------
   Result section heading
------------------------ */
.result-section h2 {
  margin: 0 0 1rem 0; font-size: 1.08em; color: var(--text); font-weight: 600;
}
#disclaimer { font-size: .72em; color: var(--muted); margin: -.4rem 0 1rem; }
#result-title { color: var(--accent); font-size: 1.8em; font-weight: 650; }
#explanation { 
  font-size: .6em;
  color: black;
  padding-left: 1.2em;
  align-items: center;
  font-weight: 500;
  text-decoration: underline;
}

/* ------------------------
   Result table
------------------------ */
/* ------------------------
   Result table (fixed)
------------------------ */

.salary-table {
  width: 100%;
  border-left: 0.5px solid #c7c7c7;
  
  border-radius: var(--radius-sm);
 

  /* remove the inner scrolling */
  max-height: none;   /* or just delete the property */
  overflow: visible;  /* or delete this too */
}

/* If you prefer NO sticky header, comment out the two lines above
   and also change thead { position: sticky } to position: static below. */

.styled-result-table {
  width: 100%;
  border-collapse: separate;   /* needed for border-radius with sticky */
  border-spacing: 0;
  table-layout: fixed;
  font-size: 11px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.styled-result-table thead {
  position: sticky;            /* stick to top of .salary-table */
  top: 0;
  z-index: 2;                  /* above rows */
  background: var(--header-bg);
  color: #fff;
}

.styled-result-table thead th {
  font-weight: 700;
  letter-spacing: .2px;
}

.styled-result-table th,
.styled-result-table td {
  padding: 5px 5px;

  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  word-break: break-word;
   min-width: 80px;  
}

.styled-result-table th:first-child,
.styled-result-table td:first-child {
  text-align: left;
  width: 40%;
  min-width: 180px;
}

/* Default 3 columns (Component | Annual | 13th) */
.styled-result-table th:nth-child(2),
.styled-result-table td:nth-child(2) { width: 30%; }
.styled-result-table th:nth-child(3),
.styled-result-table td:nth-child(3) { width: 30%; }

/* Highlight totals/main rows */
.styled-result-table tbody{
  font-weight: 600;
  color: var(--text);
}

/* Clickable explanation affordance */
.styled-result-table tbody tr.explainable { cursor: pointer; }
.styled-result-table tbody tr.detail-row:hover td {
  background: var(--accent);
  opacity:1;
  color: white; 
  border-right: none;
  border-left: none;
  content: "!";

}



.styled-result-table tbody tr.explainable td.left { position: relative; }
.styled-result-table tbody tr.explainable td.left::after {
  
  font-size: .9em;
  margin-left: .4rem;
  opacity: 0;
  transition: opacity .15s ease;
}
.styled-result-table tbody tr.explainable:hover td.left::after { opacity: .9; }





.explainable .expanded 
/* Multi-line friendly left/right cells when needed */
td.left, th.left, th.right {
  white-space: normal;
  word-break: break-word;
  max-width: 300px;
}

/* Expand/collapse detail rows */
.highlight{
  background-color: #0000008a;
  color: white;
  font-weight: 600;
}


tr.expandable { 
  cursor: pointer;
  color: var(--text); 
  font-weight: 500; 
  background-color: #c2c1c18f;
  border-collapse: collapse;

}



tr.expandable:hover td { color: #000; }

.twisty { display: inline-block; width: 1.1em; margin-right: .25em; transition: transform .15s ease; }
tr.expanded .twisty { transform: rotate(90deg); }



tr.detail-row td {
  background: #f3f1f120;
  font-weight: 500;
  /*border-bottom: 0.5px solid  #c7c7c7;*/
  border-right: 0.5px solid  #c7c7c7;
 

}

/* Any leaf row (not totals, not headers) */
.styled-result-table tbody tr:not(.highlight):not(.expandable) td:first-child{
  text-align: left;
  padding-left: 30px;
}

tr.detail-row td.left { padding-left: 1em; }

/* Explanation row */
tr.explain-row td {
  background: #ffffff;
  color: var(--text);
  border-bottom: 0.5px dashed  #b4b3b3;
  border-left: 5px solid var(--accent);
  padding: 8px 10px;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}



tr.explain-row .explain-label { font-weight: 600; margin-right: .35rem; color: var(--muted); }

/* turn off any previous right-side info icon */
.styled-result-table tbody tr.explainable td.left::after { content: none !important; }

/* size/spacing you can tweak */
:root{
  --info-size: 0.8rem;   /* icon size */
  --info-gap:  .35rem;    /* gap between icon and text */
}

/* detail rows only */
.styled-result-table tbody
tr.detail-row.explainable:not(.no-explain):not([data-no-explain="1"]) td.left{
  position: relative;
  padding-left: calc(var(--info-size) + var(--info-gap) + .6rem); /* room for icon */
}

/* the ℹ️ on the LEFT (hidden until hover) */
.styled-result-table tbody
tr.detail-row.explainable:not(.no-explain):not([data-no-explain="1"]) td.left::before{
  content: "ℹ️";
  position: absolute;
  left: .35rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--info-size);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* reveal on row hover */
.styled-result-table tbody
tr.detail-row.explainable:not(.no-explain):not([data-no-explain="1"]):hover td.left::before{
  opacity: 1;
}




/* PIT mini list inside explanation */
.explain-mini { margin-top: .35rem; font-size: .84rem; color: var(--muted); }
.explain-mini .base-lines { line-height: 1.35; margin-bottom: .35rem; }
.explain-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.explain-list li { display: flex; justify-content: space-between; gap: .5rem; padding: 4px 0; border-top: 1px dashed var(--border); }
.explain-list li:first-child { border-top: 0; }
.explain-list .label { flex: 1 1 auto; }
.explain-list .nums  { flex: 0 0 auto; text-align: right; }
.explain-mini .total { margin-top: .35rem; font-weight: 600; color: var(--text); }

/* Column schemes when Bonus is present (kept from yours) */
/* 4 columns (Component | Annual | Bonus | Monthly) — no 13th */
.styled-result-table.has-bonus:not(.has-13th) th:first-child,
.styled-result-table.has-bonus:not(.has-13th) td:first-child { width: 25%; text-align: left; }
.styled-result-table.has-bonus:not(.has-13th) th:nth-child(2),
.styled-result-table.has-bonus:not(.has-13th) td:nth-child(2) { width: 25%; }
.styled-result-table.has-bonus:not(.has-13th) th:nth-child(3),
.styled-result-table.has-bonus:not(.has-13th) td:nth-child(3) { width: 25%; }
.styled-result-table.has-bonus:not(.has-13th) th:nth-child(4),
.styled-result-table.has-bonus:not(.has-13th) td:nth-child(4) { width: 25%; }

/* 4 columns (Component | Annual | 13th | Monthly) — 13th only */
.styled-result-table.has-13th:not(.has-bonus) th:first-child,
.styled-result-table.has-13th:not(.has-bonus) td:first-child { width: 25%; text-align: left; }
.styled-result-table.has-13th:not(.has-bonus) th:nth-child(2),
.styled-result-table.has-13th:not(.has-bonus) td:nth-child(2) { width: 25%; text-align: right; }
.styled-result-table.has-13th:not(.has-bonus) th:nth-child(3),
.styled-result-table.has-13th:not(.has-bonus) td:nth-child(3) { width: 25%; text-align: right; }
.styled-result-table.has-13th:not(.has-bonus) th:nth-child(4),
.styled-result-table.has-13th:not(.has-bonus) td:nth-child(4) { width: 25%; text-align: right; }


/* 5 columns (Component | Annual | Bonus | 13th | Monthly) */
.styled-result-table.has-bonus.has-13th th:first-child,
.styled-result-table.has-bonus.has-13th td:first-child { width: 25%; text-align: left; }
.styled-result-table.has-bonus.has-13th th:nth-child(2),
.styled-result-table.has-bonus.has-13th td:nth-child(2),
.styled-result-table.has-bonus.has-13th th:nth-child(3),
.styled-result-table.has-bonus.has-13th td:nth-child(3),
.styled-result-table.has-bonus.has-13th th:nth-child(4),
.styled-result-table.has-bonus.has-13th td:nth-child(4),
.styled-result-table.has-bonus.has-13th th:nth-child(5),
.styled-result-table.has-bonus.has-13th td:nth-child(5) { width: 18.5%; }

/* Phones: shrink safely without horizontal scroll */
@media (max-width: 480px) {
  .salary-table { max-height: none; overflow: hidden; } /* let page scroll */
  .styled-result-table { table-layout: fixed; font-size: 11px; }
  .styled-result-table th, .styled-result-table td { padding: 6px 6px; white-space: normal; overflow-wrap: anywhere; text-align: right; }
  .styled-result-table th:first-child, .styled-result-table td:first-child { text-align: left; width: 52%; }
  .styled-result-table th:nth-child(2), .styled-result-table td:nth-child(2) { width: 24%; }
  .styled-result-table th:nth-child(3), .styled-result-table td:nth-child(3) { width: 24%; }
}




/* Explanation row (muted) */
tr.explain-row td {
  background: #ffe2a0bf; color: var(--muted); font-weight: 500;
  border-bottom: 1px dashed var(--border); border-left: 5px solid var(--accent);
  padding: 8px 10px;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word;
}
tr.explain-row .explain-label { font-weight: 600; margin-right: .35rem; color: var(--muted); }

/* PIT mini list (light) inside explanation */
.explain-mini { margin-top: .35rem; font-size: .6rem; color: var(--muted); }
.explain-mini .base-lines { line-height: 1.35; margin-bottom: .35rem; }
.explain-list { list-style: none; margin: .25rem 0 0; padding: 0; }
.explain-list li { display: flex; justify-content: space-between; gap: .5rem; padding: 4px 0; border-top: 1px dashed var(--border); }
.explain-list li:first-child { border-top: 0; }
.explain-list .label { flex: 1 1 auto; }
.explain-list .nums  { flex: 0 0 auto; text-align: right; }
.explain-mini .total { margin-top: .35rem; font-weight: 600; color: var(--text); }

tr.no-explain.expandable { cursor: default; text-decoration: none; }

/* ------------------------
   Composition card / stripe chart
------------------------ */
.composition-card {
  margin-top: 1rem; padding: .8rem .72rem .68rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;
}
.composition-title { margin: 0 0 .6rem; font-size: .84rem; font-weight: 600; color: var(--text); }
.chart-wrap { position: relative; width: 100%; max-width: 100%; }
.legend-details { margin: .48rem 0 0; font-size: .76rem; color: var(--muted); }
#compChart { display: block; width: 100%; }

/* ------------------------
   Links page (Useful info)
------------------------ */
.links-card {
  flex: 1 1; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: .4rem; min-width: 250px;
  max-height: 80vh;
}
.links-list { list-style: none; margin: 0; padding: .2rem; }
.link-row {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .8rem .9rem 2rem; border-bottom: 1px solid lightgray;
  font: 600 .92rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: transparent; transition: background-color 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
.links-list li + li .link-row { margin-top: .2rem; }
.link-row:hover { background: #e7e7e7; border-radius: 10px; }
.link-row:active { transform: scale(.995); }
.link-row:focus { outline: none; }
.link-row:focus-visible { box-shadow: 0 0 0 3px var(--ring); background: var(--hover); }
.link-row span:last-child { font-weight: 6700; transition: transform 150ms ease, color 150ms ease; }
.link-row:hover span:last-child { transform: translateX(3px); }
@media (max-width: 480px) { .link-row { padding: .7rem .8rem; font-size: .84rem; } }

/* ------------------------
   About Page (minimal)
------------------------ */
.about-section { background: var(--bg); padding: var(--space-6) var(--space-4); }
.about-section .about__container {
  max-width: 820px; margin: 0 auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: clamp(1rem, 2.8vw, 1.6rem);
}
.about-section .about__divider { height: 1px; background: var(--border); margin: var(--space-5) 0; border: 0; }
.about-section .about__title { margin: 0 0 .3rem; font-size: clamp(1.8rem, 3vw, 1.8rem); font-weight: 700; color: var(--accent); letter-spacing: .2px; }
.about-section .about__lead { margin: 0 0 .9rem; font-weight: 600; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.1rem); }
.about-section .about__text { margin: .1rem 0 .6rem; color: var(--text); line-height: 1.65; font-size: .98rem; }
.about-section .about__mission { margin: .4rem 0 .8rem; color: var(--text); font-weight: 500; line-height: 1.65; font-size: .98rem; }
.about-section .about__list { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--text); list-style-position: outside; }
.about-section .about__list li { margin: .35rem 0; }
.about-section .useful-info-icon { height: auto; width: auto; border-left: 0; padding-right: 0; }
.about-section .about__social { margin-top: .9rem; }
.about-section .about__social, .about-section .about__social-text { background: transparent !important; border: 0 !important; }
.about-section .about__social-text { color: inherit !important; }
.about-section .linkedin-link {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  background: var(--bg); color: var(--linkedin); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .48rem .8rem; font-size: .95rem; font-weight: 550;
  box-shadow: var(--shadow-sm); transition: background-color .18s, border-color .18s, box-shadow .18s, transform .08s;
}
.about-section .linkedin-link:hover, .about-section .linkedin-link:focus-visible {
  background: var(--linkedin-bg); border-color: var(--linkedin);
  box-shadow: var(--shadow-md); transform: translateY(-1px); outline: none;
}
.about-section .linkedin-link .linkedinn-img { width: 22px; height: 22px; border-radius: 4px; display: block; transition: transform .15s ease; }
.about-section .linkedin-link:hover .linkedinn-img { transform: scale(1.06); }
.about-section .linkedin-link .about__social-text { margin: 0; line-height: 1.35; color: var(--linkedin) !important; }




/* ------------------------
   Responsive
------------------------ */

/* 1) Phones & small tablets: stack content and hide sidebars (ads) */
@media (max-width: 992px) {
  .main-layout { flex-direction: column; }
  .sidebar { display: none !important; }
  .container {
    max-width: 100% !important;
    width: 100%;
    margin: 1rem auto;
    padding: 0 1rem;
    flex-direction: column;          /* stack form + result */
  }
  .form-section, .result-section {
    width: 100%; max-width: 720px; min-width: 0;
    margin-inline: auto;
  }
}
.header-title-text {
  white-space: nowrap;          /* keep on one line if possible */
  overflow: hidden;
  text-overflow: ellipsis;      /* gracefully truncate on tiny screens */
}



/* 2) Header micro-tweaks for very small phones (keep one row) */
@media (max-width: 420px){
  .header-title-text { font-size: 1.25em; }   /* shrink title a bit */
  .header-links { font-size: .75em; }
  .useful-info-text, .about-text { padding: 6px; }
}

@media (max-width: 420px){
  .header-title-text { white-space: normal; } /* allow wrap on very small phones */
}

/* 3) TABLE: no horizontal scrollbar on phones — shrink & wrap */
@media (max-width: 480px) {
  .salary-table { overflow-x: hidden; }
  .styled-result-table {
    table-layout: fixed;
    font-size: 11px;                 /* shrink */
  }
  .styled-result-table th,
  .styled-result-table td {
    padding: 6px 6px;                /* tighter */
    white-space: normal;             /* allow wrapping */
    overflow-wrap: anywhere;         /* wrap long labels/numbers */
    text-align: right;
  }
  .styled-result-table th:first-child,
  .styled-result-table td:first-child { text-align: left; width: 52%; }
  .styled-result-table th:nth-child(2),
  .styled-result-table td:nth-child(2) { width: 24%; }
  .styled-result-table th:nth-child(3),
  .styled-result-table td:nth-child(3) { width: 24%; }
}


/* FAQ Section */
.faq {
  margin-top: 2rem;
  padding: 1rem 0;
  padding-left: 1rem;
  padding-right: 1rem;
  border-top: 1px solid var(--border, #e2e8f0);
}

.faq h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--text, #2d3748);
}

.faq details {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: var(--surface, #fff);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand, #5c79e0);
  outline: none;
}

.faq summary:hover {
  color: var(--accent, #FF9500);
}

.faq p {
  margin: 0.5rem 0 0 0.5rem;
  color: var(--muted, #6b7280);
  font-size: 0.95rem;
}