/*
Theme Name: Wings Author
Theme URI: https://readwatchfeel.com/
Author: Dino Monti
Description: Author website for WINGS by Dino Monti (READ.WATCH.FEEL.). Deep navy opening with the book cover, ivory story and author sections, gold buttons, thin gold lines and small wing details. Every section is an editable block pattern: hero, story with Buy button, About the Author, reader reviews and a newsletter sign-up that saves to WordPress. No page builder or extra plugin needed.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wings-author
*/

/* =========================================
   Base
   Colours come from Appearance → Editor → Styles → Colors,
   so changing one there changes it everywhere.
   ========================================= */
:root {
	--wa-navy: var(--wp--preset--color--navy, #0f1d3a);
	--wa-navy-soft: var(--wp--preset--color--navy-soft, #1d2e55);
	--wa-gold: var(--wp--preset--color--gold, #e3b341);
	--wa-gold-deep: var(--wp--preset--color--gold-deep, #b8892a);
	--wa-ivory: var(--wp--preset--color--ivory, #fbf7ee);
	--wa-ivory-deep: var(--wp--preset--color--ivory-deep, #f3ecdc);
	--wa-line: 1px solid var(--wa-gold-deep);
}
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: 84px; }
.wp-site-blocks > * { margin-block: 0; }
.wa-main { overflow: clip; }
.wa-main > .wp-block-post-content > * { margin-block: 0; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Small caps label above headings */
.wa-eyebrow {
	font-family: var(--wp--preset--font-family--montserrat, sans-serif);
	font-size: .78rem !important; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
	margin: 0 0 .6rem;
}

/* Buttons: gold with navy lettering, everywhere */
.wp-block-button .wp-block-button__link { transition: background-color .2s, transform .2s, box-shadow .2s; }
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(227, 179, 65, .28); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid var(--wa-gold); outline-offset: 3px; }
/* Second button in the hero: thin gold outline */
.wa-btn-ghost .wp-block-button__link,
.wp-block-button.is-style-outline.wa-btn-ghost .wp-block-button__link {
	background: transparent !important; color: var(--wa-ivory) !important;
	border: 1px solid rgba(227, 179, 65, .7); box-shadow: none;
}
.wa-btn-ghost .wp-block-button__link:hover { background: rgba(227, 179, 65, .1) !important; box-shadow: none; }

/* =========================================
   Menu bar
   ========================================= */
.wa-nav {
	position: sticky; top: 0; z-index: 50;
	padding: 10px clamp(16px, 3vw, 56px);
	min-height: 68px; box-sizing: border-box;
	border-bottom: 1px solid rgba(227, 179, 65, .55);
}
.admin-bar .wa-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .wa-nav { top: 46px; } }
.wa-nav .wa-brand { gap: 12px; }
.wa-nav .wa-nav-logo { margin: 0; }
.wa-nav .wa-nav-logo img { display: block; border-radius: 50%; box-shadow: 0 0 0 1px rgba(227, 179, 65, .6); }
.wa-nav .wa-wordmark { margin: 0; font-family: var(--wp--preset--font-family--cinzel, serif); font-weight: 700; font-size: 1.25rem; letter-spacing: .18em; }
.wa-nav .wa-wordmark a { color: var(--wa-ivory); text-decoration: none; }
.wa-nav .wa-nav-right { gap: clamp(16px, 2.5vw, 40px); }
.wa-nav .wa-menu { font-family: var(--wp--preset--font-family--montserrat, sans-serif); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wa-ivory); }
.wa-nav .wa-menu a { color: var(--wa-ivory); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.wa-nav .wa-menu a:hover { color: var(--wa-gold); border-bottom-color: var(--wa-gold); }
.wa-nav .wa-nav-buy { margin: 0; }
.wa-nav .wa-nav-buy .wp-block-button__link { padding: .65rem 1.3rem; font-size: .78rem; }
.wa-nav .wp-block-navigation__responsive-container-open { color: var(--wa-ivory); }
.wa-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 32px; }
.wa-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-size: 1.2rem; gap: 1.4rem; }

/* =========================================
   Hero: deep navy, ivory headline, the book held up on the right
   ========================================= */
.wa-hero {
	padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 56px);
	background-image: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(227, 179, 65, .10), transparent 70%);
	border-bottom: 1px solid rgba(227, 179, 65, .55);
}
.wa-hero .wa-cols { gap: clamp(32px, 5vw, 72px); margin: 0; }
.wa-hero .wa-hero-copy > * { margin-inline: auto; }
.wa-hero .wa-kicker { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-style: italic; margin: 0 0 .2rem; color: var(--wa-ivory); }
.wa-hero .wa-book-title { margin: 0; font-weight: 700; letter-spacing: .14em; line-height: 1.05; }
.wa-hero .wa-hero-wing { margin: .9rem auto 1.3rem; }
.wa-hero .wa-hero-wing img { display: block; }
.wa-hero .wa-tagline { max-width: 430px; font-size: 1.3rem; font-style: italic; line-height: 1.45; color: rgba(251, 247, 238, .88); margin-top: 0; }
.wa-hero .wa-hero-buttons { margin-top: 2rem; }
.wa-hero .wa-framed::before { border-color: var(--wa-gold); }

