/*
Theme Name: Jules Hart
Theme URI: https://jules-hart.com
Author: Jules Hart
Description: Author site for Jules Hart — "Parchment" design (mockup A11). Colours, fonts and sizes live in theme.json (Appearance › Editor › Styles). Menus are edited in Appearance › Menus (Top, Footer, Social icons). Page text lives in each page as ordinary blocks. Books, sign-up, cast and map come from separate plugins.
Version: 0.6.3
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jules-hart

Fonts: Josefin Sans and Jost, SIL Open Font License, self-hosted in assets/fonts.

Changelog
0.6.0 (30 Oct 2026, Claude): Accessibility — every page has one main heading (Home: hidden site
      title via new front-page template; list titles level 2); speed and sharing fixes.
0.5.0 (30 Oct 2026, Claude): Instagram feed styling + hover captions (from TKIlmar), Patreon
      tier cards (class jh-tier), benefits list; phone footer one link per line.
0.4.0 (30 Oct 2026, Claude): Site-wide VIP sign-up band (template part "signup", uses the Sender
      Signup plugin); end-of-article email form; "Plain page" template for the sign-up pages.
0.3.1 (30 Oct 2026, Claude): Home "Notes from the Shore" shows each feature image on the left;
      headings inside articles left-aligned and smaller.
0.3.0 (30 Oct 2026, Claude): Articles — list (image left, topic, excerpt, #tags), latest notes
      for Home, single article layout, search/archive pages with Notes search;
      pull-quote style (Josefin, teal, gold rule). Patterns: notes-list, notes-latest.
0.2.1 (30 Oct 2026, Claude): Footer menu lined up with the © line (removed the automatic
      block gap above it).
0.2.0 (30 Oct 2026, Claude): Smaller logo, headland and tagline on phones; vector name
      logo master in assets/img (jules-hart-name-logo.svg).
0.1.0 (30 Oct 2026, Claude): Theme skeleton — palette, fonts, sizes; Top/Footer/Social
      menu locations + JH Menu block; header and footer; minimal templates.
*/

/* ---------- Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Header (masthead) ---------- */
.jh-masthead { text-align: center; padding-top: 16px; }
.jh-masthead .wp-block-site-logo { margin: 0 auto; }
.jh-masthead .wp-block-site-logo img { margin: 0 auto; }
.jh-masthead .jh-headland { margin: 2px auto 4px; max-width: 400px; }
.jh-masthead .jh-headland img { display: block; width: 100%; height: auto; }
.jh-masthead .wp-block-site-tagline { margin-top: 2px; }

