/* ==========================================================
   John Sammut v2 — main.css
   Supplemental styles on top of Tailwind CDN.
   Design tokens are set in header.php tailwind.config.
   ========================================================== */

/* ── Fonts (ensure loaded) ─────────────────────────────── */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Links global ──────────────────────────────────────── */
a {
    color: inherit;
    text-decoration: none;
}

/* ── WP nav menu — desktop ─────────────────────────────── */
/* wp_nav_menu outputs: ul.menu > li.menu-item > a            */
/* We control ul via items_wrap; style li and a here.         */

#js2-header nav ul,
#js2-header nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#js2-header nav a {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;   /* 13px */
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #757575;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    padding: 0.25rem 0;
}

#js2-header nav a:hover {
    color: #1D1D1D;
}

#js2-header nav .current-menu-item > a,
#js2-header nav .current-page-ancestor > a,
#js2-header nav .current-menu-parent > a {
    color: #1D1D1D;
}

/* ── Mobile nav ────────────────────────────────────────── */
#js2-mobile-nav ul,
#js2-mobile-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#js2-mobile-nav a {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 300;
    color: #1D1D1D;
    text-decoration: none;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.2s;
}

#js2-mobile-nav a:hover { color: #757575; }

/* ── WP custom logo ────────────────────────────────────── */
.custom-logo-link img {
    height: 36px;
    width: auto;
}

/* ── Prose content (page.php / single.php) ─────────────── */
.js2-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: #1D1D1D;
    max-width: 720px;
}

.js2-prose h1,
.js2-prose h2,
.js2-prose h3,
.js2-prose h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    margin-top: 2em;
    margin-bottom: 0.5em;
    line-height: 1.25;
}

.js2-prose h1 { font-size: 2.25rem; }
.js2-prose h2 { font-size: 1.75rem; }
.js2-prose h3 { font-size: 1.35rem; }

.js2-prose p { margin-bottom: 1.25em; font-weight: 300; color: #555; }

.js2-prose ul,
.js2-prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
    color: #555;
    font-weight: 300;
}

.js2-prose li { margin-bottom: 0.4em; }

.js2-prose blockquote {
    border-left: 2px solid #E8E8E8;
    padding-left: 1.5rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    color: #757575;
    margin: 2em 0;
}

.js2-prose img {
    max-width: 100%;
    height: auto;
    display: block;
}

.js2-prose a {
    border-bottom: 1px solid #d0d0d0;
    transition: border-color 0.2s;
}

.js2-prose a:hover { border-color: #1D1D1D; }

/* ── Subscription tab panels ───────────────────────────── */
.js2-tab-panel { transition: opacity 0.2s; }
.js2-tab-panel.hidden { display: none; }

.js2-tab-btn.active {
    background: white;
    color: #1A202C;
}

/* ── Newsletter message ────────────────────────────────── */
.js2-nl-msg { margin-top: 0.5rem; }
.js2-nl-msg.success { color: #4a7c59; }
.js2-nl-msg.error   { color: #9b1c1c; }

/* ── Contact form message ──────────────────────────────── */
.js2-form-msg.success { color: #4a7c59; }
.js2-form-msg.error   { color: #9b1c1c; }

/* ── Hairline dividers ─────────────────────────────────── */
.js2-hr {
    border: none;
    border-top: 1px solid #E8E8E8;
    margin: 0;
}

/* ── Focus visible ring ─────────────────────────────────── */
:focus-visible {
    outline: 2px solid #8FA0B8;
    outline-offset: 2px;
}

/* ── Skip link ─────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
}

/* ── WP alignment blocks ───────────────────────────────── */
.alignwide  { max-width: 1000px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100%; }
.alignleft  { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }

/* ── Responsive tweaks not covered by Tailwind CDN ────── */
@media (max-width: 640px) {
    .js2-newsletter-form { flex-direction: column; }
    .js2-newsletter-form input,
    .js2-newsletter-form button { width: 100%; }
}