/* Layout geometry, replacing the JavaScript that used to supply it.
 *
 * style.css defines how things LOOK; the widths that made them line up came
 * from ~205 $(el).css({width: ...}) calls in frontend/JS/*.js, recalculated at
 * three breakpoints on every resize. Several of those rules have no width at
 * all in the stylesheet -- .jobcard .jobtitle, .jobcard .countcontainer and
 * .companycard .companyinfocontainer are float:left with no width -- so
 * without the JS they collapse to their content and wrap unpredictably.
 *
 * Loaded AFTER style.css; selectors mirror it exactly so these win on order.
 * Breakpoints match the originals in home.js: >=1660 / 1280-1659 / 769-1279 /
 * <=768, which mapped to 4, 4, 3 and 1 cards per row.
 */

/* ---- sticky footer --------------------------------------------------------
 * On a short page the footer stopped wherever the content ended, leaving a
 * band of blank page beneath it. A flex column with margin-top:auto pushes it
 * to the bottom of the viewport when the content is short, and behaves
 * normally when it is not.
 *
 * The children are all full-width bands (header, the dark intro strips,
 * .centralcontainer, footer). They carry float:left in style.css purely to
 * contain their own floated children; as flex items the float is ignored but
 * they still establish an independent formatting context, so inner floats are
 * contained exactly as before.
 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

body > footer {
  margin-top: auto;
}

/* ---- link colour on light backgrounds -------------------------------------
 * style.css:51 sets `a { color: #FFF }` globally, which works only because
 * every link in the original sits on the dark header, the dark banner or the
 * footer. Any link on a white background is invisible -- including the ones on
 * production's own terms page. These are the light-background contexts.
 */
.textpart a,
.insightsuggestion a,
.normalintro a,
.insightlistname {
  color: #4A8DCB;
}

/* ---- page container -------------------------------------------------------
 * style.css hardcodes width:1660px, which overflows any narrower viewport --
 * that is why the header and footer bands stopped short of the right edge.
 */
.centralcontainer {
  width: 100%;
  max-width: 1660px;
  box-sizing: border-box;
  /* Cards carry margin-left:10px, so three at 33.333% plus their margins
     total slightly over the container and clip the last column. Reserving the
     gutter here keeps every row inside. */
  padding-right: 10px;

  /* Centre the content column. The search bars are flex-centred within their
     own max-width, so leaving this left-aligned made the two disagree about
     where the page's axis is -- obvious above ~1660px, where the container
     stops growing and everything below the banner looked shoved left.

     float:left has to go for margin:auto to do anything, and display:flow-root
     replaces what the float was actually there for: establishing a block
     formatting context so the floated cards inside are contained. Using
     overflow:hidden for that would clip the cards' hover box-shadow. */
  float: none;
  display: flow-root;
  margin-left: auto;
  margin-right: auto;
}

/* ---- job cards ------------------------------------------------------------
 * Title on its own row, then the two count columns side by side beneath it.
 * The JS derived these from .simluationcard's width, so removing the Insights
 * card silently broke job-card layout via parseInt(undefined) => NaN.
 */
.centralcontainer .jobcard,
.centralcontainer .companycard,
.centralcontainer .simluationcard {
  width: calc(25% - 10px);
  box-sizing: border-box;
}

.centralcontainer .jobcard .jobtitle {
  width: calc(100% - 40px);
}

.centralcontainer .jobcard .countcontainer {
  width: calc(50% - 30px);
}

/* ---- company cards --------------------------------------------------------
 * Logo floats left at 45px wide with 20px margins; the info block takes the
 * rest. The JS computed card width - 40 - 45 - 20 for exactly this.
 */
.centralcontainer .companycard .companyinfocontainer {
  width: calc(100% - 105px);
  box-sizing: border-box;
}

/* ---- homepage search bar --------------------------------------------------
 * style.css gives the fields a fixed 310px and margin-left:190px; home.js then
 * recomputed both per breakpoint, e.g.
 *   width: (1280-20-252-102-15-122)/2-50,  marginLeft: ($(window).width()-1280)/2+10
 * to keep a ~1090px group centred. Flex does that declaratively. The -1px
 * left margins are kept so adjacent borders still overlap into one control.
 */