/* ---------- Menu bar ---------- */
.jh-navbar {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-top: 18px;
}
.jh-navbar__inner {
	display: flex; justify-content: center; align-items: center;
	max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.jh-menu ul { list-style: none; margin: 0; padding: 0; }
.jh-menu--top .jh-menu__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 26px; padding: 14px 0; }
.jh-menu--top a {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 500; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase;
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.jh-menu--top a:hover { color: var(--wp--preset--color--teal); text-decoration: none; }
.jh-menu--top .current-menu-item > a,
.jh-menu--top .current-menu-ancestor > a,
.jh-menu--top .current_page_item > a { color: var(--wp--preset--color--teal); }
/* Sign Up button: menu item with CSS class "menu-cta" */
.jh-menu--top .menu-cta > a {
	background: var(--wp--preset--color--teal); color: #fff; padding: 7px 14px; letter-spacing: 2px; display: inline-block;
}
.jh-menu--top .menu-cta > a:hover { background: var(--wp--preset--color--teal-dark); color: #fff; }
/* Hide a menu item without deleting it: give it the CSS class "menu-hidden" (remove the class to show it again) */
.menu-item.menu-hidden { display: none !important; }
/* Sub-menus (drop-downs), if WB adds any */
.jh-menu--top li { position: relative; }
.jh-menu--top .sub-menu {
	display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 200px;
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); padding: 8px 0;
}
.jh-menu--top .sub-menu a { display: block; padding: 6px 14px; }
.jh-menu--top li:hover > .sub-menu, .jh-menu--top li:focus-within > .sub-menu { display: block; }
.jh-menu__toggle { display: none; }

/* Social icons (header and footer) */
.jh-menu--social .jh-menu__list { display: flex; gap: 14px; align-items: center; }
.jh-menu--social a { color: var(--wp--preset--color--ink); display: inline-flex; }
.jh-menu--social a:hover { color: var(--wp--preset--color--teal); }
.jh-navbar .jh-menu--social { margin-left: 30px; padding-left: 24px; border-left: 1px solid var(--wp--preset--color--line); }
.jh-menu-empty { font-size: 13px; color: var(--wp--preset--color--soft); font-style: italic; margin: 10px 0; }

@media (max-width: 1180px) {
	.jh-navbar__inner { flex-direction: column; }
	.jh-navbar .jh-menu--social { margin: 0; padding: 0 0 12px; border-left: 0; }
}

/* Phone: ☰ button */
@media (max-width: 800px) {
	.jh-menu__toggle {
		display: inline-flex; gap: 8px; align-items: center; margin: 10px auto;
		background: none; border: 1px solid var(--wp--preset--color--line); padding: 8px 16px; cursor: pointer;
		font: 500 12px var(--wp--preset--font-family--jost); letter-spacing: 2px; text-transform: uppercase;
		color: var(--wp--preset--color--ink);
	}
	.jh-menu--top { display: flex; flex-direction: column; align-items: center; width: 100%; }
	.jh-menu__panel { display: none; width: 100%; }
	.jh-menu__panel.is-open { display: block; }
	.jh-menu--top .jh-menu__list { flex-direction: column; gap: 0; padding: 0 0 12px; }
	.jh-menu--top .jh-menu__list > li { width: 100%; text-align: center; border-top: 1px solid var(--wp--preset--color--line); }
	.jh-menu--top .jh-menu__list > li > a { display: block; padding: 12px 0; }
	.jh-menu--top .menu-cta > a { display: inline-block; margin: 8px 0; }
	.jh-menu--top .sub-menu { position: static; display: block; border: 0; background: none; }
}

/* ---------- Footer ---------- */
.jh-footer { text-align: center; color: var(--wp--preset--color--soft); font-size: 15px; padding: 36px 24px; }
.jh-footer__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.jh-footer p { margin: 0; }
.jh-footer__row > *, .jh-navbar__inner > * { margin-block-start: 0 !important; } /* 0.2.1: no automatic block gap inside the footer row / menu bar, so items line up */
.jh-menu--footer .jh-menu__list { display: flex; flex-wrap: wrap; justify-content: center; }
.jh-menu--footer li::before { content: "·"; margin: 0 8px; color: var(--wp--preset--color--soft); }
.jh-footer .jh-menu--social { margin-top: 12px; display: flex; justify-content: center; }
.jh-footer .jh-social-icon { width: 16px; height: 16px; }

/* ---------- Block styles (chosen in each block's Styles panel) ---------- */
/* Headland divider: mini headland between two short hairlines */
.wp-block-separator.is-style-headland {
	border: 0 !important; height: 24px; width: 100% !important; max-width: none !important; opacity: 1;
	background: var(--jh-headland-mini) center / 96px auto no-repeat !important;
	display: flex; align-items: center; justify-content: center; gap: 128px; margin: 60px auto 28px;
}
.wp-block-separator.is-style-headland::before,
.wp-block-separator.is-style-headland::after { content: ""; height: 1px; width: 80px; background: var(--wp--preset--color--line); }
.is-style-subline { font-style: italic; color: var(--wp--preset--color--soft); text-align: center; }
h2 + .is-style-subline { margin-top: 6px; margin-bottom: 34px; }
.is-style-label { font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--wp--preset--color--soft); }
.is-style-fine { font-size: 13px; color: var(--wp--preset--color--soft); }
.wp-block-group.is-style-band { background: var(--wp--preset--color--paper-2); }
.wp-block-button.is-style-gold-pill .wp-block-button__link {
	background: none; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--gold);
	border-radius: 999px; padding: 6px 16px; letter-spacing: 1px; text-transform: none; font-size: 14px;
}
.wp-block-button.is-style-gold-pill .wp-block-button__link::before { content: "★ "; color: var(--wp--preset--color--gold); }
.wp-block-button.is-style-gold-pill .wp-block-button__link:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.wp-block-image.is-style-lift img { box-shadow: 0 10px 24px rgba(47,58,61,.18); transition: transform .3s, box-shadow .3s; }
.wp-block-image.is-style-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(47,58,61,.25); }

