/*!
 * Shinwado — Standalone Page Styles
 * Version: 2.25.0
 *
 * Contents:
 *   1. Variables (brand colors, layout)
 *   2. Reset / base
 *   3. Shared button style
 *   4. Shared divider (thin line + diamond)
 *   5. Lightbox (shared across blocks)
 *   6. Info popup (shared across blocks)
 *   7. Hero block (image, logo, nav, CTA button)
 *   8. About block (background, intro column, 3-column grid)
 *   9. Programs block (navy background, intro column, 3-panel cards)
 *   10. News block (split layout: items list + quote panel)
 *   11. CTA block (background, centered image/title/description/button)
 *   12. Contact block (compact form + info panel)
 *   13. Shared block base (padding/scroll-margin used by every section)
 *   14. Footer block (brand column, 3 link columns, copyright)
 *   15. Responsive (mobile nav, hero CTA position, grid collapses)
 */

/* 1. Variables ------------------------------------------------------------ */
:root {
	--shinwado-red: #B60004;
	--shinwado-red-text: #FFFFFF;
	--shinwado-gold: #D4AC58;
	--shinwado-gold-text: #000000;
	--shinwado-ink: #1a1a1a;
	--shinwado-cream: #faf6ee;
	--shinwado-max-width: 1200px;

	/* Programs block background — a dark navy gradient approximating the
	   mockup's color palette (no source photo was supplied for this
	   block, so this is a solid/gradient match rather than an image). */
	--shinwado-navy-top: #16223f;
	--shinwado-navy-bottom: #0d1526;
	/* The 3 panel cards, a step lighter than the section background so
	   they read as raised/embossed against it. */
	--shinwado-navy-panel: #223357;
	--shinwado-navy-panel-border: #34497a;

	/*
	 * Vertical position of the hero CTA button, as a percentage of the
	 * hero image's height measured from the top. Tuned against the
	 * supplied hero image: the "SHINWADO" title band (including the
	 * tagline and its underline) ends roughly 27% of the way down, and
	 * the image bottom is 100%, so the midpoint lands at roughly 63%.
	 * If the hero image is ever swapped for one with a differently
	 * placed title, adjust this single value rather than the button's
	 * own CSS.
	 */
	--shinwado-hero-cta-top: 63%;
}

/* 2. Reset / base ----------------------------------------------------------- */
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--shinwado-ink);
	line-height: 1.6;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* 3. Shared button style --------------------------------------------------------- */
/*
 * Structural button style shared by every block's CTA button. Each block
 * adds .shinwado-btn plus a color modifier (--red or --gold) plus its own
 * positioning class — see .shinwado-hero__cta-button, .shinwado-about__cta,
 * .shinwado-programs__cta, .shinwado-cta__button below — instead of
 * repeating padding/radius/hover rules, or the color rules, per block.
 */
