/**
 * Breatheazy Child Theme — Policy Pages Styles
 *
 * Styles for:
 *   - Privacy Policy, Terms & Conditions, Return Policy, Shipping Policy page content
 *   - PLACEHOLDER review notice banner
 *   - Policy content typography and tables
 *   - Footer policy links bar
 *   - Return Policy link on product page
 *
 * Uses CSS custom properties defined in style.css (design tokens).
 * All styles are mobile-first and responsive.
 *
 * @package Breatheazy_Child
 * @since   1.0.0
 */

/* ==========================================================================
   1. Policy Page Layout
   ========================================================================== */

/**
 * Constrain policy page content width for readability.
 * Long-form legal text is harder to read at full viewport width.
 */
.breatheazy-policy-page .entry-content,
.page-id-policy .entry-content {
	max-width: 860px;
}

/* ==========================================================================
   2. Placeholder / Review Notice Banner
   ========================================================================== */

/**
 * The review notice is a high-visibility banner at the top of each policy page.
 * It should be unmissable so no policy page goes live with unreviewed content.
 *
 * The banner is designed to be easy to remove once content is reviewed:
 * delete the <div class="breatheazy-policy-review-notice"> block from the page.
 */
.breatheazy-policy-review-notice {
	background-color: #FFF3CD;
	border: 2px solid #F97316;
	border-radius: 8px;        /* var(--radius-md) */
	padding: 16px 20px;        /* var(--spacing-md) var(--spacing-lg) */
	margin-bottom: 32px;
	color: #7C2D12;
}

.breatheazy-policy-review-notice strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
	color: #92400E;
}

.breatheazy-policy-review-notice p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   3. Effective Date
   ========================================================================== */

.breatheazy-policy-effective-date {
	background-color: var(--color-surface);
	border-left: 4px solid var(--color-primary);
	padding: 12px 16px;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin-bottom: 32px;
}

/* ==========================================================================
   4. Policy Page Typography
   ========================================================================== */

/**
 * Policy pages contain dense legal content. These styles improve readability
 * by tightening heading hierarchy and ensuring adequate spacing between sections.
 *
 * Scoped to .breatheazy-policy-page (added via body_class filter) to avoid
 * affecting .entry-content typography on non-policy pages.
 */
.breatheazy-policy-page .entry-content h2 {
	font-size: var(--font-size-2xl);
	color: var(--color-secondary);
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 8px;
	margin-top: 40px;
	margin-bottom: 16px;
}

.breatheazy-policy-page .entry-content h3 {
	font-size: var(--font-size-xl);
	color: var(--color-secondary);
	margin-top: 28px;
	margin-bottom: 12px;
}

.breatheazy-policy-page .entry-content h4 {
	font-size: var(--font-size-lg);
	color: var(--color-text);
	margin-top: 20px;
	margin-bottom: 8px;
}

.breatheazy-policy-page .entry-content p {
	line-height: var(--line-height-base);
	color: var(--color-text);
	margin-bottom: 16px;
}

.breatheazy-policy-page .entry-content ul,
.breatheazy-policy-page .entry-content ol {
	padding-left: 24px;
	margin-bottom: 16px;
}

.breatheazy-policy-page .entry-content li {
	margin-bottom: 6px;
	line-height: 1.6;
}

.breatheazy-policy-page .entry-content ul li {
	list-style-type: disc;
}

.breatheazy-policy-page .entry-content ol li {
	list-style-type: decimal;
}

/* Nested lists */
.breatheazy-policy-page .entry-content ul ul,
.breatheazy-policy-page .entry-content ol ul {
	margin-top: 6px;
	margin-bottom: 6px;
}

/* ==========================================================================
   5. Policy Tables
   ========================================================================== */

/**
 * Policy pages use tables for structured data (e.g., data retention periods,
 * shipping timelines, business contact details).
 */
.breatheazy-policy-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.breatheazy-policy-table th,
.breatheazy-policy-table td {
	border: 1px solid var(--color-border);
	padding: 10px 14px;
	vertical-align: top;
	text-align: left;
}