/* Outline button (WordPress's built-in "Outline" style) in house colours */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: none; color: var(--wp--preset--color--teal); border: 1px solid var(--wp--preset--color--teal);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--teal); color: #fff; }

/* Section headings are centred by default (A11) */
.jh-main h2.wp-block-heading { text-align: center; }

/* Form fields (used by plugins later) */
input[type=text], input[type=email], input[type=search], textarea, select {
	font: inherit; padding: 10px 14px; border: 1px solid var(--wp--preset--color--line); background: #fff; color: var(--wp--preset--color--ink);
}

/* ---------- Phone header (0.2.0) ---------- */
@media (max-width: 600px) {
	.jh-masthead { padding-top: 10px; }
	.jh-masthead .wp-block-site-logo img { width: 280px !important; }
	.jh-masthead .jh-headland, .jh-masthead .jh-headland img { max-width: 230px !important; }
	.jh-masthead .wp-block-site-tagline { font-size: 15px; line-height: 1.4; padding: 0 12px; }
	.jh-navbar { margin-top: 12px; }
}

/* ---------- Articles (0.3.0) ---------- */
.jh-notes .jh-notes__list { list-style: none; padding: 0; margin: 0 auto; max-width: 860px; }
.jh-note { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: center; padding: 26px 0; border-top: 1px solid var(--wp--preset--color--line); }
.jh-notes__list > li:last-child .jh-note { border-bottom: 1px solid var(--wp--preset--color--line); }
.jh-note > *, .jh-note__body > *, .jh-latest > * { margin-block-start: 0 !important; }
.jh-note__img { margin: 0 !important; overflow: hidden; }
.jh-note__img img { transition: transform .3s; }
.jh-note:hover .jh-note__img img { transform: scale(1.03); }
.jh-note__meta { gap: 0 !important; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--soft); }
.jh-note__meta > * { margin: 0 !important; }
.jh-note__meta > * + *::before { content: "·"; margin: 0 8px; }
.jh-note__meta a { color: inherit; }
.jh-note .wp-block-post-title, .jh-latest .wp-block-post-title { font-size: 22px; line-height: 1.3; margin: 6px 0 8px; }
.jh-note .wp-block-post-title a, .jh-latest .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.jh-note .wp-block-post-excerpt, .jh-latest .wp-block-post-excerpt { font-size: 16px; margin: 0; }
.jh-note .wp-block-post-excerpt__excerpt, .jh-latest .wp-block-post-excerpt__excerpt { margin: 0; }
.jh-note__tags { margin-top: 8px !important; font-size: 13px; }
.jh-note__tags a { margin-right: 8px; }
.jh-note__tags a::before { content: "#"; }
.jh-note__tags .wp-block-post-terms__separator { display: none; }
/* Home: latest notes, one centred column */
.jh-notes-latest { max-width: 680px; margin: 10px auto 0; }
.jh-notes-latest .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.jh-latest { text-align: center; padding: 26px 0; border-top: 1px solid var(--wp--preset--color--line); }
.jh-notes-latest li:last-child .jh-latest { border-bottom: 1px solid var(--wp--preset--color--line); }
.jh-latest .wp-block-post-excerpt__more-text { margin: 6px 0 0; }
/* Single article */
.jh-crumb { gap: 6px !important; font-size: 14px; color: var(--wp--preset--color--soft); margin-bottom: 14px; }
.jh-crumb > * { margin: 0 !important; }
.jh-article .wp-block-post-title { font-size: var(--wp--preset--font-size--article-title); line-height: 1.15; margin-top: 0; }
.jh-article__meta { margin: 8px 0 24px; }
.jh-article__img { margin-bottom: 28px; }
.jh-endsign { margin-top: 30px; text-align: center; }
.jh-endsign h3 { font-size: 26px; margin: 0 0 6px; }
@media (max-width: 700px) {
	.jh-note { grid-template-columns: 1fr; gap: 12px; }
}
/* Headings inside an article read as part of the text, not as section titles */
.jh-article .wp-block-post-content h2.wp-block-heading { text-align: left; font-size: 28px; margin-top: 2em; }
.jh-article .wp-block-post-content h3.wp-block-heading { text-align: left; font-size: 22px; margin-top: 1.6em; }
/* Home: latest notes with image left (0.3.1) */
.jh-notes--home .jh-notes__list { max-width: 860px; }
.jh-note .wp-block-post-excerpt__more-text { margin: 8px 0 0; }