.shinwado-btn {
	display: inline-block;
	text-decoration: none;
	font-weight: 700;
	padding: 0.9rem 2.25rem;
	border: 2px solid transparent;
	box-sizing: border-box;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shinwado-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.shinwado-btn--red {
	background: var(--shinwado-red);
	color: var(--shinwado-red-text);
}
.shinwado-btn--gold {
	background: var(--shinwado-gold);
	color: var(--shinwado-gold-text);
}
.shinwado-btn--outline-red {
	background: transparent;
	color: var(--shinwado-red);
	border: 2px solid var(--shinwado-red);
	box-shadow: none;
}
.shinwado-btn--outline-red:hover {
	background: var(--shinwado-red);
	color: var(--shinwado-red-text);
	box-shadow: 0 4px 14px rgba(182, 0, 4, 0.25);
}
/* Greyed-out, non-interactive state — used when a "Become a Member"
   button is deliberately disabled per-card. The element itself is
   already a non-clickable <span>, not an <a>, but pointer-events:none
   is still included for robustness/clarity (e.g. in case anything ever
   attaches a click handler across all .shinwado-btn elements
   generally). */
.shinwado-btn--disabled {
	background: #cccccc;
	color: #888888;
	cursor: not-allowed;
	box-shadow: none;
	pointer-events: none;
}
.shinwado-btn--disabled:hover {
	transform: none;
	box-shadow: none;
}

/* 4. Shared divider (thin line + diamond) ---------------------------------------- */
/*
 * "‹ Back to Home" link (Harmonious Way and Shinwado Directory each
 * have their own separate copy — .hw-back-link, .sd-back-link, left
 * as-is). Every page actually using the .shinwado-back-link class
 * loads admin.css alongside this stylesheet, and admin.css defines its
 * own complete version (including the sticky-on-scroll behavior) — so
 * having a second, conflicting copy here was pure duplication, and the
 * root cause of the sticky positioning silently breaking (this rule's
 * own "display: inline-block" fighting admin.css's "display: block").
 * Removed entirely rather than fixed in place, since admin.css's
 * version is already correct and complete on its own.
 */


/*
 * A thin horizontal line with a small centered diamond — used under
 * titles across multiple pages (Our Logo, Mission, the Federation
 * Benefits & Membership pricing card, Shinwado Directory school cards).
 * See shinwado_render_divider() in includes/helpers.php. Built in CSS
 * (not an uploaded image) so it always spans exactly the width of
 * whichever container it's in.
 */
.shinwado-divider {
	position: relative;
	height: 1px;
	background: var(--shinwado-red);
	margin: 0.5rem 0;
}
.shinwado-divider__diamond {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	background: var(--shinwado-red);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* 5. Lightbox (shared across blocks) -------------------------------------------- */
/*
 * Opened by clicking any element with the .shinwado-lightbox-trigger
 * class — currently the News block's item images (see
 * .shinwado-news__item-image). One shared modal serves the whole page;
 * assets/js/shinwado.js handles opening/closing it and swapping the
 * displayed image.
 *
 * On preventing downloads: full prevention isn't achievable in a
 * browser — anyone can always reach the image via dev tools, view-
 * source, or a screenshot. What's implemented here removes the casual,
 * one-click paths: the thumbnails are CSS background-images on buttons
 * rather than <img> tags (so there's no native "Save Image As" in the
 * right-click menu), and the enlarged lightbox image has
 * oncontextmenu/draggable disabled plus -webkit-touch-callout disabled
 * for iOS's long-press-to-save menu.
 */
.shinwado-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.88);
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.shinwado-lightbox.is-open {
	display: flex;
}
.shinwado-lightbox__image {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none; /* disables iOS's long-press "Save Image" menu */
	user-select: none;
}
.shinwado-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem;
	opacity: 0.85;
}
.shinwado-lightbox__close:hover {
	opacity: 1;
}

/* 6. Info popup (shared across blocks) -------------------------------------------- */
/*
 * A generic small popup for showing overflow content that doesn't fit
 * inline — e.g. the Shinwado Directory's "+N more" location list and
 * truncated quote text. Opened by clicking any element with
 * data-popup-target="<id>", which copies the matching hidden
 * .shinwado-popup-source element's content into the popup body — see
 * assets/js/shinwado.js. Visually similar to the lightbox above, but
 * for arbitrary HTML content instead of an image.
 */
.shinwado-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.shinwado-popup.is-open {
	display: flex;
}
.shinwado-popup__panel {
	background: #ffffff;
	border-radius: 10px;
	max-width: 420px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 2rem;
	position: relative;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.shinwado-popup__close {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.75rem;
	line-height: 1;
	color: #8a8074;
	cursor: pointer;
	padding: 0.25rem;
}
.shinwado-popup__close:hover {
	color: var(--shinwado-ink);
}
.shinwado-popup__body {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--shinwado-ink);
}

/* The clickable "more" trigger text itself — shared styling regardless
   of what it's revealing. */
.shinwado-more-link {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--shinwado-red);
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
}

/* 7. Hero block --------------------------------------------------------------- */
.shinwado-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/*
 * The hero image is a real <img> (not a CSS background-image) sized to
 * 100% width / auto height, so it always keeps its native aspect ratio
 * at any viewport width. That's what keeps the CTA button's percentage-
 * based vertical position (below) accurate — a background-image with
 * background-size: cover would crop differently at different viewport
 * widths and the button would drift off the intended spot.
 */
