/* ==========================================================================
   Morning Grace Daily — Brand System
   Source: Section 2 (Visual Identity) of the Website Specification
   ========================================================================== */

:root {
	--mgd-navy: #1F365C;
	--mgd-gold: #B88624;
	--mgd-cream: #F8F5EF;
	--mgd-ivory: #FFF9F0;
	--mgd-taupe: #D8CBB8;
	--mgd-text: #243247;
	--mgd-text-muted: #667085;

	--mgd-font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	--mgd-font-body: "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;

	--mgd-radius: 6px;
	--mgd-max-width: 1200px;
}

/* --------------------------------------------------------------------
   Base
   -------------------------------------------------------------------- */
body {
	background-color: var(--mgd-ivory);
	color: var(--mgd-text);
	font-family: var(--mgd-font-body);
	font-size: 18px;              /* spec: body text 17–18px minimum on desktop */
	line-height: 1.7;             /* spec: comfortable line height */
	-webkit-font-smoothing: antialiased;
}

@media (max-width: 544px) {
	body {
		font-size: 17px;
		line-height: 1.65;
	}
}

p {
	color: var(--mgd-text);
	margin-bottom: 1.4em;
}

a {
	color: var(--mgd-navy);
	text-decoration-color: var(--mgd-gold);
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--mgd-gold);
}

/* Visible focus states — accessibility requirement (Section 13) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--mgd-gold);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Typography — headings
   -------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.mgd-heading {
	font-family: var(--mgd-font-heading);
	font-weight: 600;
	color: var(--mgd-navy);
	line-height: 1.25;
	letter-spacing: 0.01em;
}

h1, .entry-title {
	font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

h3 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
}

/* A gold italic "flourish" style for taglines / supporting lines,
   matching the logo and banner treatment. */
.mgd-flourish {
	font-family: var(--mgd-font-heading);
	font-style: italic;
	color: var(--mgd-gold);
}

/* --------------------------------------------------------------------
   Site header / branding
   -------------------------------------------------------------------- */
.site-header,
.ast-primary-header-bar {
	background-color: var(--mgd-ivory);
	border-bottom: 1px solid var(--mgd-taupe);
}

.main-header-menu a {
	font-family: var(--mgd-font-body);
	font-weight: 500;
	color: var(--mgd-navy);
}

.main-header-menu a:hover {
	color: var(--mgd-gold);
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.wp-block-button__link,
.ast-button,
button,
input[type="submit"] {
	background-color: var(--mgd-navy);
	color: #ffffff;
	border-radius: var(--mgd-radius);
	font-family: var(--mgd-font-body);
	font-weight: 600;
	padding: 0.75em 1.6em;
	border: none;
	transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--mgd-gold);
	color: #ffffff;
}

/* Secondary / outline button variant, used for lower-emphasis actions */
.mgd-button-outline {
	background-color: transparent;
	color: var(--mgd-navy);
	border: 1px solid var(--mgd-navy);
}

.mgd-button-outline:hover {
	background-color: var(--mgd-navy);
	color: #ffffff;
}

/* --------------------------------------------------------------------
   Category banners (weekday header images)
   -------------------------------------------------------------------- */
.mgd-category-banner {
	position: relative;
	width: 100%;
	max-width: var(--mgd-max-width);
	margin: 0 auto 2rem;
	border-radius: var(--mgd-radius);
	overflow: hidden;
}

.mgd-category-banner img {
	width: 100%;
	height: auto;
	display: block;
}

