/**
 * Theme Name: Superpath
 * Theme URI: https://superpath.com
 * Description: Child theme for Total WordPress theme.
 * Author: Superpath Team
 * Author URI: https://superpath.com
 * Template: Total
 * Version: 1.0.2
 */

/* Parent stylesheet should be loaded from functions.php. */

/* ============================================================================
   Post gallery — larger, sharp, uniform square thumbnails
   ----------------------------------------------------------------------------
   Pairs with changing the shortcode from size="thumbnail" to size="medium".

   Why both steps: the 150x150 crop is a 150px FILE. No CSS makes it sharp at
   200px, let alone at 400px on a retina display. Switching the shortcode to
   `medium` hands the browser a 225x300 image plus a real srcset; this file
   then crops it back to a square so the grid stays as tidy as the old one.

   Total already provides the grid via its own classes on the container
   (.wpex-grid-cols-5, .wpex-gap-20), so this only sizes the cells' contents
   and adds staging's border. Scoped to .wpex-gallery so it cannot affect
   galleries elsewhere on the site.

   Paste into the superpath-total child theme stylesheet, or
   Appearance > Customize > Additional CSS.
   ========================================================================= */

/* --- neutralise WordPress core's legacy gallery CSS --------------------- */

/* gallery_shortcode() prints an inline <style> block keyed to the container's
   id, and Total's markup keeps that id:
 *
 *     #gallery-1 .gallery-item { float:left; margin-top:10px;
 *                                text-align:center; width:20%; }
 *     #gallery-1 img { border:2px solid #cfcfcf; }
 *
 * That float/20% layout is for core's old <dl> gallery. Against Total's CSS
 * grid it squeezes every figure to 20% of its own track — a 350px column
 * renders a 70px image.
 *
 * `!important` is not laziness here: the offending selector carries an ID
 * (specificity 1,1,0) and no class-based selector can ever outrank it. The
 * gallery id is generated per-gallery (gallery-1, gallery-2, ...) so it can't
 * be matched reliably either.
 *
 * THE CLEANER FIX is to stop core printing the block at all — one line in
 * functions.php, see the note at the end of this file. Keep these overrides
 * anyway; they cost nothing and cover the case where a plugin re-adds it. */

