/* ==================================================================
   PASS THE MSRA — DESIGN TOKENS
   Single source of truth for colours, type, spacing, and components.
   Every custom page reuses these classes so the whole site stays
   consistent. Edit values here once and they update everywhere.
   ================================================================== */

:root {
	/* ---- Brand colours ---- */
	--ptm-navy:       #0B1F3A;
	--ptm-navy-light: #16335C;
	--ptm-teal:       #00A896;
	--ptm-teal-dark:  #02897A;   /* button hover / active */

	/* ---- Neutrals ---- */
	--ptm-ink:    #1A2433;       /* body text */
	--ptm-muted:  #5B6675;       /* secondary text */
	--ptm-line:   #E3E8EF;       /* borders / dividers */
	--ptm-bg:     #FFFFFF;
	--ptm-bg-alt: #F6F8FB;       /* alternating section background */

	/* ---- Typography ---- */
	--ptm-font-heading: "Playfair Display", Georgia, serif;
	--ptm-font-body:    "DM Sans", system-ui, -apple-system, sans-serif;

	/* ---- Type scale (fluid) ---- */
	--ptm-h1:    clamp(2.2rem, 4vw, 3.4rem);
	--ptm-h2:    clamp(1.7rem, 3vw, 2.4rem);
	--ptm-h3:    1.4rem;
	--ptm-body:  1.05rem;
	--ptm-small: 0.9rem;

	/* ---- Spacing scale ---- */
	--ptm-space-xs: 0.5rem;
	--ptm-space-sm: 1rem;
	--ptm-space-md: 2rem;
	--ptm-space-lg: 4rem;
	--ptm-space-xl: 6rem;

	/* ---- Layout ---- */
	--ptm-maxw:       1140px;
	--ptm-radius:     12px;
	--ptm-radius-sm:  8px;

	/* ---- Shadows ---- */
	--ptm-shadow-sm: 0 1px 3px rgba(11, 31, 58, .08);
	--ptm-shadow-md: 0 8px 24px rgba(11, 31, 58, .10);
}

/* ==================================================================
   BASE — scoped under .ptm-page so these styles NEVER leak into
   LearnDash course pages, the WP admin, or anything else.
   The full-width template wraps page content in .ptm-page for you.
   ================================================================== */

.ptm-page {
	font-family: var(--ptm-font-body);
	color: var(--ptm-ink);
	font-size: var(--ptm-body);
	line-height: 1.6;
}

.ptm-page h1,
.ptm-page h2,
.ptm-page h3 {
	font-family: var(--ptm-font-heading);
	color: var(--ptm-navy);
	line-height: 1.15;
	margin: 0 0 var(--ptm-space-sm);
}

.ptm-page h1 { font-size: var(--ptm-h1); }
.ptm-page h2 { font-size: var(--ptm-h2); }
.ptm-page h3 { font-size: var(--ptm-h3); }

.ptm-page p { margin: 0 0 var(--ptm-space-sm); }

.ptm-page a { color: var(--ptm-teal-dark); }

/* ---- Container ---- */
.ptm-container {
	max-width: var(--ptm-maxw);
	margin-inline: auto;
	padding-inline: var(--ptm-space-md);
}

/* ---- Section rhythm ---- */
.ptm-section        { padding-block: var(--ptm-space-xl); }
.ptm-section--alt   { background: var(--ptm-bg-alt); }
.ptm-section--navy  { background: var(--ptm-navy); color: #fff; }
.ptm-section--navy h1,
.ptm-section--navy h2,
.ptm-section--navy h3 { color: #fff; }

/* ---- Buttons ---- */
.ptm-btn {
	display: inline-block;
	font-family: var(--ptm-font-body);
	font-weight: 600;
	text-decoration: none;
	padding: .85rem 1.6rem;
	border-radius: var(--ptm-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, color .15s ease;
}
.ptm-btn--primary           { background: var(--ptm-teal); color: #fff; }
.ptm-btn--primary:hover     { background: var(--ptm-teal-dark); transform: translateY(-1px); }
.ptm-btn--secondary         { background: transparent; color: var(--ptm-navy); border-color: var(--ptm-navy); }
.ptm-btn--secondary:hover   { background: var(--ptm-navy); color: #fff; }

/* ---- Card ---- */
.ptm-card {
	background: var(--ptm-bg);
	border: 1px solid var(--ptm-line);
	border-radius: var(--ptm-radius);
	padding: var(--ptm-space-md);
	box-shadow: var(--ptm-shadow-sm);
	transition: box-shadow .15s ease;
}
.ptm-card:hover { box-shadow: var(--ptm-shadow-md); }

/* ---- Simple responsive grid (e.g. 3 cards across) ---- */
.ptm-grid {
	display: grid;
	gap: var(--ptm-space-md);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---- Utility ---- */
.ptm-text-center { text-align: center; }
.ptm-muted       { color: var(--ptm-muted); }
.ptm-lead        { font-size: 1.2rem; color: var(--ptm-muted); }