.mgd-category-intro {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	text-align: center;
	color: var(--mgd-text-muted);
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------
   Article cards (used on home "Latest Reflections", category, topic,
   and series archives, and search results) — full-width, natural-ratio
   images, distinct from the homepage "Today's Reflection" card, which
   uses its own fixed-height component (see further down).
   -------------------------------------------------------------------- */
.mgd-article-card {
	background-color: #ffffff;
	border: 1px solid var(--mgd-taupe);
	border-radius: var(--mgd-radius);
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mgd-article-card:hover {
	box-shadow: 0 8px 24px rgba(31, 54, 92, 0.12);
	transform: translateY(-2px);
}

.mgd-card-image {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	line-height: 0; /* removes the default inline-image whitespace gap */
}

.mgd-card-image img,
.mgd-card-photo {
	all: revert;                      /* strip anything inherited from a WP/Astra default img rule */
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	object-fit: initial !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.mgd-card-content {
	padding: 28px 32px 34px;
}

.mgd-card__eyebrow {
	font-family: var(--mgd-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mgd-gold);
}

.mgd-card__title {
	font-family: var(--mgd-font-heading);
	font-size: 1.3rem;
	color: var(--mgd-navy);
	margin: 0.35em 0 0.5em;
}

.mgd-card__excerpt {
	color: var(--mgd-text-muted);
	font-size: 0.98rem;
}

/* --------------------------------------------------------------------
   Article template
   -------------------------------------------------------------------- */
.mgd-article-meta {
	font-size: 0.9rem;
	color: var(--mgd-text-muted);
	margin-bottom: 1.5rem;
}

.mgd-article-meta span + span::before {
	content: "\2022";
	margin: 0 0.5em;
	color: var(--mgd-taupe);
}

.single-post .entry-content {
	max-width: 700px;
	margin: 0 auto;
	font-size: 1.05rem;
}

.mgd-scripture-block {
	background-color: var(--mgd-cream);
	border-left: 4px solid var(--mgd-gold);
	border-radius: 0 var(--mgd-radius) var(--mgd-radius) 0;
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0;
	font-family: var(--mgd-font-heading);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--mgd-navy);
}

.mgd-scripture-block cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--mgd-font-body);
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mgd-text-muted);
}

/* --------------------------------------------------------------------
   Newsletter signup — inline, never a full-screen popup (spec Section 17)
   -------------------------------------------------------------------- */
.mgd-newsletter-inline {
	background-color: var(--mgd-navy);
	color: #ffffff;
	border-radius: var(--mgd-radius);
	padding: 2rem;
	text-align: center;
	margin: 2.5rem 0;
}

.mgd-newsletter-inline h3 {
	color: #ffffff;
	margin-top: 0;
}

.mgd-newsletter-inline p {
	color: var(--mgd-taupe);
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer,
footer.site-footer {
	background-color: var(--mgd-navy);
	color: var(--mgd-taupe);
}

.site-footer a {
	color: #ffffff;
}

.site-footer a:hover {
	color: var(--mgd-gold);
}

/* --------------------------------------------------------------------
   Layout containers (Step 3 templates)
   -------------------------------------------------------------------- */
.mgd-home,
.mgd-single,
.mgd-category-archive,
.mgd-series-archive,
.mgd-search-results,
.mgd-404 {
	max-width: var(--mgd-max-width);
	margin: 0 auto;
	padding: 0 1.25rem 3rem;
}

.mgd-section-title {
	text-align: center;
	margin: 3rem 0 1.5rem;
}

.mgd-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

@media (max-width: 900px) {
	.mgd-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.mgd-card-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Homepage hero
   -------------------------------------------------------------------- */
.mgd-hero {
	margin: 2rem 0 1rem;
}

.mgd-hero__inner {
	position: relative;
	border-radius: var(--mgd-radius);
	overflow: hidden;
	background-color: var(--mgd-navy);
	min-height: 420px;
	display: flex;
	align-items: flex-end;
}

.mgd-hero__image-link,
.mgd-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mgd-hero__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31,54,92,0.05) 0%, rgba(31,54,92,0.85) 85%);
}

.mgd-hero__content {
	position: relative;
	z-index: 1;
	padding: 2.5rem;
	color: #ffffff;
	max-width: 640px;
}

