/* An image with no explicit sizing of its own (a raw <img> dropped into
   content with a fixed width/height attribute bigger than its column, or
   none at all) otherwise renders at its native pixel size and overflows
   whatever column it's in — content, sidebar, wherever. This is the one
   sitewide floor every image gets; anything more specific elsewhere
   (thumbnail strips, icons with their own fixed box, etc.) already wins
   on specificity and is untouched by it. */
img {
	max-width: 100%;
	height: auto;
}

/* Page/post layout controller: 15% left sidebar, 70% content, 15% right
   sidebar. Grid with fr tracks (not flex %) so the gap is never added on
   top of 100% — fr units divide the space left after the gap, so this
   can't overflow regardless of gap size. DOM order is content, then
   left sidebar, then right sidebar; grid-column puts them visually in
   the right place on desktop, and that's also the stacking order on
   mobile once grid-column is reset to the single column. */

.nonotami-layout {
	display: grid;
	/* The whole track list, not just a width — inc/layout-customizer.php
	   swaps this between a plain 3-track list and a 5-track one (sidebar,
	   border, content, border, sidebar) depending on whether the sidebar
	   border is on; a custom property can hold any token stream, so the
	   border's exact px width becomes a real grid track when it exists,
	   and `fr` automatically computes the sidebar/content split against
	   whatever's left after it — the border's thickness never overlaps
	   either side. See the --nonotami-content-column / -sidebar-right-
	   column vars below, which shift in step with this. */
	grid-template-columns: var( --nonotami-grid-columns, 15fr 70fr 15fr );
	/* Both a customizer setting now (inc/layout-customizer.php, Sidebars/
	   Content cards) — 0 is a real, reachable value for either, so a
	   sidebar/content setup with every padding already at 0 can actually
	   reach true edge-to-edge instead of still showing this fixed gap. */
	gap: var( --nonotami-sidebar-content-gap, 2rem );
	/* Breathing room from the viewport edge, at any screen size — not a
	   percentage, so it doesn't grow or shrink with the viewport the way
	   the old mobile `width: 95%` did. */
	padding: 0 var( --nonotami-page-gutter, 2rem );
	box-sizing: border-box;
	/* "start" (not the grid default "stretch") so a sidebar's own box is
	   only as tall as its content — sticky positioning needs that: a box
	   already stretched to the full row height has no room left to move
	   within, so "sticky" would have nothing visible to do. The sidebar
	   border pseudo-elements below override this per-item with their own
	   align-self, since they need the opposite (full height). */
	align-items: start;
}

.nonotami-content,
.nonotami-sidebar-left,
.nonotami-sidebar-right {
	min-width: 0;
}

.nonotami-content {
	/* grid-row: 1 is explicit, not assumed — without it, auto-placement
	   put this and the sidebars on separate rows (each stacked below the
	   last) instead of sharing row 1 side by side, even though their
	   columns never overlap. Pinning all three to row 1 removes that
	   ambiguity outright instead of relying on auto-placement to figure
	   it out. */
	grid-row: 1;
	/* 2 normally, 3 when the sidebar border's extra track exists (see
	   --nonotami-grid-columns above). */
	grid-column: var( --nonotami-content-column, 2 );
	/* Percent of the middle column (the customizer's "Content area
	   width"), but never wider than that column itself — beyond it, the
	   extra width is just empty space either side, still centered. */
	max-width: var( --nonotami-content-width, 90% );
	margin: 0 auto;
	padding-top: var( --nonotami-content-top-padding, 3rem );
	padding-bottom: var( --nonotami-content-bottom-padding, 1rem );
}

/* Both sidebars: the grid's 2rem `gap` already gives them their left/right
   breathing room from the content column. align-items: stretch (the grid
   default on this axis too) — NOT center: a widget like the post pin map
   (nonotami-maps) or the table of contents sizes its own content with a
   plain CSS `width: 100%` of its wrapper, and a flex item under
   align-items: center shrink-wraps to its content instead of filling the
   row, which makes that 100% resolve against an indeterminate width and
   collapse to nothing — broke the map outright. Centering content that
   doesn't declare its own width (e.g. the logo) is each widget's own job
   now (plain `margin: 0 auto` works fine on a normal, full-width flex
   item) rather than this container's — "sidebar centers what goes in,
   what's in decides what they do themselves" still holds, it just isn't
   align-items doing that centering any more. */
.nonotami-sidebar-left,
.nonotami-sidebar-right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	gap: 2rem;
	padding: var( --nonotami-sidebar-padding-y, 2rem ) var( --nonotami-sidebar-padding-x, 1rem );
}

.nonotami-sidebar-left {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
}

/* Sidebar logo (now an optional widget — see Nonotami_Logo_Widget in
   inc/widgets.php — not automatic markup here any more). Renders nothing
   when no custom logo is set, never a text fallback. Centered via its own
   margin, not this container's text-align (block elements ignore that) —
   the logo's own job now that the sidebar itself just stretches. */
.nonotami-sidebar-logo-widget img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