.landingpagesearchcontainer form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 10px 0;
  box-sizing: border-box;
}

.landingpagesearchcontainer #jobtitle,
.landingpagesearchcontainer #employeename,
.landingpagesearchcontainer #joblocation,
.landingpagesearchcontainer #yeardropdown,
.landingpagesearchcontainer .searchbutton {
  margin-top: 0;
  float: none;
  box-sizing: border-box;
  min-width: 0;
}

.landingpagesearchcontainer #jobtitle,
.landingpagesearchcontainer #employeename {
  flex: 1 1 260px;
  width: auto;
  margin-left: 0;
}

.landingpagesearchcontainer #employeename {
  margin-left: -1px;
}

.landingpagesearchcontainer #joblocation {
  flex: 1 1 180px;
  width: auto;
  margin-left: -1px;
}

.landingpagesearchcontainer #yeardropdown {
  flex: 0 0 110px;
  width: auto;
  margin-left: -1px;
}

.landingpagesearchcontainer .searchbutton {
  flex: 0 0 120px;
  margin-left: 15px;
}

.landingpagesearchcontainer .searchintro {
  float: none;
  width: 100%;
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 10px 30px;
  box-sizing: border-box;
}

/* Below the flex basis sum the row would wrap mid-control, so stack cleanly. */
@media (max-width: 768px) {
  .landingpagesearchcontainer #jobtitle,
  .landingpagesearchcontainer #employeename,
  .landingpagesearchcontainer #joblocation,
  .landingpagesearchcontainer #yeardropdown,
  .landingpagesearchcontainer .searchbutton {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: -1px;
  }
}

/* ---- search results table -------------------------------------------------
 * search.js carried 93 width calls for this one table, recomputed at four
 * breakpoints. The columns were always proportional -- 1640*0.22, *0.2, *0.1,
 * *0.3, *0.1, *0.08 -- so percentages express the same thing without a resize
 * handler. Padding replaces the "-20px" gutter each calculation subtracted.
 */
.searchtablecontainer {
  width: 100%;
  box-sizing: border-box;
}

.searchtablecontainer .jobtitlecolumnheader,
.searchtablecontainer .tablejobtitle { width: 22%; }

.searchtablecontainer .companynamecolumnheader,
.searchtablecontainer .tableemployeename { width: 20%; }

.searchtablecontainer .locationcolumnheader,
.searchtablecontainer .tablelocation { width: 10%; }

.searchtablecontainer .salarycolumnheader,
.searchtablecontainer .tablesalary { width: 30%; }

.searchtablecontainer .startdatecolumnheader,
.searchtablecontainer .tablestartdate { width: 10%; }

.searchtablecontainer .yearcolumnheader,
.searchtablecontainer .tableyear { width: 8%; }

.searchtablecontainer .jobtitlecolumnheader,
.searchtablecontainer .companynamecolumnheader,
.searchtablecontainer .locationcolumnheader,
.searchtablecontainer .salarycolumnheader,
.searchtablecontainer .startdatecolumnheader,
.searchtablecontainer .yearcolumnheader,
.searchtablecontainer .tablejobtitle,
.searchtablecontainer .tableemployeename,
.searchtablecontainer .tablelocation,
.searchtablecontainer .tablesalary,
.searchtablecontainer .tablestartdate,
.searchtablecontainer .tableyear {
  box-sizing: border-box;
  padding-right: 20px;
}

/* The company name sits beside a 48px logo inside its cell. style.css has NO
   rule for .companyname at all -- its width came entirely from search.js -- so
   without one the name wraps mid-phrase ("Google" / "Llc"). Truncating with an
   ellipsis matches how every other cell in this table behaves. */
.searchtablecontainer .tableemployeename .tablevalue a {
  display: block;
}