.mgd-hero__title {
	margin: 0.4em 0;
}

.mgd-hero__title a {
	color: #ffffff;
	text-decoration: none;
}

.mgd-hero__excerpt {
	color: var(--mgd-taupe);
	font-size: 1.05rem;
}

.mgd-hero__cta {
	display: inline-block;
	margin-top: 0.5rem;
}

/* --------------------------------------------------------------------
   Browse by day grid
   -------------------------------------------------------------------- */
.mgd-day-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 1.5rem 0 2.5rem;
}

@media (max-width: 900px) {
	.mgd-day-grid { grid-template-columns: repeat(2, 1fr); }
}

.mgd-day-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
	min-height: 110px;
	background-color: #ffffff;
	border: 1px solid var(--mgd-taupe);
	border-radius: var(--mgd-radius);
	padding: 1.25rem 1.5rem;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mgd-day-tile:hover {
	border-color: var(--mgd-gold);
	box-shadow: 0 4px 14px rgba(31, 54, 92, 0.1);
}

.mgd-day-tile__day {
	font-family: var(--mgd-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mgd-gold);
}

.mgd-day-tile__name {
	font-family: var(--mgd-font-heading);
	font-weight: 600;
	color: var(--mgd-navy);
	font-size: 1.1rem;
}

/* --------------------------------------------------------------------
   Article header / meta / scripture / topics / series nav
   -------------------------------------------------------------------- */
.mgd-article-header {
	max-width: 700px;
	margin: 2rem auto 1.5rem;
	text-align: center;
}

.mgd-article-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.mgd-article-featured-image img {
	width: 100%;
	max-width: var(--mgd-max-width);
	border-radius: var(--mgd-radius);
	display: block;
	margin: 0 auto 2rem;
}

.mgd-series-banner {
	max-width: 700px;
	margin: 0 auto 1.5rem;
	text-align: center;
	background-color: var(--mgd-cream);
	border-radius: var(--mgd-radius);
	padding: 0.75rem 1rem;
}

.mgd-series-banner a {
	font-family: var(--mgd-font-heading);
	font-weight: 600;
	margin-left: 0.4rem;
}

.mgd-topic-pills {
	max-width: 700px;
	margin: 2rem auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mgd-topic-pill {
	background-color: var(--mgd-cream);
	color: var(--mgd-navy);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.85rem;
	text-decoration: none;
	border: 1px solid var(--mgd-taupe);
}

.mgd-topic-pill:hover {
	background-color: var(--mgd-gold);
	color: #ffffff;
	border-color: var(--mgd-gold);
}

.mgd-series-nav {
	max-width: 700px;
	margin: 1.5rem auto;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--mgd-taupe);
	border-bottom: 1px solid var(--mgd-taupe);
	padding: 1rem 0;
}

.mgd-series-nav a {
	font-size: 0.95rem;
	text-decoration: none;
}

/* --------------------------------------------------------------------
   Series archive: ordered list
   -------------------------------------------------------------------- */
.mgd-series-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.mgd-series-list__item {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--mgd-taupe);
}

.mgd-series-list__number {
	font-family: var(--mgd-font-heading);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--mgd-gold);
	min-width: 2rem;
}

.mgd-series-list__body .mgd-card__title { margin-top: 0; }

/* --------------------------------------------------------------------
   Archive headers (category / series / search)
   -------------------------------------------------------------------- */
.mgd-archive-header {
	text-align: center;
	max-width: 720px;
	margin: 2rem auto 2.5rem;
}

.mgd-empty-state {
	text-align: center;
	color: var(--mgd-text-muted);
	padding: 2rem 0;
}

/* --------------------------------------------------------------------
   404
   -------------------------------------------------------------------- */
.mgd-404__inner {
	text-align: center;
	max-width: 600px;
	margin: 4rem auto;
}

.mgd-404__home {
	margin-top: 1.5rem;
}

