/* notices-parity.css — parity layer for the six notices pages (privacy-policy, terms-of-use,
 * cookie-policy, affiliate-disclosure, featured-partner, submit-coupon).
 * Enqueued LAST on those pages (see functions.php `cb-notices-parity`), after
 * static-pages.css and static-cb-pages.css, which carry the ported CouponBirds markup rules.
 * Each block is measured against evidence/couponbirds_pages/notices/{desktop,mobile}/.
 */

/* Viewport-specific markup: the captures come from CB's own viewport-dependent render, so a node
 * that only exists in one of them carries `data-cb-variant="desktop|mobile"` (set by
 * .agent/tmp/merge_variants.py) and is hidden at the other width. An attribute rather than a class
 * because page-diff keys container-only nodes by their class list, and a class would also have to
 * survive whatever rules the capture applies to it. */
@media (max-width: 767px) {
	[data-cb-variant="desktop"] {
		display: none !important;
	}
}

@media (min-width: 768px) {
	[data-cb-variant="mobile"] {
		display: none !important;
	}
}

/* == legal notices (privacy-policy, cookie-policy, terms-of-use, affiliate-disclosure) ==
 * header.php wraps every page in <main class="container-home-page-index container-fluid">, so two
 * rules from couponbirds-source.css reach the ported bodies, which the captures (rendered under a
 * plain <main class="container…">) never saw:
 *   - `.container-home-page-index .container { padding: 0 }` kills the capture's 15px gutters
 *   - Bootstrap 5's reboot (`ol, ul { padding-left: 2rem }`, `li { list-style: none }`) replaces
 *     the Bootstrap 4-era defaults the captures show
 * plus the wrapper's `.container-home-page-index h2 { position: relative; z-index: 1 }`.
 * Values below are the captures' computed values at 1280x850 and 430x932. */
.container.container-privacy,
.container.container-terms-of-use,
.container.container-disclosure {
	padding-right: 15px;
	padding-left: 15px;
}

.container-privacy ul,
.container-terms-of-use ul,
.container-disclosure ul {
	padding-left: 40px;
}

.container-privacy li,
.container-terms-of-use li,
.container-disclosure li {
	list-style-type: disc;
}

.container-privacy .content h2,
.container-terms-of-use .content h2,
.container-disclosure .content h2,
.container-privacy .title h1,
.container-terms-of-use .title h1,
.container-disclosure .title h1 {
	position: static;
	z-index: auto;
}

/* == phone widths ==
 * The capture ships a different stylesheet for its phone dump
 * (evidence/couponbirds_pages/notices/mobile/<page>_mobile_rendered.html); the theme only carries
 * the desktop copy, so the phone values below are taken from that dump. */
@media (max-width: 767px) {
	/* header.php's .container-fluid gutters narrow a 100%-wide container, and the captures' body
	   has no letter-spacing while the desktop stylesheet sets .3px on it. */
	.container.container-privacy,
	.container.container-terms-of-use,
	.container.container-disclosure {
		letter-spacing: normal;
	}

	/* the capture replaces the desktop .title padding (20px/24px) with a single 1rem top padding */
	.container-privacy .title,
	.container-terms-of-use .title,
	.container-disclosure .title {
		padding-top: 1rem;
		padding-bottom: 0;
	}

	/* h1 28px -> 24px, heading/paragraph padding 16px -> .5rem/.3rem, title paragraph gains a
	   line-height (terms-of-use also switches to the capture's #404040 title colour) */
	.container-privacy .title h1,
	.container-disclosure .title h1 {
		font-size: 24px;
		padding-bottom: .5rem;
	}

	.container-terms-of-use .title h1 {
		font-size: 24px;
		padding-bottom: .5rem;
		color: #404040;
	}

	.container-privacy .title p,
	.container-disclosure .title p {
		padding-bottom: 1rem;
		line-height: 1.5rem;
	}

	.container-terms-of-use .title p {
		padding-bottom: 1rem;
		line-height: 1.5rem;
		color: #404040;
	}

	.container-privacy .content h2,
	.container-disclosure .paragraph h2 {
		padding-bottom: .3rem;
	}

	.container-privacy .content p,
	.container-disclosure .paragraph p {
		padding-bottom: .3rem;
	}

	/* terms-of-use keeps 1rem for its paragraphs */
	.container-terms-of-use .content h2 {
		padding-bottom: .3rem;
	}

	.container-terms-of-use .content p {
		padding-bottom: 1rem;
	}
}

/* Below 576px the capture's .container is not capped by a max-width, so it spans the viewport;
   the clone's copy is 30px narrower because of the outer .container-fluid gutters. */
@media (max-width: 575px) {
	.container.container-privacy,
	.container.container-terms-of-use,
	.container.container-disclosure {
		width: calc(100% + 30px);
		margin-right: -15px;
		margin-left: -15px;
	}
}

/* == featured-partner / submit-coupon ==
 * static-cb-pages.css flattened the capture's @media (max-width:1024px) block, so three of its
 * rules applied at every width: `.partners-show-pc{display:none}`, `.interested-partner
 * .show-pc{display:none}` and `.featured-partners .sub-title{margin-bottom:24px}`. notices-capture.css
 * restores the media context; the desktop values those rules had replaced are stated here (probed
 * from the capture at 1280x850). */
@media (min-width: 1025px) {
	.container-featured .partners-show-pc {
		display: flex;
	}

	.container-featured .interested-partner .show-pc {
		display: block;
	}

	.container-featured .featured-partners .sub-title {
		margin-bottom: 40px;
	}
}

/* Same shell problem as the legal pages: `.container-home-page-index .container{padding:0}` strips
   the capture's 15px gutters from every container inside the ported partner/submit bodies.
   (.container-fluid is left alone: the capture gives some of them padding 0.) */
.container-featured .container,
.container-submitcoupon .container {
	padding-right: 15px;
	padding-left: 15px;
}

/* The capture's page <main> spans the viewport (no max-width); header.php's shell narrows it by
   its 15px gutters, so the gutters are cancelled on the bodies that expect a full-width main. */
.container-fluid.container-featured,
.container-fluid.container-submitcoupon {
	width: calc(100% + 30px);
	margin-right: -15px;
	margin-left: -15px;
}

/* phone widths: the desktop stylesheet's body{letter-spacing:.3px} has no phone counterpart in the
   captures (same as the legal pages above), and the capture's phone dump renders this page inside
   <.container> (15px gutters) while the desktop one uses <.container-fluid> with none. */
@media (max-width: 767px) {
	.container-fluid.container-featured,
	.container-fluid.container-submitcoupon {
		letter-spacing: normal;
	}

	.container-fluid.container-submitcoupon.submit-coupon-area {
		/* the capture's phone dump renders this page inside <.container>; its desktop rule
		   `.container-fluid.container-submitcoupon.submit-coupon-area{padding:0!important}` must
		   not reach phone widths, where the theme applies it unconditionally. Same selector, so
		   this later !important declaration wins. */
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	/* static-cb-pages.css flattened the capture's @media (min-width:768px) column rules, so
	   `.col-md-*` kept its flex basis (and 50% max-width) at phone widths too and the two columns of
	   a submit row no longer fit on one line. The capture's phone dump has no column rules at all:
	   each column is a full-width flex item there. */
	.container-submitcoupon .row > [class*="col-"],
	.container-featured .row > [class*="col-"] {
		flex: 0 1 auto;
		max-width: none;
	}
}