.shinwado-hero__bg {
	width: 100%;
	height: auto;
	display: block;
}

.shinwado-hero__topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2; /* guarantees this stacks above .shinwado-hero__bg */
	display: flex;
	/* flex-start (not center) — the logo is 168px tall, and centering
	   against it was pushing the nav links down into the busier part of
	   the image instead of keeping them pinned to the top edge. */
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.25rem 2rem;
	transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.shinwado-hero__logo-link {
	display: inline-block;
}
.shinwado-hero__logo {
	/* 3x the original 56px display height. The source PNG is high enough
	   resolution that this stays crisp — if a future logo file is ever
	   swapped in at a much lower resolution, this may need scaling back
	   down to avoid visible pixelation. */
	height: 168px;
	width: auto;
	transition: height 0.25s ease;
}

/* Sticky header state: once scrolled past the topbar's own original
   position (see the scroll-based toggle in assets/js/shinwado.js),
   switches from absolute (overlaying the hero image, taking up no
   space in flow) to fixed (pinned to the viewport regardless of scroll
   position) — needs its own opaque background here since it's no
   longer sitting on top of the hero image at all once fixed, plus a
   shadow for separation from whatever content is now scrolled beneath
   it, and a visibly smaller/shrunk presentation (reduced padding,
   smaller logo) so it reads as a compact, secondary state rather than
   just the same full-size header awkwardly stuck in place. */
.shinwado-hero__topbar.is-sticky {
	position: fixed;
	background: var(--shinwado-cream);
	padding: 0.5rem 2rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.shinwado-hero__topbar.is-sticky .shinwado-hero__logo {
	height: 56px;
}

.shinwado-hero__nav-list {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	/* Nudges the nav text down slightly from the very top edge so it
	   doesn't sit flush against it now that it's no longer vertically
	   centered against the tall logo. */
	padding: 0.75rem 0 0;
}
.shinwado-hero__nav-list a {
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.shinwado-hero__nav-list a:hover {
	color: var(--shinwado-red);
}

/* Hamburger button — hidden by default, shown only on mobile (see media query). */
.shinwado-hero__nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
}
.shinwado-hero__nav-toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--shinwado-ink);
}

/* Groups the nav and the Login link together as one flex item, so the
   topbar's own flex (logo | this-group, space-between) stays a simple
   two-child layout rather than needing to juggle three top-level items. */
.shinwado-hero__topbar-right {
	display: flex;
	align-items: flex-start;
	gap: 1.75rem;
}
.shinwado-hero__login-link {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 2px solid var(--shinwado-red);
	border-radius: 4px;
	color: var(--shinwado-red);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	/* Nudged down to visually align with the nav links, which have their
	   own top padding — see .shinwado-hero__nav-list above. */
	margin-top: 0.75rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.shinwado-hero__login-link:hover {
	background-color: var(--shinwado-red);
	color: #ffffff;
}

/* Account avatar + dropdown — shown instead of the Login link once a
   member is signed in. */
.shinwado-hero__account {
	position: relative; /* Anchors the dropdown menu below, so it positions relative to this wrapper, not the whole page. */
	margin-top: 0.75rem; /* Matches .shinwado-hero__login-link's own top margin, keeping vertical alignment consistent whether logged in or not. */
}
.shinwado-hero__account-toggle {
	display: block;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.shinwado-hero__account-avatar {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--shinwado-red);
}
.shinwado-hero__account-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5rem;
	background: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	min-width: 160px;
	list-style: none;
	padding: 0.5rem 0;
	z-index: 10;
}
.shinwado-hero__account-menu.is-open {
	display: block;
}
.shinwado-hero__account-menu a {
	display: block;
	padding: 0.65rem 1.25rem;
	color: var(--shinwado-ink);
	text-decoration: none;
	font-weight: 600;
}
.shinwado-hero__account-menu a:hover {
	color: var(--shinwado-red);
	background-color: var(--shinwado-cream);
}