/* --------------------------------------------------------------------
   Newsletter CTA button (v1.6.1: replaced the non-functional email
   form — no mailing-list connection existed — with a single button
   pointing to the external signup destination, MGD_NEWSLETTER_URL)
   -------------------------------------------------------------------- */
.mgd-newsletter-cta {
	display: inline-flex;
	margin-top: 1rem;
	/* The box background is navy — the default .ast-button is also
	   navy-on-white-text, which would be nearly invisible here. Gold
	   gives it the same contrast treatment as the site's other CTAs
	   on dark backgrounds (cookie notice Accept, hero primary CTA). */
	background-color: var(--mgd-gold) !important;
	color: var(--mgd-navy) !important;
	border: 1px solid var(--mgd-gold) !important;
}

.mgd-newsletter-cta:hover,
.mgd-newsletter-cta:focus-visible {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--mgd-navy) !important;
}

/* --------------------------------------------------------------------
   Brand hero (homepage) — establishes the brand, not today's headline
   -------------------------------------------------------------------- */
.mgd-brand-hero {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--mgd-navy);
	background-size: cover;
	background-position: center;
	border-radius: var(--mgd-radius);
	overflow: hidden;
	margin: 1.5rem 0;
}

.mgd-brand-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(31,54,92,0.55) 0%, rgba(31,54,92,0.82) 100%);
}

.mgd-brand-hero__content {
	position: relative;
	z-index: 1;
	max-width: 680px;
	text-align: center;
	padding: 3.5rem 2rem;
	color: #ffffff;
}

.mgd-brand-hero__title {
	color: #ffffff;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	margin: 0 0 0.2em;
}

.mgd-brand-hero__tagline {
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	color: var(--mgd-gold);
	margin: 0 0 1.2em;
}

.mgd-brand-hero__body {
	color: var(--mgd-taupe);
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0 auto 1.8em;
}

.mgd-brand-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.mgd-brand-hero__cta-secondary {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.6);
}

.mgd-brand-hero__cta-secondary:hover {
	background-color: #ffffff;
	color: var(--mgd-navy);
	border-color: #ffffff;
}