.searchtablecontainer .tableemployeename .companyname {
  /* No width: a percentage would resolve against the inline <a>, not the cell,
     and truncate to "Googl...". overflow:hidden establishes a block formatting
     context, so this sits beside the floated logo and takes exactly the space
     left over -- and doubles as the ellipsis clip for long names. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The bar is a proportion of its column, so a percentage set inline on the
   element replaces the per-row width JS entirely. */
.searchtablecontainer .tablesalary .salarybar {
  max-width: 100%;
}

/* Below ~900px the six columns cannot hold their content; drop the two
   lowest-value ones rather than let every cell overlap. */
@media (max-width: 900px) {
  .searchtablecontainer .startdatecolumnheader,
  .searchtablecontainer .tablestartdate,
  .searchtablecontainer .yearcolumnheader,
  .searchtablecontainer .tableyear { display: none; }

  .searchtablecontainer .jobtitlecolumnheader,
  .searchtablecontainer .tablejobtitle { width: 34%; }

  .searchtablecontainer .companynamecolumnheader,
  .searchtablecontainer .tableemployeename { width: 30%; }

  .searchtablecontainer .locationcolumnheader,
  .searchtablecontainer .tablelocation { width: 16%; }

  .searchtablecontainer .salarycolumnheader,
  .searchtablecontainer .tablesalary { width: 20%; }
}

/* Below ~560px even four columns cannot hold their content -- the salary runs
 * off the right edge -- so each result stacks into a block instead. The column
 * headers go with it, since they label columns that no longer exist; sorting
 * is still reachable from the Sort By dropdown above.
 */
@media (max-width: 560px) {
  .searchtablecontainer .tableheadercontainer + .tableheadercontainer {
    display: none;
  }

  .searchtablecontainer .tablerawconatainer {
    padding: 12px 0;
  }

  .searchtablecontainer .tablejobtitle,
  .searchtablecontainer .tableemployeename,
  .searchtablecontainer .tablelocation,
  .searchtablecontainer .tablesalary,
  .searchtablecontainer .tablestartdate {
    width: 100%;
    padding: 3px 0 3px 20px;
    display: block;
  }

  /* Start date returns once rows stack: there is room for it in a block, and
     it is more useful than the year column it replaced. */
  .searchtablecontainer .tablestartdate { display: block; }

  /* The bar is sized as a proportion of a column that no longer exists. */
  .searchtablecontainer .tablesalary .salarybar {
    display: none;
  }

  .searchtablecontainer .tablesalary .tablevalue {
    font-weight: 700;
    color: #1EA140;
  }
}

/* ---- search page form -----------------------------------------------------
 * Same flex treatment as the homepage bar; .searchcontainer is the search
 * page's equivalent wrapper.
 */
/* search.js sized this group from a 1280 basis: two text fields at
   (1280-20-252-102-15-122)/2-50 each, then 150 + 150 + 120. Roughly 1280
   overall, which is the max-width here. */
.searchcontainer form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 10px;
  box-sizing: border-box;
}

.searchcontainer #jobtitle,
.searchcontainer #employeename,
.searchcontainer #joblocation,
.searchcontainer #yeardropdown,
.searchcontainer .searchbutton {
  margin-top: 0;
  float: none;
  box-sizing: border-box;
  min-width: 0;
}

.searchcontainer #jobtitle,
.searchcontainer #employeename { flex: 1 1 260px; width: auto; margin-left: 0; }
.searchcontainer #employeename { margin-left: -1px; }
.searchcontainer #joblocation { flex: 1 1 180px; width: auto; margin-left: -1px; }
.searchcontainer #yeardropdown { flex: 0 0 110px; width: auto; margin-left: -1px; }
.searchcontainer .searchbutton { flex: 0 0 130px; margin-left: 15px; }

@media (max-width: 768px) {
  .searchcontainer #jobtitle,
  .searchcontainer #employeename,
  .searchcontainer #joblocation,
  .searchcontainer #yeardropdown,
  .searchcontainer .searchbutton {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: -1px;
  }
}

/* ---- listing pages (/jobs, /companies) ------------------------------------
 * topcomp.js and topjob.js centred a fixed 1280px column inside the 1660px
 * page with marginLeft:(1660-1280)/2, then derived every inner width from it:
 *   .topcompanyinfocontainer = container - 65 - 40 - 40   (rank + logo + gaps)
 *   .topcompanycard          = infocontainer / 4 - 10
 * Without those, the company name drops below its logo instead of sitting
 * beside it, exactly as on the search page.
 */
.topjobslistcontainer,
.topcompanieslistcontainer {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  float: none;
}