.shinwado-hero__cta-wrap {
	position: absolute;
	top: var(--shinwado-hero-cta-top);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn class — see section 3. This just says "no extra margin." */
.shinwado-hero__cta-button {
	margin: 0;
}
.shinwado-hero__signin-button {
	margin: 1.5rem 0 0;
}
/* .shinwado-hero__signin-caption: font-family/size/weight/style/
   text-align/color come from the Sign In Caption field's typography
   controls, applied inline — no CSS needed here. */

/* 8. About block ---------------------------------------------------------------- */
.shinwado-about {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 5rem 2rem;
}
.shinwado-about__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem;
}

/* Left column: title, divider, description, button */
.shinwado-about__intro {
	flex: 1 1 300px;
	max-width: 420px;
}
.shinwado-about__title {
	margin: 0 0 1rem;
	line-height: 1.25;
	/* font-family/size/weight/style/text-align come from the Title
	   field's typography controls, applied inline per-page — see
	   shinwado_typography_style() in includes/helpers.php. */
}
.shinwado-about__divider {
	width: 48px;
	height: 3px;
	background: var(--shinwado-red);
	margin-bottom: 1.25rem;
}
.shinwado-about__description {
	margin-bottom: 1.75rem;
	color: #555555;
	line-height: 1.6;
	/* Same as .shinwado-about__title above: typography comes from the
	   Description field's own controls, applied inline. */
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn class — see section 3. */
.shinwado-about__cta {
	margin: 0;
}

/* Right side: 3-column grid (icon/image, title, description) */
.shinwado-about__columns {
	flex: 2 1 480px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.shinwado-about__column {
	text-align: center;
}
.shinwado-about__column-image {
	width: 96px;
	height: 96px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	overflow: hidden;
}
.shinwado-about__column-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shinwado-about__column-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 0.5rem;
}
.shinwado-about__column-desc {
	font-size: 0.9rem;
	color: #555555;
	line-height: 1.5;
}

/* 9. Programs block ---------------------------------------------------------------- */
.shinwado-programs {
	background: linear-gradient(180deg, var(--shinwado-navy-top) 0%, var(--shinwado-navy-bottom) 100%);
	padding: 5rem 2rem;
}
.shinwado-programs__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem;
}