@media (max-width: 600px) {
	.mgd-brand-hero { min-height: 460px; }
	.mgd-brand-hero__actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------
   Today's Reflection (homepage, immediately below the hero)
   -------------------------------------------------------------------- */
.mgd-today {
	margin: 3rem 0;
}

.mgd-weekday-eyebrow {
	text-align: center;
	font-family: var(--mgd-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mgd-gold);
	margin: 0 0 0.35rem;
}

.mgd-today__card {
	display: grid;
	grid-template-columns: 43% 57%;
	align-items: stretch;
	background-color: #ffffff;
	border: 1px solid var(--mgd-taupe);
	border-radius: var(--mgd-radius);
	overflow: hidden;
}

/* Natural-height image — no fixed box, no letterboxing, no cropping.
   The image displays at its own aspect ratio; the card's height is
   determined by whichever column (image or text) ends up taller.
   align-self:start keeps this column from being stretched by the
   grid row — only the text column stretches/centers (see below). */
.mgd-today__image-wrap {
	align-self: start;
	height: auto;
	min-height: 0;
	aspect-ratio: auto;
	overflow: visible;      /* was 'hidden' — a hidden overflow can itself
	                            clip a taller-than-expected image; visible
	                            guarantees nothing is ever clipped here */
	background: transparent;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
}

.mgd-today__image-link {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.mgd-today__image,
.mgd-today__image.mgd-featured-image {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	display: block !important;
	object-fit: initial !important;   /* natural aspect ratio — nothing is cropped */
	aspect-ratio: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mgd-today__body {
	display: flex;
	flex-direction: column;
	justify-content: center;   /* vertically centers the text relative to the image's natural height */
	padding: 36px 40px;        /* generous, symmetric padding — min 36px left */
}

.mgd-today__title {
	font-family: var(--mgd-font-heading);
	font-size: 1.8rem;
	margin: 0.4em 0 0.5em;
}

.mgd-today__title a { color: var(--mgd-navy); }

.mgd-today__excerpt {
	color: var(--mgd-text-muted);
	margin: 0 0 1.3rem;
}

/* Prevent the flex column's default align-items:stretch from forcing
   this button to full column width — it should size to its content. */
.mgd-today__readmore {
	display: inline-flex;
	align-items: center;
	width: auto;
	align-self: flex-start;
}

/* Phone/tablet stack: image on top, still at its natural aspect ratio. */
@media (max-width: 800px) {
	.mgd-today__card { grid-template-columns: 1fr; }
	.mgd-today__body { padding: 28px 24px 32px; justify-content: flex-start; }
}

/* --------------------------------------------------------------------
   Clickable logo — always links home (WordPress core wraps the custom
   logo in a link to the front page automatically; this just adds the
   brand's hover treatment for a polished, obviously-clickable feel).
   -------------------------------------------------------------------- */
.custom-logo-link,
.site-logo-img a,
.ast-site-identity a {
	display: inline-block;
	transition: opacity 0.2s ease;
}

.custom-logo-link:hover,
.site-logo-img a:hover,
.ast-site-identity a:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------
   Breadcrumbs — category archives and single articles
   -------------------------------------------------------------------- */
.mgd-breadcrumbs {
	max-width: var(--mgd-max-width);
	margin: 1.25rem auto 0.5rem;
	padding: 0 1.25rem;
}

/* Defensive reset: guarantees breadcrumbs render as a horizontal row,
   never a numbered/bulleted list, regardless of any list styling
   Astra or another plugin applies elsewhere on the page. */
.mgd-breadcrumbs ol,
.mgd-breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mgd-breadcrumbs li {
	margin: 0;
	padding: 0;
}

.mgd-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0.5rem 0.9rem;
	background-color: var(--mgd-cream);
	border: 1px solid var(--mgd-taupe);
	border-radius: var(--mgd-radius);
	font-size: 0.85rem;
	line-height: 1.4;
}

.mgd-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--mgd-text-muted);
}

.mgd-breadcrumbs__item a {
	color: var(--mgd-navy);
	text-decoration: none;
	font-weight: 500;
}

.mgd-breadcrumbs__item a:hover {
	color: var(--mgd-gold);
	text-decoration: underline;
}

.mgd-breadcrumbs__item span[aria-current="page"] {
	color: var(--mgd-gold);
	font-weight: 600;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mgd-breadcrumbs__item:not(:last-child)::after {
	content: "\203A"; /* › */
	margin-left: 0.35rem;
	color: var(--mgd-taupe);
	font-weight: 700;
}

@media (max-width: 600px) {
	.mgd-breadcrumbs__list { font-size: 0.78rem; padding: 0.45rem 0.7rem; }
	.mgd-breadcrumbs__item span[aria-current="page"] { max-width: 160px; }
}

/* --------------------------------------------------------------------
   "Return to Today's Reflection" link (single articles)
   -------------------------------------------------------------------- */
.mgd-return-home {
	max-width: 700px;
	margin: 0 auto 1.75rem;
	text-align: center;
}

.mgd-return-home a {
	font-size: 0.9rem;
	color: var(--mgd-text-muted);
	text-decoration: none;
	border-bottom: 1px dotted var(--mgd-taupe);
	padding-bottom: 1px;
}

.mgd-return-home a:hover {
	color: var(--mgd-gold);
	border-bottom-color: var(--mgd-gold);
}

/* --------------------------------------------------------------------
   Cookie notice — fixed bottom banner (markup output via wp_footer,
   behavior in assets/js/cookie-notice.js)
   -------------------------------------------------------------------- */
.mgd-cookie-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: var(--mgd-navy);
	border-top: 1px solid var(--mgd-gold);
	box-shadow: 0 -4px 18px rgba(31, 54, 92, 0.25);
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
	padding-bottom: env(safe-area-inset-bottom, 0); /* respects notched phones */
}