/* The nonotami-maps plugin's post pin map carries its own
   `margin: 1.5rem 0` (css/frontend.css, in that plugin) for its primary
   use — dropped inline in post content via shortcode, where it needs
   that breathing room from the surrounding paragraphs. Inside a widget
   (".widget", registered by this theme — sidebar and footer alike) the
   sidebar's own flex `gap` between stacked widgets already provides
   that spacing, so the plugin's own margin on top of it was close to
   doubling the gap above/below it specifically, more than every other
   widget gets. Zeroed only in that context — the shortcode/in-content
   use elsewhere is untouched. */
.widget .nonotami-maps-pin-map {
	margin: 0;
}

.nonotami-sidebar-right {
	grid-row: 1;
	/* 3 normally, 5 when the sidebar border's extra track exists. */
	grid-column: var( --nonotami-sidebar-right-column, 3 );
}

/* Sidebar border: a real grid column (see --nonotami-grid-columns above),
   not a CSS border on either sidebar's own box — that box is only as
   tall as its widget content (align-items: start above, needed for
   sticky), so a border on it would stop wherever the content ends, not
   run the full column height. These pseudo-elements of .nonotami-layout
   itself are grid items too, placed in that border track and stretched
   (align-self, overriding the container's align-items: start just for
   these two) to the row's full height independently of either sidebar's
   actual content — so the line always runs the full column, down to
   wherever .nonotami-layout itself ends (i.e. right above the footer,
   whether or not the footer is sticky — stickiness doesn't change where
   the layout's own box ends in the document). Gated by a body class
   (inc/layout-customizer.php) rather than existing unconditionally at
   zero width, so there's nothing to place when it's off. */
body.nonotami-sidebar-border-left-on .nonotami-layout::before,
body.nonotami-sidebar-border-right-on .nonotami-layout::after {
	content: '';
	grid-row: 1;
	align-self: stretch;
	background: var( --nonotami-sidebar-border-color, #ddd );
}

/* Column index is computed in inc/layout-customizer.php from whichever
   tracks actually precede it — it shifts depending on whether the OTHER
   side's sidebar/border tracks exist too, so it's a var, never a fixed
   number. */
body.nonotami-sidebar-border-left-on .nonotami-layout::before {
	grid-column: var( --nonotami-sidebar-left-border-column, 2 );
}

body.nonotami-sidebar-border-right-on .nonotami-layout::after {
	grid-column: var( --nonotami-sidebar-right-border-column, 4 );
}

/* Desktop only: both sidebars stick below the sticky header as the page
   scrolls. Because each sidebar's own box is only as tall as its content
   (align-items: start, above), this naturally stops sticking once the
   bottom of .nonotami-layout (i.e. the end of the — normally much
   taller — content column) scrolls past it; it doesn't need its own
   internal scrollbar for that. */
@media (min-width: 783px) {
	.nonotami-sidebar-left {
		/* Toggled independently by the customizer's "Sticky left sidebar"
		   control — see inc/sticky.php, which sets
		   --nonotami-sticky-sidebar-left to `sticky` or `static`. */
		position: var( --nonotami-sticky-sidebar-left, sticky );
		top: var( --nonotami-header-height, 0px );
		/* Only actually constrained when sticky — inc/sticky.php sets
		   these two alongside the position above, to "none"/"visible"
		   when not sticky, so a static sidebar is never clipped. A long
		   widget (e.g. a tall table of contents) scrolls inside the
		   sidebar itself instead of pushing past the viewport. */
		max-height: var( --nonotami-sidebar-left-maxheight, none );
		overflow-y: var( --nonotami-sidebar-left-overflow, visible );
	}

	.nonotami-sidebar-right {
		/* Independent of the left sidebar — see "Sticky right sidebar"
		   in inc/sticky.php. */
		position: var( --nonotami-sticky-sidebar-right, sticky );
		top: var( --nonotami-header-height, 0px );
		max-height: var( --nonotami-sidebar-right-maxheight, none );
		overflow-y: var( --nonotami-sidebar-right-overflow, visible );
	}
}

@media (max-width: 782px) {
	.nonotami-layout {
		grid-template-columns: 1fr;
		gap: 0;
		/* Mobile gutter is a percentage of the viewport, not the desktop's
		   fixed 2rem — fixed felt like "much gap" at phone widths (2rem
		   is already ~10% of a 375px screen on each side, before content
		   even starts). width: 95% + margin: auto centers this same way
		   .nonotami-content below centers itself within it. */
		padding: 0;
		width: 95%;
		max-width: 95%;
		margin: 0 auto;
	}

	.nonotami-content,
	.nonotami-sidebar-left,
	.nonotami-sidebar-right {
		/* Back to auto so each one falls into its own row, in DOM order
		   (content, then left sidebar, then right sidebar) — the row:1
		   pin above is desktop-only, and would otherwise stack all three
		   on top of each other here instead of one per row. */
		grid-row: auto;
		grid-column: 1;
		/* The container's own 95% width (above) is what gives the
		   left/right breathing room here now — this is just full width
		   within that. .nonotami-content's own max-width (the customizer's
		   "Content area width") still applies on top of this and still
		   centers within it via its own margin: 0 auto, same as desktop. */
		width: 100%;
	}

	/* The border columns don't exist in the single-column mobile grid —
	   hide outright rather than let them fall into an unintended
	   implicit column. */
	body.nonotami-sidebar-border-left-on .nonotami-layout::before,
	body.nonotami-sidebar-border-right-on .nonotami-layout::after {
		display: none;
	}
}