.wpex-gallery .gallery-item {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.wpex-gallery .gallery-item a {
	display: block;
	line-height: 0;   /* kills the inline-image descender gap */
}

.wpex-gallery .gallery-item img {
	/* Override the width="150" height="150" attributes WordPress prints. */
	width: 100%;
	height: auto;
	max-width: none;

	/* Uniform squares from portrait sources. Change to 4 / 3, 3 / 2, or
	   remove entirely if you would rather keep each photo's real shape. */
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;

	display: block;
	box-sizing: border-box;
	vertical-align: middle;

	/* Keep this. The 2px grey border currently comes from core's
	   `#gallery-1 img` rule — the same place staging gets it. If you disable
	   the legacy block via functions.php, this declaration is what preserves
	   the border. */
	border: 2px solid #cfcfcf;
}

/* --- responsive columns -------------------------------------------------- */

/* Total's .wpex-grid-cols-5 stays at 5 across on small screens, which makes
   20 thumbnails unreadably small on a phone.

   Total drives its grid off the custom property --wpex-grid-columns (verified
   on the live site: `.wpex-grid-cols-5 { --wpex-grid-columns: 5 }`). Set that
   property, NOT grid-template-columns — overriding the template directly
   fights Total's own rule and desyncs anything else keyed to the variable. */

@media (max-width: 1024px) {
	.wpex-gallery.wpex-grid-cols-5 {
		--wpex-grid-columns: 4;
	}
}

@media (max-width: 768px) {
	.wpex-gallery.wpex-grid-cols-5 {
		--wpex-grid-columns: 3;
	}
}

@media (max-width: 480px) {
	.wpex-gallery.wpex-grid-cols-5 {
		--wpex-grid-columns: 2;
	}

	.wpex-gallery.wpex-gap-20 {
		gap: 10px;
	}
}

/* --- optional: hover affordance ----------------------------------------- */

/* Staging has none. Included because these are now lightbox triggers and
   nothing else signals that they are clickable. Delete for exact parity. */

.wpex-gallery .gallery-item img {
	transition: opacity .15s linear, border-color .15s linear;
}

.wpex-gallery .gallery-item a:hover img {
	opacity: .85;
	border-color: #a41d26;
}

.wpex-gallery .gallery-item a:focus-visible img {
	outline: 2px solid #a41d26;
	outline-offset: 2px;
}

/* ============================================================================
   If you want them genuinely LARGER than staging rather than just sharp
   ----------------------------------------------------------------------------
   Staging also renders these at 150px per image — its cells are 220px wide
   with a 150px image centred inside. So "large like staging" gets you sharp,
   not bigger.

   Measured on the live site: --wpex-container-width is 1300px, gap is 20px.
   So the on-screen size of each image is set entirely by the column count:

     columns="5"  ->  (1300 - 4*20) / 5  =  244px   <- current
     columns="4"  ->  (1300 - 3*20) / 4  =  310px
     columns="3"  ->  (1300 - 2*20) / 3  =  420px
     columns="2"  ->  (1300 - 1*20) / 2  =  640px

   columns="4" is the sweet spot for size="medium": 310px cells against
   ~300px files means almost no upscaling at 1x, and srcset covers retina.

   Change it on the post, not in CSS, so WordPress's width/height attributes
   and srcset stay honest:

     wp eval '
     $p = get_post(11174);
     $c = str_replace("columns=\"5\"", "columns=\"4\"", $p->post_content);
     wp_update_post(["ID" => 11174, "post_content" => $c]);
     '

   Then swap .wpex-grid-cols-5 for .wpex-grid-cols-4 in the media queries
   above, since Total renames the container class to match.

   Do NOT reach for size="large" without checking first. All 20 of these
   attachments have a `medium` file (verified: 225x300 through 300x300,
   varying by orientation, all returning 200), but at least one has NO
   `large` derivative. WordPress silently falls back to the FULL size when a
   requested size is missing, so that one image would ship a 1536x2048 file
   into a 340px cell — a multi-megabyte download for one thumbnail. Confirm
   coverage before switching:

     wp eval 'foreach (get_attached_media("image", 11174) as $a) {
       $m = wp_get_attachment_metadata($a->ID);
       if (empty($m["sizes"]["large"])) echo "no large: {$a->ID} {$a->post_title}\n";
     }'
   ========================================================================= */

/* ============================================================================
   Contact Us CTA — Bridge/qode parity on the Total theme
   ----------------------------------------------------------------------------
   The blog pullover copied Bridge's RENDERED [call_to_action] markup into
   production's post_content. The class names came across; the Bridge
   stylesheet that gives them meaning did not — production runs Total +
   superpath-total, and no qode CSS is loaded at all.

   Everything below is Bridge's own declarations for this component, read off
   the staging page. Where the Superpath child theme overrode a Bridge default
   (button padding, text-transform, border-radius) the OVERRIDDEN value is
   used here, so this matches what staging actually renders — not Bridge stock.

   Two values already arrive as inline styles on the markup and need no help:
     .call_to_action  background-color: #000000
     a.qbutton        background-color / border-color: #a41d26
   They are restated below anyway so the CTA still looks right if a future
   paste omits them.

   NOTE: the inline  style="color: ffffff"  on the button is INVALID CSS —
   it is missing the #. Browsers discard it, which is why the button text
   currently renders in Total's dark grey link colour. The rule below is what
   makes it white. Don't "fix" the inline style and remove this.

   Paste into the superpath-total child theme stylesheet, or
   Appearance ▸ Customize ▸ Additional CSS.
   ========================================================================= */

/* --- container ----------------------------------------------------------- */

.call_to_action {
	display: block;
	padding: 51px 21px;
	background-color: #000;
	position: relative;
        margin-top: 2rem;
}

/* Bridge positions the button against the inner grid, so both need to be
   positioning contexts. */
.call_to_action .text_wrapper,
.call_to_action .two_columns_75_25 {
	position: relative;
}

/* Total does not define .clearfix; the grid below floats, so it needs one. */
.call_to_action .clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* --- 75/25 grid ---------------------------------------------------------- */

.call_to_action .two_columns_75_25 {
	width: 100%;
}

.call_to_action .two_columns_75_25 > .column1 {
	width: 75%;
	float: left;
	box-sizing: border-box;
	padding-right: 20px;
}

.call_to_action .two_columns_75_25 > .column2 {
	width: 25%;
	float: left;
	box-sizing: border-box;
}

/* --- text ---------------------------------------------------------------- */

/* Bridge sets the type on the wrapper and lets h3/p inherit. The markup's own
   inline spans (color:#ffffff, font-size:14pt) then win where present. */
.call_to_action .text_wrapper .call_to_action_text {
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 1px;
}

.call_to_action .text_wrapper .call_to_action_text h3 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3043;
	letter-spacing: 1px;
	text-transform: capitalize;
	color: #fff;

	/* Staging renders this in Open Sans Condensed. That font is NOT loaded on
	   production — see the note at the bottom of this file before uncommenting. */
	/* font-family: "Open Sans Condensed", sans-serif; */
}