.breatheazy-policy-table th {
	background-color: var(--color-secondary);
	color: #FFFFFF;
	font-weight: 600;
	white-space: nowrap;
}

/* Header row in tables where first row is thead */
.breatheazy-policy-table thead th {
	background-color: var(--color-secondary);
	color: #FFFFFF;
}

/* Row striping for readability on long tables */
.breatheazy-policy-table tbody tr:nth-child(even) td {
	background-color: var(--color-surface);
}

.breatheazy-policy-table tbody tr:hover td {
	background-color: #E6FFFA;
}

/* ==========================================================================
   6. Policy Callout / Info Box
   ========================================================================== */

/**
 * Used for important notices within policy content — e.g., the medical device
 * disclaimer, the hygiene seal notice on the returns policy.
 */
.breatheazy-policy-callout {
	background-color: #EFF6FF;
	border: 1px solid #BFDBFE;
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin: 16px 0 24px;
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
	line-height: 1.6;
}

.breatheazy-policy-callout strong {
	color: var(--color-secondary);
}

/* ==========================================================================
   7. Footer Policy Links Bar
   ========================================================================== */

/**
 * A horizontal row of policy links rendered at the top of the footer area.
 * Uses the dark footer background from style.css section 9.
 */
.breatheazy-footer-policy-bar {
	width: 100%;
	background-color: var(--color-secondary-dark, #152C49);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 12px 20px;
}

.breatheazy-footer-policy-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 0;
}

.breatheazy-footer-policy-link {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	text-decoration: none;
	padding: 4px 8px;
	transition: color var(--transition-fast);
	white-space: nowrap;
}

.breatheazy-footer-policy-link:hover,
.breatheazy-footer-policy-link:focus {
	color: #FFFFFF;
	text-decoration: underline;
	outline: 2px solid rgba(255, 255, 255, 0.4);
	outline-offset: 2px;
}

.breatheazy-footer-policy-sep {
	color: rgba(255, 255, 255, 0.3);
	font-size: 13px;
	user-select: none;
}

/* ==========================================================================
   8. Product Page — Return Policy Link
   ========================================================================== */

/**
 * A subtle inline link displayed below trust badges on the product page.
 * Small, unobtrusive, but visible to customers who want to know the policy.
 */
.breatheazy-return-policy-link {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--spacing-md);
}

.breatheazy-return-policy-link a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.breatheazy-return-policy-link a:hover,
.breatheazy-return-policy-link a:focus {
	color: var(--color-primary-dark);
}

/* ==========================================================================
   9. Responsive — Mobile adjustments
   ========================================================================== */

@media (max-width: 543px) {
	/* Policy tables scroll horizontally on small screens */
	.breatheazy-policy-table {
		display: block;
		overflow-x: auto;
		font-size: 13px;
	}

	.breatheazy-policy-table th,
	.breatheazy-policy-table td {
		padding: 8px 10px;
	}

	/* Looser heading spacing on mobile */
	.breatheazy-policy-page .entry-content h2 {
		margin-top: 28px;
		font-size: var(--font-size-xl);
	}

	.breatheazy-policy-page .entry-content h3 {
		font-size: var(--font-size-lg);
	}

	/* Footer links wrap more naturally on small screens */
	.breatheazy-footer-policy-inner {
		justify-content: center;
	}

	.breatheazy-footer-policy-link {
		font-size: 12px;
		padding: 4px 6px;
	}
}

@media (min-width: 544px) and (max-width: 921px) {
	.breatheazy-policy-table {
		font-size: 14px;
	}
}

/* ==========================================================================
   10. Print — Policy Pages
   ========================================================================== */

@media print {
	.breatheazy-policy-review-notice {
		border: 2px solid #000;
		background-color: #FFF;
		color: #000;
	}

	.breatheazy-policy-table th {
		background-color: #E5E7EB !important;
		color: #000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.breatheazy-footer-policy-bar {
		display: none;
	}
}