.scenetitle,
.scenenitnro {
  width: 100%;
  box-sizing: border-box;
  padding-right: 20px;
}

/* Rank badge and logo float left; the info block takes what is left. */
.topcompanyinfocontainer {
  width: calc(100% - 145px);
  box-sizing: border-box;
}

.topjobinfocontainer {
  width: calc(100% - 60px);
  box-sizing: border-box;
}

.topcompanycard {
  width: calc(25% - 10px);
  box-sizing: border-box;
}

.topcompanycard a,
.topcompanycard .topcompanycardsalary {
  width: calc(100% - 40px);
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .topcompanycard { width: calc(50% - 10px); }
}

@media (max-width: 700px) {
  .topcompanycard { width: calc(100% - 10px); }
  .topcompanyinfocontainer { width: calc(100% - 80px); }
}

/* ---- insights -------------------------------------------------------------
 * style.css has .simcard/.simcardform already; these are the result-page
 * pieces, which the PHP built through analysischeck_2.php and sized in JS.
 * Each bar is a percentage of the widest value, so no client code is needed.
 */
/* Two FULL-WIDTH cards stacked vertically -- style.css already says
 * .simcard{width:100%} and that is the original layout. What is horizontal is
 * the form INSIDE each card: scene.js sized .simcardform input to
 * formWidth/2 - 80, putting two fields per row with the button right-aligned
 * beneath. Getting this backwards produced narrow side-by-side cards with
 * stacked fields.
 */
.simcardcontainer {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  float: none;
  box-sizing: border-box;
}

/* scene.js: container width - 160, leaving room for the floated icon. */
.simcard .simcardtitle,
.simcard .simcardintro,
.simcard .simcardform {
  width: calc(100% - 160px);
  box-sizing: border-box;
}

.simcard .simcardform {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
}

.simcard .simcardform input {
  /* style.css gives these padding-left:40px (for the icon), padding-right:10px
     and margin-left:20px on a content-box element, so two half-width fields
     overflow the row and wrap. border-box folds the padding into the basis and
     the flex gap replaces the margin. */
  box-sizing: border-box;
  flex: 0 0 calc(50% - 20px);
  width: auto;
  min-width: 0;
  float: none;
  margin-left: 0;
}

.simcard .simcardform .simconfirmbutton {
  margin-left: auto;
  float: none;
}

@media (max-width: 900px) {
  .simcard .simcardtitle,
  .simcard .simcardintro,
  .simcard .simcardform {
    width: calc(100% - 40px);
  }
  .simcard .simcardform input {
    flex: 0 0 100%;
  }
}

.insightbars {
  float: left;
  width: 100%;
  margin: 10px 0 20px;
}

.insightbarrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.insightbarlabel {
  flex: 0 0 140px;
  font-size: 13px;
  color: #9F9FA0;
}

.insightbartrack {
  flex: 1 1 auto;
  background: #F4F4F6;
  height: 26px;
  border-radius: 2px;
  overflow: hidden;
}

.insightbarfill {
  background: #DAEFFB;
  height: 100%;
}

.insightbarfill.you {
  background: #1EA140;
}

.insightbarvalue {
  flex: 0 0 110px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: #3E3A39;
}

.insightsuggestion {
  float: left;
  width: 100%;
  background: #FFF;
  padding: 16px 20px;
  margin: 10px 0 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 2px #EAEAEA;
  font-size: 15px;
  color: #3E3A39;
  line-height: 1.6;
}

.insightlist {
  float: left;
  width: 100%;
  background: #FFF;
  margin-bottom: 20px;
  box-shadow: 0 2px 2px #EAEAEA;
}

.insightlistrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #F0F0F2;
}

.insightlistrow:last-child { border-bottom: none; }