/* =========================================
   The ivory card: story and author
   ========================================= */
.wa-showcase-wrap { padding: clamp(16px, 3vw, 56px) 16px; }
.wa-showcase {
	max-width: 1300px; margin: 0 auto;
	border: 1px solid rgba(184, 137, 42, .45);
	box-shadow: 0 10px 30px rgba(15, 29, 58, .06);
	padding: clamp(32px, 5vw, 80px) clamp(16px, 4vw, 72px);
}
/* A section used on its own (outside the card) gets its own ivory background */
.wa-panel { background: var(--wa-ivory); padding: clamp(48px, 6vw, 88px) clamp(16px, 4vw, 56px); }
.wa-showcase .wa-panel { background: transparent; padding: 0; }
.wa-panel .wa-cols { gap: clamp(28px, 5vw, 72px); margin: 0; }
.wa-panel h2 { margin: 0 0 1.4rem; }
.wa-panel p { margin: 0 0 1.2em; font-size: 1.08rem; line-height: 1.8; }

/* Photos, with a thin gold frame set behind them */
.wa-photo { margin-block: 0; }
.wa-photo img { display: block; width: 100%; max-width: 460px; margin: 0 auto; }
.wa-photo--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.wa-photo--tall img { aspect-ratio: 2 / 3; object-fit: cover; }
.wa-framed { position: relative; max-width: 460px; margin-inline: auto !important; }
.wa-framed::before {
	content: ""; position: absolute; inset: 14px -14px -14px 14px;
	border: var(--wa-line); pointer-events: none;
}
.wa-framed img { position: relative; z-index: 1; }

.wa-story .wa-buy { margin-top: 2.6rem; }
.wa-story .wa-story-text { padding-top: 4px; }
.wa-story .wa-teaser {
	font-family: var(--wp--preset--font-family--cormorant, serif); font-style: italic;
	font-size: 1.4rem !important; line-height: 1.45 !important;
	border-left: 1px solid var(--wa-gold-deep); padding-left: 1.1rem; margin-top: 1.6rem;
}

/* Gold wing divider between the story and the author */
.wa-divider-wrap { padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 56px); }
.wa-divider { margin: 0 auto !important; }
.wa-divider img { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; }

.wa-author .wa-author-copy > * { margin-inline: auto; max-width: 480px; }
.wa-author .wa-bio-button { margin-top: 2.4rem; }

/* =========================================
   Book reviews
   ========================================= */
.wa-reviews { padding: clamp(48px, 6vw, 88px) clamp(16px, 4vw, 56px); border-top: 1px solid rgba(184, 137, 42, .35); }
.wa-reviews h2 { margin: 0; }
.wa-reviews .wa-heading-wing { margin: .7rem auto 2.6rem; }
.wa-reviews .wa-heading-wing img { display: block; }
.wa-reviews .wa-review-grid { gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.wa-reviews .wa-review-card {
	display: flex; flex-direction: column; justify-content: flex-start;
	padding: clamp(36px, 4vw, 56px) 24px; border-top: 2px solid var(--wa-gold);
	box-shadow: 0 8px 24px rgba(15, 29, 58, .07);
}
.wa-reviews .wa-review-card > * { margin-block: 0; }
.wa-reviews .wa-review-icon { margin-bottom: 1.4rem; }
.wa-reviews .wa-review-icon img { display: block; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--wa-gold-deep); }
.wa-reviews .wa-review-name { font-weight: 500; letter-spacing: .06em; margin-bottom: .25rem; }
.wa-reviews .wa-review-role { font-family: var(--wp--preset--font-family--montserrat, sans-serif); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--wa-gold-deep); margin-bottom: 1rem; }
.wa-reviews .wa-review-quote { font-size: 1.3rem; font-style: italic; line-height: 1.45; max-width: 320px; margin-inline: auto; }

/* =========================================
   Newsletter
   ========================================= */
