/*
Theme Name:   Maag Child
Theme URI:    https://codesupply.co/product/maag/
Description:  Child theme for the network. Exists so template overrides and CSS
              have somewhere to live that survives a parent theme update.
              Behaviour belongs in mu-plugins, not here — mu-plugins survive a
              theme switch and are identical across all 50 sites.
Author:       Network
Template:     maag
Version:      1.1.0
Text Domain:  maag-child
*/

/* Parent styles are enqueued from functions.php, not imported here:
   @import blocks rendering until the file is fetched.

   Everything below was lifted from tattoonexus, which was styled by hand over
   a year and is the only site in the network where these three things look
   right. Copied here so site fifty gets what site one had, rather than being
   rebuilt from memory each time.

   Nothing here is site-specific: every colour either inherits or comes from a
   --cs-* custom property the theme sets per site. The one hardcoded value is
   Pinterest's own red, and that is deliberate — see the note on it. */


/* =============================================
   Pinterest icon on the author's social links

   A theme bug, not a preference. Maag maps the author's Pinterest URL to a
   Reddit glyph, so every author box in the network advertises the wrong
   network. The SVG is masked in as a background so it inherits the surrounding
   text colour and needs no per-site variant.
   ============================================= */

.cs-page__author-social-links a[href*="pinterest.com"] svg {
	display: none !important;
}

.cs-page__author-social-links a[href*="pinterest.com"]::before {
	content: '' !important;
	display: inline-block !important;
	width: 23px;
	height: 23px;
	background-color: var(--cs-color-font, currentColor);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}


/* =============================================
   Powerkit Author widget, in the sidebar

   Placed on the master in Appearance > Widgets as `powerkit_widget_author`,
   set to "current author" and "posts only", so it follows whoever wrote the
   post and appears on single posts alone. Colours inherit or come from
   --cs-color-secondary, so this needs no per-site variant either.
   ============================================= */

.powerkit_widget_author .pk-widget-author-container {
	text-align: center;
	padding: 24px 20px;
}

.powerkit_widget_author .widgettitle {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 16px;
	color: inherit;
}

.powerkit_widget_author .pk-author-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 14px;
	line-height: 1.3;
}

.powerkit_widget_author .pk-author-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.powerkit_widget_author .pk-author-title a:hover {
	opacity: 0.75;
}

.powerkit_widget_author .pk-author-avatar {
	margin-bottom: 16px;
}

.powerkit_widget_author .pk-author-avatar img {
	border-radius: 50%;
	width: 90px !important;
	height: 90px !important;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease;
}

.powerkit_widget_author .pk-author-avatar img:hover {
	transform: scale(1.05);
}

.powerkit_widget_author .author-description {
	font-size: 14px;
	line-height: 1.65;
	margin-top: 4px;
	color: var(--cs-color-secondary);
}

.powerkit_widget_author .pk-author-data {
	margin-top: 4px;
}


/* =============================================
   Powerkit "Save to Pinterest" button

   Pinterest is this network's primary traffic source, so this button is the
   one control on the page worth making obvious. Icon plus the word "Save",
   which is what the reader is looking for.

   #e60023 is Pinterest's own red and stays hardcoded on purpose. It has to
   read as Pinterest at a glance; painted in each site's accent it becomes
   just another button and stops being recognised.
   ============================================= */

.pk-pin-it {
	border-radius: 10px;
	--pk-pinterest-pinit-background: #e60023;
	--pk-pinterest-pinit-background-hover: #b60000;
	--pk-pinterest-pinit-font-size: 24px;

	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.5rem;
}

.pk-pin-it i {
	display: inline-block;
	vertical-align: text-top;
	margin-top: 2px;
}

.pk-pin-it.pk-pin-it-visible::after {
	content: "Save";
	margin-left: 0.4rem;
	font-weight: var(--cs-font-post-content-weight);
	font-family: var(--cs-font-post-content-family), sans-serif;
	font-size: 18px;
	color: #ffffff;
	display: inline-block;
	vertical-align: top;
}