.insightlistname { color: #4A8DCB; font-size: 15px; }
.insightlistvalue { font-weight: 700; color: #3E3A39; }

@media (max-width: 768px) {
  .insightbarlabel { flex-basis: 90px; font-size: 12px; }
  .insightbarvalue { flex-basis: 90px; font-size: 13px; }
}

/* ---- blog -----------------------------------------------------------------
 * The blog now uses the site's own header, nav and footer instead of the
 * Pelican theme's, so these only style the article body. A capped measure
 * (~760px) because long-form prose across the full 1660px container is
 * unreadable.
 */
.postlist,
.postarticle {
  float: left;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}

.centralcontainer .postlist,
.centralcontainer .postarticle {
  float: none;
}

.postcard {
  background: #FFF;
  padding: 24px 26px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 2px #EAEAEA;
  transition: box-shadow .2s;
}

.postcard:hover { box-shadow: 0 2px 8px #E2E2E2; }

.postcardtitle {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
}

.postcardtitle a { color: #3E3A39; }
.postcardtitle a:hover { color: #4A8DCB; }

.postcardmeta {
  font-size: 13px;
  color: #9F9FA0;
  margin-bottom: 12px;
}

.postcardsep { margin: 0 6px; }

.postcardexcerpt {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #555;
}

.postcardmore {
  font-size: 14px;
  font-weight: 700;
  color: #4A8DCB;
}

/* ---- article body ---------------------------------------------------------*/
.postarticletitle {
  font-size: 30px;
  line-height: 1.25;
  color: #3E3A39;
  margin: 10px 0 6px;
}

.postarticlebody {
  background: #FFF;
  padding: 28px 30px;
  box-shadow: 0 2px 2px #EAEAEA;
  font-size: 16px;
  line-height: 1.75;
  color: #444;
}

.postarticlebody p { margin: 0 0 18px; }
.postarticlebody a { color: #4A8DCB; }

.postarticlebody h2 {
  font-size: 22px;
  color: #3E3A39;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EEE;
}

.postarticlebody h3 {
  font-size: 17px;
  color: #3E3A39;
  margin: 24px 0 8px;
}

.postarticlebody img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 22px auto;
}

.postarticlebody ul,
.postarticlebody ol { margin: 0 0 18px; padding-left: 24px; }
.postarticlebody li { margin-bottom: 8px; }

.postarticlebody blockquote {
  margin: 0 0 22px;
  padding: 14px 20px;
  background: #F7F9FB;
  border-left: 3px solid #4A8DCB;
  color: #555;
}

.postarticlebody table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 15px;
}

.postarticlebody th,
.postarticlebody td {
  border: 1px solid #EAEAEA;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.postarticlebody th { background: #F7F7F9; color: #3E3A39; }

.postarticlefooter {
  float: left;
  width: 100%;
  padding: 20px 0 0;
}

.postarticlefooter a { color: #4A8DCB; font-size: 14px; font-weight: 700; }

@media (max-width: 768px) {
  .postarticlebody { padding: 20px 18px; }
  .postarticletitle { font-size: 24px; }
}

/* ---- footer ---------------------------------------------------------------
 * .footerintro is float:left with no width in style.css; header.js set it to
 * viewport - 100 so it sat beside the 50px logo. Without a width it collapses
 * onto its own line under the logo.
 */
footer .footerintro {
  width: calc(100% - 100px);
  box-sizing: border-box;
}

footer .footerseparator {
  width: calc(100% - 20px);
  box-sizing: border-box;
}

/* ---- breakpoints ---------------------------------------------------------*/

/* home.js: <1280 and >768 => three per row */
@media (max-width: 1279px) {
  .centralcontainer .jobcard,
  .centralcontainer .companycard,
  .centralcontainer .simluationcard {
    width: calc(33.3333% - 10px);
  }
}

/* home.js: <=768 => single column */
@media (max-width: 768px) {
  /* Symmetric gutter. The container carried padding-right:10px (added so a
     three-card row would not clip its last column) but no padding-left, which
     is invisible on desktop because the cards supply their own margin-left.
     Everything WITHOUT that margin -- the results table, the list rows, the
     forms, the insights cards -- sat hard against x=0 on a phone. */
  .centralcontainer {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* The container now provides the gutter, so the cards' own left margin would
     double it and leave them misaligned with everything else. */
  .centralcontainer .jobcard,
  .centralcontainer .companycard,
  .centralcontainer .simluationcard {
    width: 100%;
    margin-left: 0;
  }

  .centralcontainer .jobcard .countcontainer {
    width: calc(50% - 30px);
  }
}