/* Left column: eyebrow, underline, title, description, button */
.shinwado-programs__intro {
	flex: 1 1 300px;
	max-width: 420px;
}
.shinwado-programs__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the Small
	   Title field's typography controls, applied inline — see
	   shinwado_typography_style() in includes/helpers.php. */
}
.shinwado-programs__eyebrow-line {
	width: 48px;
	height: 3px;
	margin-bottom: 1.25rem;
	/* background-color set inline from the Small Title Underline Color field. */
}
.shinwado-programs__title {
	margin: 0 0 1rem;
	line-height: 1.25;
	/* Typography + color come from the Large Title field's controls,
	   applied inline — same pattern as .shinwado-programs__eyebrow above. */
}
.shinwado-programs__description {
	margin-bottom: 1.75rem;
	line-height: 1.6;
	/* Typography + color come from the Description field's controls. */
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn + .shinwado-btn--gold classes — see section 3. */
.shinwado-programs__cta {
	margin: 0;
}

/* Right side: 3-panel grid, styled as raised/embossed cards */
.shinwado-programs__panels {
	flex: 2 1 480px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.shinwado-programs__panel {
	background: var(--shinwado-navy-panel);
	border: 1px solid var(--shinwado-navy-panel-border);
	border-radius: 8px;
	padding: 2rem 1.25rem;
	text-align: center;
	/* A light top edge + darker bottom shadow gives the card a subtle
	   embossed/3D look against the flatter section background, echoing
	   the mockup's card treatment without needing an image asset. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 20px rgba(0, 0, 0, 0.35);
}
.shinwado-programs__panel-image {
	width: 84px;
	height: 84px;
	margin: 0 auto 1.25rem;
	border: 3px solid var(--shinwado-gold);
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shinwado-programs__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shinwado-programs__panel-title {
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.6rem;
}
.shinwado-programs__panel-desc {
	color: #c7cede;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* 10. News block ---------------------------------------------------------------- */
.shinwado-news {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0; /* .shinwado-news__left/__right below supply their own padding — no extra padding needed on the section itself */
}
.shinwado-news__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

/* Left column: title, underline, item list, optional button */
.shinwado-news__left {
	padding: 2rem 3rem;
}
.shinwado-news__title {
	margin: 0 0 0.6rem;
	/* font-family/size/weight/style/text-align/color come from the Title
	   field's typography controls, applied inline. */
}
.shinwado-news__title-line {
	width: 48px;
	height: 3px;
	margin-bottom: 1.25rem;
	/* background-color set inline from the Title Underline Color field. */
}
.shinwado-news__items {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin-bottom: 1.25rem;
}
.shinwado-news__item {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}
.shinwado-news__item-image {
	flex: 0 0 90px;
	width: 90px;
	height: 90px;
	border-radius: 6px;
	overflow: hidden;
	/* A <button> with a background-image, not an <img> — deliberately,
	   so there's no native "Save Image As" option when right-clicking.
	   See the lightbox notes in section 3 for the rest of the picture:
	   this isn't true download prevention (never fully possible in a
	   browser), just removing the easiest, most casual path to it. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	padding: 0;
	cursor: zoom-in;
	display: block;
}
.shinwado-news__item-text {
	flex: 1 1 auto;
}
.shinwado-news__item-title {
	margin-bottom: 0.25rem;
	/* Typography + color come from the Item Title typography controls,
	   applied inline — shared across every item in the repeater. */
}
.shinwado-news__item-body {
	margin-bottom: 0.35rem;
	/* Typography + color come from the Item Body typography controls. */
}
.shinwado-news__item-link {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--shinwado-red);
}
.shinwado-news__item-link a {
	text-decoration: none;
	color: inherit;
}
.shinwado-news__item-link a:hover {
	text-decoration: underline;
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn + .shinwado-btn--outline-red classes — see section 3. */
.shinwado-news__button {
	margin: 0;
}

/* Right column: its own background image, top image, quote, signature */
.shinwado-news__right {
	position: relative;
	padding: 2rem 3rem;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.shinwado-news__panel-top-image {
	max-width: 64px;
	height: auto;
	margin-bottom: 1.5rem;
}
.shinwado-news__quote {
	margin-bottom: 1.5rem;
	line-height: 1.5;
	/* Typography + color come from the Quote typography controls,
	   applied inline. */
}
.shinwado-news__signature {
	letter-spacing: 0.04em;
	/* Rendered exactly as entered — no CSS text-transform, per the
	   Signature field's "no extra characters, WYSIWYG" requirement (see
	   includes/fields.php). Typography + color come from the Signature
	   typography controls, applied inline. */
}

/* 11. CTA block -------------------------------------------------------------------- */
.shinwado-cta {
	position: relative;
	background-color: var(--shinwado-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 1.25rem 2rem;
	text-align: center;
	overflow: hidden;
}
.shinwado-cta__inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}
.shinwado-cta__image {
	max-height: 56px;
	width: auto;
	margin: 0 auto 0.75rem;
}
.shinwado-cta__title {
	margin: 0 0 0.5rem;
	font-family: 'Playfair Display', serif;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.25;
	/* Color comes from the CTA Title Color field, applied inline. No
	   overlay or text-shadow — plain text over the photo as-is. */
}
.shinwado-cta__description {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.6;
	/* Color comes from the CTA Description Color field, applied inline. */
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn class — see section 3. */
.shinwado-cta__button {
	margin: 0;
}

/* 12. Contact block ---------------------------------------------------------------- */
.shinwado-contact {
	background-color: #ffffff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Deliberately more compact than the other blocks — keeps this
	   section from feeling oversized, per feedback. */
	padding: 2rem 2rem;
}
.shinwado-contact__form {
	display: block; /* the <form> is just a layout-neutral wrapper around .shinwado-contact__grid below */
}
.shinwado-contact__grid {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Left: heading + Name/Email/Phone. Right: heading + description +
   Message + Submit. Inputs are intentionally minimal/understated — the
   red Submit button is the only real accent color in this block. */
.shinwado-contact__heading {
	margin: 0;
}
.shinwado-contact__form-col,
.shinwado-contact__info-col {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
/* Success/error notice shown after Contact form submission — same
   color conventions as admin.css's own .shinwado-admin__notice, for
   consistency, but this page never loads admin.css at all, so this is
   its own, separate rule rather than reusing that class directly. */
.shinwado-contact__notice {
	padding: 0.85rem 1.1rem;
	border-radius: 6px;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
}
.shinwado-contact__notice--success {
	background: #e8f3e6;
	border: 1px solid #b8dbb1;
	color: #2c5e26;
}
.shinwado-contact__notice--error {
	background: #fbeaea;
	border: 1px solid #e6b8b8;
	color: var(--shinwado-red);
}
/* Privacy Notice shown above the Contact form's submit button —
   informational rather than success/error, so styled distinctly from
   .shinwado-contact__notice above: the same subtle, cream-colored
   treatment already established for this kind of notice elsewhere on
   the site (admin.css's .shinwado-form__help--notice), reused here as
   its own rule since this page doesn't load admin.css at all. */
.shinwado-contact__privacy-notice {
	background: #efe4d0;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	color: #4a423a;
	font-size: 0.85rem;
	line-height: 1.4;
	margin-top: 1rem;
}
.shinwado-contact__privacy-notice a {
	color: var(--shinwado-red);
}
.shinwado-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
/* Honeypot — positioned off-screen rather than display:none, since
   some bots specifically check for and skip fields hidden that way.
   Invisible and unreachable to a real, sighted visitor; aria-hidden on
   the wrapper (in the HTML) keeps it out of screen readers too. */
.shinwado-contact__honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
}
.shinwado-contact__field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #555555;
}
.shinwado-contact__required {
	color: #B60004;
	margin-left: 0.15rem;
}
.shinwado-contact__field input,
.shinwado-contact__field textarea {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	background: #ffffff;
	color: var(--shinwado-ink);
}
.shinwado-contact__field input:focus,
.shinwado-contact__field textarea:focus {
	outline: none;
	border-color: var(--shinwado-red);
}
.shinwado-contact__field textarea {
	resize: vertical;
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn + .shinwado-btn--red classes — see section 3. */
.shinwado-contact__submit {
	align-self: flex-start;
	border: none;
	cursor: pointer;
}

/* Right: heading + description explaining what the form is for, followed
   by the Message field + Submit — sits on top of the section's
   Background Image, same as the Name/Email/Phone fields on the left. */
.shinwado-contact__info-heading {
	margin: 0;
}
.shinwado-contact__info-description {
	line-height: 1.5;
}

/* 13. Shared block base ------------------------------------------------------- */
.shinwado-block {
	scroll-margin-top: 2rem; /* keeps anchor-link jumps from landing flush against the very top edge */
	/* No padding here anymore — it was silently overriding every
	   block's own padding (.shinwado-about, .shinwado-cta, etc.) due to
	   equal CSS specificity plus this rule's position later in the file.
	   Each block below sets its own padding directly now. */
}

/* 14. Footer block ---------------------------------------------------------------- */
/*
 * Background and text color are both set inline from the Background
 * Color / Text Color fields (see shinwado_render_footer() in
 * includes/render.php) — everything below inherits that text color by
 * default (including the social icons, via currentColor) unless a rule
 * here explicitly overrides it (e.g. link hover states).
 */
.shinwado-footer {
	padding: 2rem 2rem 0;
}
.shinwado-footer__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.shinwado-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 1.75rem;
}

/* Brand column: title, description, social icons */
.shinwado-footer__brand-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
}
.shinwado-footer__brand-description {
	font-size: 0.9rem;
	line-height: 1.6;
	opacity: 0.85;
	margin-bottom: 1.25rem;
}
.shinwado-footer__social {
	display: flex;
	gap: 0.75rem;
}
.shinwado-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.shinwado-footer__social-icon svg {
	width: 16px;
	height: 16px;
}
.shinwado-footer__social-icon:hover {
	opacity: 1;
}

/* Link columns: Quick Links / Programs / Resources — all 3 share this */
.shinwado-footer__column-title {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
	margin-bottom: 1rem;
}
.shinwado-footer__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.shinwado-footer__link-list a {
	text-decoration: none;
	font-size: 0.92rem;
	opacity: 0.9;
}
.shinwado-footer__link-list a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Copyright bar */
.shinwado-footer__copyright {
	border-top: 1px solid currentColor;
	padding: 1.25rem 0;
	text-align: center;
	font-size: 0.8rem;
	opacity: 0.6;
}

/* 15. Responsive ----------------------------------------------------------------- */
@media (max-width: 780px) {
	.shinwado-hero__topbar {
		padding: 1rem 1.25rem;
		/* Higher than .shinwado-hero__cta-wrap's z-index: 2 — .shinwado-hero__topbar
		   creates its own stacking context (position: absolute + its own
		   z-index), so a z-index set on the dropdown inside it can't
		   escape that to compete against the CTA button directly; the
		   comparison that actually matters happens at this level. Without
		   this, the CTA button (later in the HTML, same z-index as the
		   topbar) was winning the stacking and covering the open dropdown
		   wherever the two happened to overlap. */
		z-index: 3;
	}
	/* .shinwado-hero has overflow: hidden (for the background image) —
	   without this override, it was clipping the dropdown's own content
	   whenever it extended taller than the hero section itself, since
	   the dropdown is a descendant positioned relative to the topbar,
	   which sits inside this same overflow: hidden section. Toggled via
	   JS alongside the dropdown's own open/close state — see
	   assets/js/shinwado.js. */
	.shinwado-hero--nav-open {
		overflow: visible;
	}
	.shinwado-hero__logo {
		/* Reduced further from an earlier 120px — still large relative to
		   a phone screen, and visually colliding with the wordmark text
		   baked into the hero background image itself. */
		height: 64px;
	}

	.shinwado-hero__nav-toggle {
		display: flex;
	}
	.shinwado-hero__nav-list {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: #ffffff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		border-radius: 4px;
		min-width: 180px;
		padding: 0.5rem 0;
	}
	.shinwado-hero__nav-list.is-open {
		display: flex;
	}
	.shinwado-hero__nav-list a {
		display: block;
		padding: 0.75rem 1.25rem;
		color: var(--shinwado-ink);
	}
	.shinwado-hero__login-link {
		padding: 0.4rem 0.85rem;
		font-size: 0.85rem;
		margin-top: 0.4rem;
		/* A solid backdrop, unlike the desktop version's transparent one —
		   needed here since mobile has no sticky/opaque-background state
		   to fall back on at this scroll position, and the red outline
		   alone was hard to distinguish against the busier parts of the
		   hero image behind it. */
		background-color: rgba(255, 255, 255, 0.9);
	}
	.shinwado-hero__account {
		margin-top: 0.4rem;
	}
	.shinwado-hero__account-avatar {
		width: 36px;
		height: 36px;
	}

	/*
	 * On narrow screens the hero image is much taller relative to the
	 * viewport, so the same title-band-to-bottom midpoint sits lower in
	 * the visible frame. Nudge the CTA down slightly to compensate.
	 */
	:root {
		--shinwado-hero-cta-top: 70%;
	}

	.shinwado-hero__cta-button {
		padding: 0.75rem 1.75rem;
		font-size: 0.9rem;
	}

	.shinwado-about__columns {
		grid-template-columns: 1fr;
	}

	.shinwado-programs__panels {
		grid-template-columns: 1fr;
	}

	.shinwado-news__grid {
		grid-template-columns: 1fr;
	}
	.shinwado-news__left,
	.shinwado-news__right {
		padding: 3rem 1.5rem;
	}

	.shinwado-contact__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.shinwado-footer__columns {
		grid-template-columns: 1fr 1fr;
		row-gap: 2rem;
	}
	.shinwado-footer__brand {
		grid-column: 1 / -1;
	}
}