.mgd-cookie-notice.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.mgd-cookie-notice__inner {
	max-width: var(--mgd-max-width);
	margin: 0 auto;
	padding: 1.1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.mgd-cookie-notice__text {
	color: #ffffff;
	font-family: var(--mgd-font-body);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	flex: 1 1 320px;
}

.mgd-cookie-notice__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.mgd-cookie-notice__accept,
.mgd-cookie-notice__close {
	font-family: var(--mgd-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	border-radius: var(--mgd-radius);
	padding: 0.65em 1.4em;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.mgd-cookie-notice__accept {
	background-color: var(--mgd-gold);
	color: var(--mgd-navy);
	border: 1px solid var(--mgd-gold);
}

.mgd-cookie-notice__accept:hover,
.mgd-cookie-notice__accept:focus-visible {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--mgd-navy);
}

.mgd-cookie-notice__close {
	background-color: transparent;
	color: var(--mgd-cream);
	border: 1px solid rgba(248, 245, 239, 0.5);
}

.mgd-cookie-notice__close:hover,
.mgd-cookie-notice__close:focus-visible {
	background-color: rgba(248, 245, 239, 0.12);
	border-color: var(--mgd-cream);
	color: #ffffff;
}

/* Mobile: stack text above the buttons, buttons span full width for
   comfortable tap targets. */
@media (max-width: 600px) {
	.mgd-cookie-notice__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding: 1rem 1.25rem 1.15rem;
	}

	.mgd-cookie-notice__text {
		text-align: center;
		flex-basis: auto;
	}

	.mgd-cookie-notice__actions {
		justify-content: center;
	}

	.mgd-cookie-notice__accept,
	.mgd-cookie-notice__close {
		flex: 1 1 0;
		text-align: center;
	}
}

/* --------------------------------------------------------------------
   Landing page (Full-Width / No-Title page template, and the
   Devotional Series Index template built on top of it)
   -------------------------------------------------------------------- */
.mgd-landing-page {
	padding: 0 1.25rem 3rem;
}

.mgd-landing-page__content {
	max-width: var(--mgd-max-width);
	margin: 2.5rem auto 0;
}

.mgd-series-index-grid {
	margin-top: 2rem;
}

.mgd-series-library__stats {
	text-align: center;
	font-family: var(--mgd-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mgd-gold);
	margin: 2rem 0 0;
}

.mgd-series-index-tile {
	min-height: 150px;
	align-items: flex-start;
	text-align: left;
}

.mgd-series-index-tile__desc {
	font-size: 0.9rem;
	color: var(--mgd-text-muted);
	line-height: 1.5;
}

/* --------------------------------------------------------------------
   Admin-only editor notices (e.g. duplicate Series Order warning).
   Deliberately NOT brand-styled — this should read as a system
   warning to logged-in editors, never as a designed page element,
   and it is never shown to ordinary site visitors (PHP-gated by
   current_user_can()).
   -------------------------------------------------------------------- */
.mgd-admin-notice {
	max-width: var(--mgd-max-width);
	margin: 1.5rem auto;
	padding: 1rem 1.25rem;
	background-color: #fff8e1;
	border: 1px solid #e0a800;
	border-left: 4px solid #e0a800;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.9rem;
	color: #5c4700;
}

.mgd-admin-notice p {
	margin: 0 0 0.5rem;
	color: inherit;
}

.mgd-admin-notice ul {
	margin: 0;
	padding-left: 1.25rem;
}

.mgd-admin-notice a {
	color: #5c4700;
	text-decoration: underline;
}

/* --------------------------------------------------------------------
   Accessibility: reduced motion (spec Section 13)
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}