/*
 * Site container, gutters, header alignment and job description width
 * jobs-in-ghana (child theme)
 * ---------------------------------------------------------------------------
 * Global: this file is not scoped to a page type. It changes horizontal
 * geometry (container widths, side gutters, column alignment, the mobile
 * header row) plus the width of the single job description column.
 *
 * Container widths come from Ignition's own customizer setting
 * site_layout_container_width, set to:
 *     { desktop: 1280, tablet: 1024, mobile: 640 }
 * which emits (at +60px to allow for gutters):
 *     min-width 1340px -> 1280px
 *     min-width 1084px -> 1024px
 *     min-width  700px ->  640px
 * Below those, the parent theme's own steps still apply:
 *     1230px -> 1200px,  992px -> 940px,  768px -> 720px,  576px -> 540px
 *
 * What this file adds on top of that:
 *   1. Real side gutters. The theme used a flat 15px at every width, so the
 *      mobile gutter was 15px and the desktop gutter was 15px.
 *   2. A matching negative bleed on .row and matching column padding, so the
 *      header, page titles, main content and footer all start on the same
 *      vertical line at every width. Ignition's
 *      `.has-sidebar > [class^="col"]:first-child { padding-right: 15px }`
 *      (specificity 0-4-0) has to be overridden explicitly, otherwise the
 *      first column comes out with a 28px left gutter and a 15px right one.
 *   3. The WordPress block container chain used by the company and taxonomy
 *      archives runs its own parallel 15px gutter, which is what made those
 *      pages 1px wider than the viewport at 375px and 320px.
 *   4. The custom footer wrapper (defined in Customizer > Additional CSS as
 *      `width: 90%; max-width: 1200px`) is pinned to the same stepped widths
 *      as .container so it aligns instead of trailing 40px short on desktop.
 *   5. Single job listings: .content-wrap carried `padding: 70px 100px`,
 *      which cost 200px of a 917px column and left the job description at
 *      637px. It now uses the same gutter as the rest of the site, so the
 *      description fills the column it actually has.
 *   6. The mobile header row is allowed to wrap. The logo (140px) plus the
 *      Register button plus the Menu trigger need ~397px, more than the
 *      header can hold below ~430px, so .head-content-slot-end was pushed
 *      past the right edge of the viewport at 375px and 320px.
 */

:root {
	/* Side gutter: generous on desktop/tablet, 16px on mobile. */
	--sobia-gutter: 28px;
}

@media (max-width: 1199px) {
	:root {
		--sobia-gutter: 24px;
	}
}

@media (max-width: 575px) {
	:root {
		--sobia-gutter: 16px;
	}
}

/* ===========================================================================
   1. Container, row bleed and column padding
   The theme's own gutter is one flat 15px at every breakpoint. All three of
   these have to move together: if only the container padding changes, the
   row's negative margins cancel it out again.
   =========================================================================== */

body .container {
	padding-left: var(--sobia-gutter);
	padding-right: var(--sobia-gutter);
}

body .row {
	margin-left: calc(-1 * var(--sobia-gutter));
	margin-right: calc(-1 * var(--sobia-gutter));
}

body [class*="col-"] {
	padding-left: var(--sobia-gutter);
	padding-right: var(--sobia-gutter);
}

/* Ignition gives the first column of a sidebar row a fixed 15px right
   padding, at a specificity this file has to beat on purpose. */
body .has-sidebar:not(.layout-reverse) > [class^="col"]:first-child {
	padding-right: var(--sobia-gutter);
}

/* ===========================================================================
   2. WordPress block container chain (company + taxonomy archives)
   Same idea as section 1, for the block editor's own grid, which ships with a
   separate 15px gutter of its own.
   =========================================================================== */

/* Ignition generates `.theme-grid > .wp-block-gutenbee-container-inner
   { padding: 15px }` inside its container-width media queries, at
   specificity 0-2-0, so the .theme-grid form has to be matched explicitly. */
body .theme-grid > .wp-block-gutenbee-container-inner,
body .wp-block-gutenbee-container-inner {
	padding-left: var(--sobia-gutter);
	padding-right: var(--sobia-gutter);
}

body .wp-block-gutenbee-container-row {
	margin-left: calc(-1 * var(--sobia-gutter));
	margin-right: calc(-1 * var(--sobia-gutter));
}

body .wp-block-gutenbee-column,
body .wp-block-gutenbee-container-row > .wp-block-gutenbee-column,
body [class*="wp-block-gutenbee-container"] > .wp-block-gutenbee-column {
	padding-left: var(--sobia-gutter);
	padding-right: var(--sobia-gutter);
}

