/*
Theme Name: UX Portfolio Design
Theme URI: https://uxportfolio.design/
Author: Chopstix Media Limited
Description: Block theme for uxportfolio.design. No paid plugins required.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.4.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uxpd
*/

/* Wordmark dot before the site title */
.uxpd-header .uxpd-logo { margin: 0; }
.uxpd-header .uxpd-logo img { display: block; width: 220px; height: auto; }
@media (max-width: 480px) { .uxpd-header .uxpd-logo img { width: 170px; } }
.uxpd-header .wp-block-navigation a { text-decoration: none; }
.uxpd-footer p { color: #E8E6E1; margin: 0; font-size: 15px; }
.uxpd-footer a { color: #E8E6E1; }

/* Focus ring everywhere */
:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px;
}

/* ===== Homepage (content uses the .uxpd group) ===== */
.uxpd { background: var(--wp--preset--color--ground); }
.uxpd .uxpd-band { padding: 64px 24px; margin: 0; }
.uxpd .uxpd-tint { background: var(--wp--preset--color--tint); border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.uxpd .uxpd-rule { border-top: 1px solid var(--wp--preset--color--line); }
.uxpd .uxpd-inner { max-width: 1120px; margin-left: auto; margin-right: auto; }
.uxpd .wp-block-columns { gap: 48px; margin-bottom: 0; }
.uxpd h2 { margin-top: 0; margin-bottom: 24px; }
.uxpd h3 { margin-top: 0; margin-bottom: 8px; }

/* Hero */
.uxpd .uxpd-hero { padding-top: 72px; }
.uxpd .uxpd-hero .wp-block-columns { align-items: center; gap: 56px; }
.uxpd .uxpd-cover img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 48px -24px rgba(23, 23, 26, 0.35); }
.uxpd .uxpd-eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.uxpd .uxpd-title { margin: 0 0 12px; }
.uxpd .uxpd-subtitle { font-family: var(--wp--preset--font-family--serif); font-size: clamp(21px, 2.4vw, 26px); line-height: 1.25; margin: 0 0 24px; }
.uxpd .uxpd-lede { max-width: 540px; margin-bottom: 32px; }
.uxpd .uxpd-meta { margin: 20px 0 0; font-size: 15px; color: var(--wp--preset--color--muted); }

/* Button variants */
.uxpd .wp-block-buttons { gap: 12px; }
.uxpd .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; }
.uxpd .uxpd-buy .wp-block-button__link { min-height: 52px; padding-left: 24px; padding-right: 24px; }
.uxpd-btn-dark .wp-block-button__link { background: var(--wp--preset--color--ink); }
.uxpd-btn-dark .wp-block-button__link:hover { background: #33333A; }
.uxpd-btn-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--ink); min-height: 44px; padding: 0 16px; font-size: 15px; }
.uxpd-btn-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #FFFFFF; }

/* Inside the book */
.uxpd .uxpd-spreads { gap: 24px; }
.uxpd .uxpd-spreads img { width: 100%; height: auto; border: 1px solid var(--wp--preset--color--line); border-radius: 4px; background: var(--wp--preset--color--ground); }
.uxpd .wp-element-caption { text-align: left; margin-top: 10px; }
.uxpd .uxpd-contents { columns: 2 280px; column-gap: 48px; padding-left: 24px; }
.uxpd .uxpd-contents li { margin-bottom: 8px; break-inside: avoid; }

