/* ==========================================================================
Tool page sidebar ad rail (Raptive enhanced sidebar)
--------------------------------------------------------------------------
Adds a right-hand ad rail to interactive tool pages. Raptive targets the
body class `sidebar-ready` and serves a sticky sidebar unit into `.tool-rail`.
`sidebar-ready` is added by js/tool-sidebar.js ONCE at initial load, only if
the viewport is >= 1120px. It is never toggled. So the class is present only
when the page loaded wide enough for the rail, which is what Raptive keys
sidebar serving + Sticky Footer suppression off. Below 1120px at load the
class is absent and the page is its native single column. Do NOT hardcode it
in the HTML.
IMPORTANT — zoom: the site sets `html { zoom: 0.8 }`, so every CSS pixel
renders at 0.8x. Widths in THIS file are CSS px; multiply by 0.8 for the
visual size Raptive measures:
rail 375px CSS -> 300px visual (full standard sidebar sizes)
content 910px CSS -> 728px visual (Raptive's minimum content width)
Usage:
(top of body)
...
========================================================================== */
.sidebar-ready .tool-layout {
display: grid;
/* 910px CSS content (~728 visual) beside a 375px CSS rail (~300 visual) */
grid-template-columns: minmax(910px, 1fr) 375px;
gap: 32px;
align-items: start;
max-width: 1400px; /* editorial default (Clacton etc.); fits 910 + 375 rail */
margin: 0 auto;
padding: 0 24px;
}
/* Wider variant for full-width tools (swingometer, maps) */
.sidebar-ready .tool-layout--wide {
max-width: 1720px;
}
/* The content child fills its grid cell: drop its own centering + horizontal
padding (the grid supplies both). Vertical padding is left intact. */
.sidebar-ready .tool-layout > .by-page,
.sidebar-ready .tool-layout > .calc-container {
max-width: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}
.sidebar-ready .tool-rail {
width: 375px; /* ~300 visual px under html{zoom:0.8} */
}
/* Raptive injects the ad here. Sticky so it follows the scroll within the rail.
min-height reserves space so the column doesn't collapse before the ad loads. */
.sidebar-ready .tool-rail__sticky {
position: sticky;
top: 24px;
min-height: 600px;
}
/* If the window is narrower than the rail needs, fold back to a single column
and hide the rail so nothing overflows. This is driven by the `tool-collapsed`
class that js/tool-sidebar.js toggles from window.innerWidth, NOT by a CSS
@media query: under html{zoom:0.8} a CSS @media reads a different width than
the JS that sets `sidebar-ready`, so the two could disagree and collapse the
layout while the class says it is wide enough. Same-measurement classes can't. */
.sidebar-ready.tool-collapsed .tool-layout {
display: block;
max-width: 960px;
padding: 0;
margin: 0 auto;
}
.sidebar-ready.tool-collapsed .tool-layout--wide {
max-width: 1400px;
}
.sidebar-ready.tool-collapsed .tool-layout > .by-page,
.sidebar-ready.tool-collapsed .tool-layout > .calc-container {
max-width: none;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.sidebar-ready.tool-collapsed .tool-rail {
display: none;
}