/* ===========================================================================
   3. Footer
   `.sobia-footer-hero .footer-wrapper` is defined in the Customizer's
   Additional CSS box (width 90%, max-width 1200px) and has no .container
   ancestor, so it is given the same stepped widths here. Keep these steps in
   step with the ones above.
   =========================================================================== */

body .sobia-footer-hero .footer-wrapper {
	width: 100%;
	max-width: 100%;
	padding-left: var(--sobia-gutter);
	padding-right: var(--sobia-gutter);
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 576px) {
	body .sobia-footer-hero .footer-wrapper {
		width: 540px;
	}
}

@media (min-width: 768px) {
	body .sobia-footer-hero .footer-wrapper {
		width: 720px;
	}
}

@media (min-width: 992px) {
	body .sobia-footer-hero .footer-wrapper {
		width: 940px;
	}
}

@media (min-width: 1230px) {
	body .sobia-footer-hero .footer-wrapper {
		width: 1200px;
	}
}

@media (min-width: 1340px) {
	body .sobia-footer-hero .footer-wrapper {
		width: 1280px;
	}
}

/* ===========================================================================
   4. Single job listing - widen the description
   Scoped to body.single-job_listing. Only the layout wrapper's padding is
   touched: the card's own padding (`.single_job_listing { padding: 40px }`
   from the Customizer) and every component inside it are left alone.
   Measured at 1440: job_description 637px -> 781px.
   =========================================================================== */

/* The content column already carries the site gutter, so the wrapper keeps
   vertical padding only. Measured at 1440: job_description 637px -> 796px,
   and its text edge now sits on the same line as the header logo. */
body.single-job_listing .content-wrap {
	padding: 40px 0;
}

/* The in-column job header (title + posted/closing notice) sits outside the
   .single_job_listing card, so it needs the card's own inset to line up with
   the description text below it now that the wrapper has no horizontal
   padding. */
body.single-job_listing .sobia-job-header {
	padding-left: 40px;
	padding-right: 40px;
}

/* At 768px and below the Customizer drops the card to `padding: 24px 16px`, so the
   header inset has to follow or the title and the description below it end up
   on different lines. */
@media (max-width: 768px) {
	body.single-job_listing .sobia-job-header {
		padding-left: 16px;
		padding-right: 16px;
	}
}

body.single-job_listing .comments-area {
	padding-left: 0;
	padding-right: 0;
}

body.single-job_listing .entry-author-box {
	padding: 24px;
}

/* ===========================================================================
   5. Mobile header overhang
   Below the theme's 992px nav breakpoint the desktop menu is hidden and the
   header row holds the logo plus the Register and Menu controls. They need
   ~397px, which overflows the row below ~430px. Wrapping keeps every control
   reachable instead of pushing it off-screen.
   =========================================================================== */

@media (max-width: 991px) {
	body .head-mast-inner {
		flex-wrap: wrap;
		row-gap: 12px;
		/* Cancels the theme's own padding: -10px margin + 12px padding and
		   the branding's 10px margin otherwise shift the logo 12px right of
		   the gutter that the rest of the page aligns to. */
		padding-left: 0;
		padding-right: 0;
	}

	/* Let the slot shrink so the flex row can rebalance before it wraps. */
	body .head-content-slot-end {
		min-width: 0;
	}
}

@media (max-width: 479px) {
	/* Tighter controls and a logo that scales down, so the row still fits on
	   one line at 375px. Below that it wraps, which is fine: nothing is cut. */
	body .head-content-slot-item {
		margin-left: 3px;
		margin-right: 3px;
	}

	body .head-mast .mobile-nav-trigger {
		padding: 6px 11px;
	}

	body .head-mast .sobia-account-btn {
		padding: 6px 9px;
	}

	body .site-branding {
		max-width: 30%;
		/* Flex line breaking counts the outer size, so the theme's 10px
		   margins on this block are what tipped the row over at 375px
		   (117 + 20 + 207 = 344 against 343 of available width). */
		/* Trim only the trailing margin: flex line breaking counts the outer
		   size, and the theme's 10px+10px is what tipped the row over at
		   375px (117 + 20 + 195 = 332 against 343 available). Keeping the
		   leading 10px leaves the logo on the gutter line. */
		margin-right: 6px;
	}

	/* The logo image carries its own max-width (180px) and does not follow
	   the shrunken .site-branding, so it kept overflowing and pushed the
	   controls onto a second row. */
	body .site-branding img {
		max-width: 100%;
		height: auto;
	}
}

/* ===========================================================================
   6. Full-bleed helpers
   Ignition emits `.alignwide { width: calc(<container> - 30px) }`, which would
   no longer match the gutters above. These centre on the container instead.
   =========================================================================== */

body .alignwide,
[class*="-template-fullwidth-narrow"] .alignwide {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

body .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}