/* ---------- Sign-up band (0.4.0) ---------- */
.jh-signup { margin-top: 80px; }
.jh-signup h2 { margin-bottom: 0; }
.jh-signup .is-style-subline { margin: 8px 0 0; }
.jh-endsign .ss-fields { margin-top: 14px; }
/* Footer menu on phones: one link per line, no stray dots */
@media (max-width: 600px) {
	.jh-footer__row { flex-direction: column; gap: 4px; }
	.jh-menu--footer .jh-menu__list { flex-direction: column; gap: 4px; }
	.jh-menu--footer li::before { display: none; }
}

/* ---------- Instagram page (0.5.0) — adapted from TKIlmar ----------
   Inside a Group with the class  ig-feed. #sb_instagram / #sbi_images /
   .sbi_* are Smash Balloon's markup; if an update renames them the feed
   falls back to Smash Balloon's own look. Captions come from each image's
   alt text (assets/js/site.js §2). Check after Smash Balloon updates. */
.ig-feed #sb_instagram { padding: 0 !important; margin-top: 10px; width: 100% !important; max-width: none !important; }
.ig-feed #sb_instagram #sbi_images { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; padding: 0 !important; width: 100% !important; float: none !important; }
@media (max-width: 980px) { .ig-feed #sb_instagram #sbi_images { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 560px) { .ig-feed #sb_instagram #sbi_images { grid-template-columns: repeat(2, 1fr) !important; } }
.ig-feed #sb_instagram .sbi_item { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.ig-feed #sb_instagram .sbi_photo_wrap { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper-2); }
.ig-feed #sb_instagram .sbi_photo { display: block; width: 100%; height: 100% !important; background-size: cover; background-position: center; transition: transform .5s ease, filter .4s; }
.ig-feed #sb_instagram .sbi_photo img { width: 100%; height: 100% !important; object-fit: cover; }
.ig-feed #sb_instagram .sbi_photo_wrap:hover .sbi_photo { transform: scale(1.04); filter: brightness(.72); }
.ig-feed .ig-cap { position: absolute; inset: auto 0 0 0; padding: 14px; color: #fff; font-size: 15px; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(8px); transition: all .4s; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; background: linear-gradient(180deg, transparent, rgba(20,40,48,.7)); }
.ig-feed .sbi_photo_wrap:hover .ig-cap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ig-feed #sb_instagram .sbi_photo, .ig-feed .ig-cap { transition: none; } }

/* ---------- Patreon tier cards: Columns › Column with class jh-tier ---------- */
.jh-tier { background: #fff; border: 1px solid var(--wp--preset--color--line); padding: 30px !important; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.jh-tier > * { margin: 0 !important; }
.jh-tier h3 { font-size: 24px; }
.jh-tier .jh-price { font-family: var(--wp--preset--font-family--josefin); font-size: 30px; color: var(--wp--preset--color--teal); }
.jh-tier .wp-block-buttons { margin-top: auto !important; justify-content: center; }
.jh-benefits { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.jh-benefits li { margin-bottom: 8px; }

/* Accessibility (0.6.0): page headings set as level 1 keep the section look */
.jh-main h1.wp-block-heading.has-section-font-size, .jh-main .wp-block-query-title { font-size: var(--wp--preset--font-size--section); text-align: center; }
.jh-note h2.wp-block-post-title { font-size: 22px; }
.jh-tier h2 { font-size: 24px; }
.jh-main .wp-block-post-content > h2.wp-block-heading:not(.has-text-align-center) { font-size: 26px; text-align: left; }