.wa-newsletter-wrap { padding: clamp(48px, 6vw, 110px) clamp(12px, 2.5vw, 48px); }
.wa-newsletter {
	max-width: 1300px; margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) 24px;
	outline: 1px solid rgba(227, 179, 65, .6); outline-offset: -12px;
}
.wa-newsletter .wa-wing-mark { margin: 0 auto .6rem; }
.wa-newsletter h2 { max-width: 820px; margin: 0 auto 2.4rem; line-height: 1.3; }
.wa-signup-form { display: grid; gap: 12px; }
.wa-signup-form label { display: block; }
.wa-signup-form input {
	width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px;
	border: 1px solid rgba(251, 247, 238, .25); border-radius: 2px; background: var(--wa-ivory);
	font: inherit; font-size: .98rem; color: var(--wa-navy);
}
.wa-signup-form input::placeholder { color: #6b7488; }
.wa-signup-form input:focus { outline: 2px solid var(--wa-gold); outline-offset: 1px; }
.wa-signup-form button {
	height: 52px; margin-top: 6px; border: 0; border-radius: 2px;
	background: var(--wa-gold); color: var(--wa-navy);
	font-family: var(--wp--preset--font-family--montserrat, sans-serif); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer; transition: background-color .2s;
}
.wa-signup-form button:hover { background: #f0c75e; }
.wa-signup-message { text-align: center; font-size: 1.1rem; background: rgba(227, 179, 65, .14); padding: 16px; border-radius: 2px; }
.wa-signup-message--error { background: rgba(0, 0, 0, .25); }
.wa-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =========================================
   Footer
   ========================================= */
.wa-footer { padding: 22px clamp(16px, 3vw, 56px); gap: 8px 24px; border-top: 1px solid rgba(227, 179, 65, .55); }
.wa-footer p { margin: 0; color: rgba(251, 247, 238, .8); }
.wa-footer a { color: inherit; text-decoration: none; }
.wa-footer a:hover { color: var(--wa-gold); }

/* =========================================
   Inner pages (About the Author, posts)
   ========================================= */
.wa-page { padding: clamp(40px, 6vw, 88px) 16px; }
.wa-page .wa-page-title { margin-top: 0; }
.wa-bio-intro { gap: clamp(24px, 4vw, 48px); }
.wa-bio-intro .wa-photo img { background: var(--wa-ivory-deep); border: var(--wa-line); }

/* =========================================
   Phones and tablets
   ========================================= */
@media (max-width: 781px) {
	.wa-cols > .wp-block-column { flex-basis: 100% !important; }
	.wa-hero .wa-book-title { font-size: clamp(2.8rem, 15vw, 3.6rem) !important; }
	.wa-panel p { font-size: 1rem; }
	.wa-author .wa-bio-button { margin-top: 1.6rem; }
	.wa-photo img, .wa-framed { max-width: 400px; }
	.wa-framed::before { inset: 10px -10px -10px 10px; }
	.wa-nav { min-height: 60px; }
	.wa-nav .wa-nav-right { gap: 14px; }
	.wa-nav .wa-nav-buy .wp-block-button__link { padding: .55rem .9rem; font-size: .7rem; letter-spacing: .06em; }
	.wa-newsletter h2 { font-size: clamp(1.5rem, 6.4vw, 2.1rem) !important; }
	.wa-story .wa-story-text, .wa-author .wa-author-copy { max-width: 620px; margin-inline: auto; }
	.wa-reviews .wa-review-grid > .wa-review-card { max-width: 480px; margin-inline: auto; width: 100%; box-sizing: border-box; }
	.wa-showcase-wrap { padding-inline: 10px; }
}
/* Tablets in portrait: reviews sit two to a row instead of one long column */
@media (min-width: 600px) and (max-width: 781px) {
	.wa-reviews .wa-review-grid { flex-wrap: wrap !important; justify-content: center; }
	.wa-reviews .wa-review-grid > .wa-review-card { flex: 0 1 calc(50% - 14px) !important; max-width: none; margin-inline: 0; }
}
/* Very small phones: keep the badge, hamburger and Buy button on one line */
@media (max-width: 380px) {
	.wa-nav .wa-wordmark { display: none; }
}

/* =========================================
   Feather texture: a faint gold pattern behind the navy and ivory sections.
   On hover it drifts slowly and a soft glow follows the pointer.
   Remove the "wa-tex" lines below to turn it off.
   ========================================= */
.wa-hero, .wa-showcase, .wa-reviews, .wa-newsletter {
	position: relative; isolation: isolate;
	--wa-tex: url("assets/images/texture-feathers-deep.svg");
	--wa-tex-opacity: .05; --wa-glow: rgba(227, 179, 65, .14);
	--mx: 50%; --my: 40%;
}
.wa-hero, .wa-newsletter { --wa-tex: url("assets/images/texture-feathers-gold.svg"); --wa-tex-opacity: .06; --wa-glow: rgba(227, 179, 65, .16); }
.wa-hero::before, .wa-showcase::before, .wa-reviews::before, .wa-newsletter::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: var(--wa-tex); background-size: 220px 220px;
	opacity: var(--wa-tex-opacity);
	transition: opacity .8s ease;
	animation: wa-drift 60s linear infinite; animation-play-state: paused;
}
.wa-hero::after, .wa-showcase::after, .wa-reviews::after, .wa-newsletter::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(160px circle at var(--mx) var(--my), var(--wa-glow), transparent 70%);
	opacity: 0; transition: opacity .6s ease;
}
.wa-hero:hover::before, .wa-showcase:hover::before, .wa-reviews:hover::before, .wa-newsletter:hover::before {
	opacity: calc(var(--wa-tex-opacity) * 1.9); animation-play-state: running;
}
.wa-hero:hover::after, .wa-showcase:hover::after, .wa-reviews:hover::after, .wa-newsletter:hover::after { opacity: 1; }
@keyframes wa-drift { from { background-position: 0 0; } to { background-position: 220px -440px; } }
@media (prefers-reduced-motion: reduce) {
	.wa-hero::before, .wa-showcase::before, .wa-reviews::before, .wa-newsletter::before { animation: none; }
}
@media (hover: none) {
	.wa-hero::after, .wa-showcase::after, .wa-reviews::after, .wa-newsletter::after { display: none; }
}