.call_to_action .text_wrapper .call_to_action_text p {
	margin: 0;
	line-height: 26px;
	color: #fff;

	/* Staging: Raleway. Also not loaded on production. */
	/* font-family: Raleway, sans-serif; */
}

/* --- button -------------------------------------------------------------- */

/* Bridge pins the button to the right of the grid and centres it vertically
   against the full height of the text column. */
.call_to_action .column2.button_wrapper {
	text-align: right;
}

.call_to_action .column2.button_wrapper .qbutton {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin: 10px 0 0;
}

.call_to_action .qbutton {
	/* Bridge declares inline-block, but the absolute positioning above
	   blockifies it to `block` per spec — on staging too. Kept as-is for
	   parity, and because it is what applies on the mobile fallback where
	   the button returns to the flow. Not a bug; don't "correct" it. */
	display: inline-block;
	box-sizing: content-box;
	width: auto;
	height: 39px;
	line-height: 39px;
	padding: 0 14px;
	border: 2px solid #a41d26;
	border-radius: 0;
	background-color: #a41d26;
	color: #fff;             /* the invalid inline colour is discarded; this is the fix */
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: left;
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	outline: 0;
	transition: color .1s linear, background-color .1s linear, border-color .1s linear;
}

/* DELIBERATE DEVIATION FROM STAGING — the only one in this file.
   The markup carries data-hover-background-color="#a41d26", which is the
   same red as the resting state, so Bridge's JS produces no visible hover
   change at all on staging. That JS isn't on production anyway. Rather than
   reproduce a no-op, this darkens on hover so the button reads as
   interactive. For literal parity, delete this block and the button will
   simply not respond to hover, exactly as on staging. */
.call_to_action .qbutton:hover,
.call_to_action .qbutton:focus {
	background-color: #8a1820;
	border-color: #8a1820;
	color: #fff;
}

.call_to_action .qbutton:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- narrow screens ------------------------------------------------------ */

/* Bridge's absolute positioning has nowhere to go once the columns stack, so
   the button returns to the flow. */
@media (max-width: 768px) {
	.call_to_action {
		padding: 32px 21px;
	}

	.call_to_action .two_columns_75_25 > .column1,
	.call_to_action .two_columns_75_25 > .column2 {
		width: 100%;
		float: none;
		padding-right: 0;
	}

	.call_to_action .column2.button_wrapper {
		text-align: left;
	}

	.call_to_action .column2.button_wrapper .qbutton {
		position: static;
		transform: none;
		margin: 20px 0 0;
	}

	.call_to_action .text_wrapper .call_to_action_text h3 {
		font-size: 22px;
	}
}

/* ============================================================================
   About the two commented-out font-family lines
   ----------------------------------------------------------------------------
   Staging is a Bridge site using Open Sans Condensed for headings and Raleway
   for body copy. Production is a Total site using Typekit's neue-haas-grotesk
   for headings and Inter for body copy. Neither Bridge font is loaded on
   production, so uncommenting those lines without also enqueuing the fonts
   gets you a system-sans fallback — which looks worse than either site.

   As written, this file matches staging on every structural and colour
   property and lets the type render in production's own fonts, so the CTA
   looks native to the page it now lives on. That is usually what you want.

   For a literal pixel match instead: enqueue Open Sans Condensed 600 and
   Raleway 500/700 from Google Fonts, then uncomment the two font-family
   lines above and add  font-family: Raleway, sans-serif;  to
   .call_to_action .qbutton  (Bridge's button inherits the body font).
   ========================================================================= */