/* Cards */
.uxpd .uxpd-card { background: #FFFFFF; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 28px; }
.uxpd .uxpd-offers { gap: 24px; }
.uxpd .uxpd-offers .uxpd-card { display: flex; flex-direction: column; }
.uxpd .uxpd-offers .uxpd-card > p { flex-grow: 1; }

/* Author and proof */
.uxpd .uxpd-author { gap: 24px; margin-bottom: 40px; }
.uxpd .uxpd-author img { width: 96px; height: 96px; object-fit: cover; }
.uxpd .uxpd-logos-intro { text-align: center; font-size: 15px; color: var(--wp--preset--color--muted); margin-bottom: 12px; }
.uxpd .uxpd-logos { text-align: center; font-weight: 600; font-size: 18px; color: var(--wp--preset--color--muted); word-spacing: 6px; }

/* News */
.uxpd .uxpd-news { padding: 0; margin: 0; }
.uxpd .uxpd-news li { list-style: none; padding: 16px 0; border-top: 1px solid var(--wp--preset--color--line); margin: 0; }
.uxpd .uxpd-news li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.uxpd .uxpd-news a { font-weight: 600; }
.uxpd .uxpd-news .wp-block-latest-posts__post-date { display: block; font-size: 14px; color: var(--wp--preset--color--muted); margin-top: 4px; }

/* Phones */
@media (max-width: 781px) {
	.uxpd .uxpd-band { padding: 48px 16px; }
	.uxpd .uxpd-hero { padding-top: 40px; }
	.uxpd .uxpd-cover-col { max-width: 240px; }
	.uxpd .wp-block-columns { gap: 32px; }
}

/* ===== Read free: contents and chapter pages ===== */
.uxpd-chapter .uxpd-crumb { font-size: 15px; color: var(--wp--preset--color--muted); margin: 0 0 20px; }
.uxpd-chapter .uxpd-eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.uxpd-chapter h1 { font-size: clamp(38px, 5vw, 52px); line-height: 1.08; margin: 0 0 16px; }
.uxpd-chapter .uxpd-byline { font-size: 15px; color: var(--wp--preset--color--muted); margin: 0 0 32px; }
.uxpd-chapter .uxpd-lede-serif { font-family: var(--wp--preset--font-family--serif); font-size: clamp(20px, 2.4vw, 23px); line-height: 1.4; margin: 0 0 48px; }
.uxpd-chapter .uxpd-label { font-family: var(--wp--preset--font-family--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 12px; }
.uxpd-chapter .uxpd-toc { background: #FFFFFF; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 20px 24px; margin-bottom: 48px; }
.uxpd-chapter .uxpd-toc ul { margin: 0; padding-left: 20px; font-size: 16px; }
.uxpd-chapter .uxpd-toc li { margin-bottom: 6px; }

/* Chapter text */
.uxpd-chapter .uxpd-text p, .uxpd-chapter .uxpd-text li { font-size: 19px; line-height: 1.65; color: #26262B; }
.uxpd-chapter .uxpd-text { max-width: 62ch; }
.uxpd-chapter .uxpd-text h2 { font-size: 32px; line-height: 1.2; margin: 48px 0 16px; scroll-margin-top: 24px; }
.uxpd-chapter .uxpd-text h3 { font-size: 21px; margin: 32px 0 12px; }
.uxpd-chapter .uxpd-text h4 { font-size: 18px; margin: 28px 0 10px; }
.uxpd-chapter .uxpd-text .wp-block-image { margin: 32px 0; }
.uxpd-chapter .uxpd-text .wp-element-caption { text-align: left; max-width: 75%; color: var(--wp--preset--color--muted); }
.uxpd-chapter .uxpd-pull { background: var(--wp--preset--color--tint); border-radius: 8px; padding: 24px 28px; margin: 32px 0; }
.uxpd-chapter .uxpd-pull p { font-family: var(--wp--preset--font-family--serif); font-size: 23px; line-height: 1.45; color: var(--wp--preset--color--ink); margin: 0; }
.uxpd-chapter .uxpd-example { background: #FFFFFF; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 20px 24px; margin: 24px 0; }
.uxpd-chapter .uxpd-example p { margin: 0 0 6px; font-size: 18px; }
.uxpd-chapter .uxpd-example p:first-child { font-weight: 600; color: var(--wp--preset--color--ink); }
.uxpd-chapter .uxpd-aside { background: #FFFFFF; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 24px 28px; margin: 32px 0; }
.uxpd-chapter .uxpd-aside p { font-size: 17px; margin: 0 0 12px; }
.uxpd-chapter .uxpd-aside p:last-child { margin: 0; font-weight: 600; }

/* Problems (chapters in the book) */
.uxpd-chapter .uxpd-problems { border-top: 1px solid var(--wp--preset--color--line); margin-bottom: 56px; }
.uxpd-chapter .uxpd-problems h3 { font-family: var(--wp--preset--font-family--serif); font-size: 26px; line-height: 1.25; margin: 24px 0 8px; }
.uxpd-chapter .uxpd-problems p { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--line); }

/* Contents list */
.uxpd-chapter .uxpd-contents-list { list-style: none; padding: 0; margin: 0 0 64px; border-top: 1px solid var(--wp--preset--color--line); counter-reset: ch; }
.uxpd-chapter .uxpd-contents-list li { padding: 18px 0; border-bottom: 1px solid var(--wp--preset--color--line); margin: 0; font-size: 19px; }
.uxpd-chapter .uxpd-contents-list a { font-weight: 600; }
.uxpd-chapter .uxpd-contents-list em { font-style: normal; font-size: 14px; color: var(--wp--preset--color--muted); margin-left: 8px; }
.uxpd-chapter .uxpd-contents-list strong { font-weight: 600; font-size: 14px; color: var(--wp--preset--color--accent); margin-left: 8px; }

/* Next card, buy band, chapter nav */
.uxpd-chapter .uxpd-next a { display: block; padding: 20px 24px; border: 1px solid var(--wp--preset--color--ink); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 19px; margin: 16px 0 56px; }
.uxpd-chapter .uxpd-next span { display: block; font-weight: 400; font-size: 14px; color: var(--wp--preset--color--muted); }
.uxpd-chapter .uxpd-buyband { background: var(--wp--preset--color--tint); border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding: 56px 24px; margin: 0; }
.uxpd-chapter .uxpd-buyband h2 { font-size: 30px; margin: 0 0 8px; }
.uxpd-chapter .uxpd-buyband .wp-block-buttons { gap: 12px; margin-top: 20px; }
.uxpd-chapter .uxpd-buyband .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; }
.uxpd-chapter .uxpd-buyband .uxpd-kindle { font-size: 15px; color: var(--wp--preset--color--muted); margin-top: 16px; }
.uxpd-chapter .uxpd-chapnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-weight: 600; padding: 32px 0 56px; margin: 0; }
.uxpd-chapter .uxpd-chapnav a { text-decoration: none; }

/* Empty figure slots show nothing until an image is added */
.wp-block-image img:not([src]) { display: none; }
@media (max-width: 781px) {
	.uxpd-chapter .uxpd-text p, .uxpd-chapter .uxpd-text li { font-size: 18px; }
	.uxpd-chapter .uxpd-buyband { padding: 40px 16px; }
}

/* Contents list numbering */
.uxpd-chapter .uxpd-contents-list li { counter-increment: ch; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.uxpd-chapter .uxpd-contents-list li::before { content: counter(ch); flex: 0 0 44px; font-family: var(--wp--preset--font-family--serif); font-size: 22px; color: var(--wp--preset--color--muted); }
.uxpd-chapter .uxpd-contents-list li:last-child::before { content: "+"; }
.uxpd-chapter .uxpd-contents-list li:last-child { font-weight: 600; color: var(--wp--preset--color--muted); }
.uxpd .uxpd-contents strong { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--accent); }
.uxpd .uxpd-readfree { font-size: 15px; font-weight: 600; margin: -4px 0 16px; }
.uxpd .uxpd-rating { margin: 16px 0 0; font-size: 15px; font-weight: 600; }
.uxpd .uxpd-stars { color: #C8721A; letter-spacing: 2px; margin-right: 4px; }
.uxpd-chapter > .wp-block-buttons, .uxpd-chapter .wp-block-buttons { gap: 12px; margin-top: 32px; margin-bottom: 56px; }

/* Lede and buttons also work on pages using the default Page template */
.uxpd-lede-serif { font-family: var(--wp--preset--font-family--serif); font-size: clamp(20px, 2.4vw, 23px); line-height: 1.4; color: var(--wp--preset--color--body); margin: 0 0 40px; }
main .wp-block-post-content > .wp-block-buttons { gap: 12px; margin-top: 32px; }

/* ===== Fluent Forms (contact form) ===== */
.fluentform .ff-el-group { margin-bottom: 20px; }
.fluentform .ff-el-input--label label { font-weight: 600; font-size: 15px; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-form-control {
	min-height: 48px; padding: 10px 14px; font: inherit; font-size: 17px;
	color: var(--wp--preset--color--ink); background: #FFFFFF;
	border: 1px solid #8A867D; border-radius: 8px; box-shadow: none;
}
.fluentform textarea.ff-el-form-control { min-height: 180px; line-height: 1.5; }
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 3px solid var(--wp--preset--color--accent); outline-offset: 1px; box-shadow: none;
}
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	background: var(--wp--preset--color--accent); color: #FFFFFF; border: 0; border-radius: 8px;
	min-height: 48px; padding: 0 24px; font-family: var(--wp--preset--font-family--sans);
	font-size: 16px; font-weight: 600; cursor: pointer;
}
.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover { background: #542A9C; opacity: 1; }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #B3261E; }
.fluentform .error.text-danger { color: #B3261E; font-size: 14px; margin-top: 6px; }
.ff-message-success {
	background: var(--wp--preset--color--tint); border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px; padding: 16px 20px; box-shadow: none; color: var(--wp--preset--color--ink);
}

/* Space between the spreads and the contents list on the homepage */
.uxpd .uxpd-spreads { margin-bottom: 0; }
.uxpd .uxpd-spreads + .wp-block-heading { margin-top: 48px; margin-bottom: 16px; }

/* Problems list: even spacing between the rules */
.uxpd-chapter .uxpd-problems { margin-bottom: 56px; }
.uxpd-chapter .uxpd-problems > p {
	margin: 0; padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 19px; line-height: 1.45; color: var(--wp--preset--color--ink);
}