/*
Theme Name: JP Abecilla Light
Theme URI: https://www.jpabecillaph.com/
Author: OpenAI for JP Abecilla
Description: A lightweight editorial personal-brand WordPress theme for JP Abecilla — The Millennial Writer.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: jp-abecilla-light
License: GPL-2.0-or-later
*/

:root {
  --jp-navy: #0d2d5a;
  --jp-blue: #1264c7;
  --jp-blue-dark: #0d4f9e;
  --jp-blue-soft: #edf5ff;
  --jp-blue-pale: #f6f9fe;
  --jp-ink: #152238;
  --jp-muted: #607089;
  --jp-line: #dbe5f1;
  --jp-white: #ffffff;
  --jp-max: 1240px;
  --jp-reading: 760px;
  --jp-radius: 10px;
  --jp-shadow: 0 18px 55px rgba(13, 45, 90, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--jp-ink);
  background: var(--jp-white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jp-blue); text-decoration: none; }
a:hover, a:focus { color: var(--jp-blue-dark); }
button, input, textarea, select { font: inherit; }

.jp-wrap { width: min(calc(100% - 40px), var(--jp-max)); margin-inline: auto; }
.jp-section { padding: 64px 0; }
.jp-section--soft { background: var(--jp-blue-pale); }
.jp-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.jp-section-heading h2 { margin:0; color:var(--jp-navy); font-family: Georgia, "Times New Roman", serif; font-size:clamp(1.7rem, 3vw, 2.55rem); line-height:1.05; }
.jp-section-heading p { margin:8px 0 0; color:var(--jp-muted); max-width:650px; }
.jp-eyebrow { margin:0 0 14px; font-size:.75rem; line-height:1.2; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:var(--jp-blue); }
.jp-btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 20px; border:1px solid var(--jp-blue); border-radius:6px; background:var(--jp-blue); color:white; font-weight:750; transition:.2s ease; }
.jp-btn:hover { background:var(--jp-blue-dark); color:white; transform:translateY(-1px); }
.jp-btn--ghost { background:transparent; color:var(--jp-navy); border-color:var(--jp-navy); }
.jp-btn--ghost:hover { color:white; background:var(--jp-navy); }
.jp-text-link { font-weight:750; white-space:nowrap; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-bottom:1px solid rgba(219,229,241,.9); }
.jp-header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-branding { min-width:max-content; }
.custom-logo-link img { max-height:54px; width:auto; }
.site-title { margin:0; font-family:Georgia,"Times New Roman",serif; color:var(--jp-navy); font-size:1.3rem; font-weight:800; letter-spacing:.04em; }
.site-title a { color:inherit; }
.site-description { margin:0; color:var(--jp-muted); font-family:Georgia,"Times New Roman",serif; font-size:.82rem; }
.primary-menu { list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:26px; padding:0; margin:0; }
.primary-menu a { color:var(--jp-ink); font-size:.93rem; font-weight:650; }
.primary-menu .current-menu-item > a, .primary-menu a:hover { color:var(--jp-blue); }
.jp-menu-toggle { display:none; border:1px solid var(--jp-line); background:white; border-radius:6px; padding:8px 11px; font-weight:750; color:var(--jp-navy); }

/* Hero */
.jp-hero { position:relative; overflow:hidden; background:linear-gradient(110deg,#f8fbff 0%,#eaf4ff 56%,#dcecff 100%); }
.jp-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 22%,rgba(255,255,255,.88),transparent 28%); }
.jp-hero-inner { position:relative; z-index:1; min-height:565px; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.jp-hero-copy { padding:66px 0; }
.jp-hero h1 { margin:0; max-width:720px; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.2rem,7vw,6.7rem); line-height:.88; letter-spacing:-.04em; }
.jp-hero h1 span { display:block; margin-top:14px; font-size:clamp(1.8rem,3vw,3.25rem); letter-spacing:-.025em; }
.jp-hero-lede { max-width:650px; margin:26px 0 28px; color:#2f4565; font-size:clamp(1rem,1.4vw,1.18rem); }
.jp-hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.jp-hero-visual { align-self:stretch; position:relative; min-height:520px; display:flex; align-items:end; justify-content:center; }
.jp-hero-photo { max-height:555px; width:auto; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 22px 30px rgba(13,45,90,.12)); }
.jp-hero-placeholder { width:min(86%,470px); aspect-ratio:4/5; border-radius:48% 48% 14px 14px; align-self:end; display:grid; place-items:center; background:linear-gradient(145deg,var(--jp-navy),var(--jp-blue)); color:white; font-family:Georgia,"Times New Roman",serif; font-size:7rem; box-shadow:var(--jp-shadow); }
.jp-signature { position:absolute; right:1%; top:17%; max-width:210px; color:var(--jp-navy); font-family:"Segoe Script","Bradley Hand",cursive; font-size:1.55rem; line-height:1.35; transform:rotate(-5deg); }

/* Credibility */
.jp-proof { border-block:1px solid var(--jp-line); background:#f8fbff; }
.jp-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.jp-proof-item { padding:24px 18px; display:flex; align-items:center; justify-content:center; gap:12px; border-right:1px solid var(--jp-line); color:var(--jp-navy); font-size:.78rem; line-height:1.35; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.jp-proof-item:last-child { border-right:0; }
.jp-proof-icon { font-size:1.65rem; line-height:1; }

/* Cards */
.jp-card { background:white; border:1px solid var(--jp-line); border-radius:var(--jp-radius); overflow:hidden; }
.jp-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.jp-card-body { padding:20px; }
.jp-card .jp-meta { margin:0 0 7px; color:var(--jp-blue); font-size:.73rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.jp-card h3 { margin:0; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.22rem; line-height:1.15; }
.jp-card h3 a { color:inherit; }
.jp-card p { margin:9px 0 0; color:var(--jp-muted); font-size:.92rem; line-height:1.45; }
.jp-fallback-image { width:100%; aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(145deg,#dcecff,#f5f9ff); color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-weight:800; }

/* Editor picks */
.jp-picks-grid { display:grid; grid-template-columns:1.65fr 1fr; gap:22px; }
.jp-feature { min-height:435px; position:relative; overflow:hidden; border-radius:var(--jp-radius); background:var(--jp-navy); }
.jp-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.74; }
.jp-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,21,46,.92),rgba(4,21,46,.05) 70%); }
.jp-feature-content { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:34px; color:white; }
.jp-feature-content .jp-meta { color:#d9eaff; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.jp-feature-content h3 { margin:8px 0 10px; max-width:720px; color:white; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,3vw,3.2rem); line-height:1; }
.jp-feature-content p { margin:0 0 12px; max-width:560px; color:#eef5ff; }
.jp-feature-content a { color:white; font-weight:750; }
.jp-side-list { display:grid; gap:14px; }
.jp-side-story { display:grid; grid-template-columns:130px 1fr; gap:15px; align-items:center; border-bottom:1px solid var(--jp-line); padding-bottom:14px; }
.jp-side-story:last-child { border-bottom:0; }
.jp-side-story img,.jp-side-story .jp-fallback-image { width:130px; aspect-ratio:4/3; object-fit:cover; border-radius:5px; }
.jp-side-story h3 { margin:4px 0; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.15rem; line-height:1.15; }
.jp-side-story p { margin:0; color:var(--jp-muted); font-size:.82rem; line-height:1.4; }

/* Pillars */
.jp-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
.jp-pillar { text-align:center; padding:36px 26px; background:linear-gradient(180deg,#f4f9ff,#e9f3ff); border:1px solid #dce9f8; }
.jp-pillar-icon { font-size:2rem; }
.jp-pillar h3 { margin:10px 0 8px; font-family:Georgia,"Times New Roman",serif; color:var(--jp-navy); font-size:1.55rem; }
.jp-pillar p { margin:0 auto 12px; max-width:340px; color:var(--jp-muted); }

/* grids */
.jp-post-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.jp-marketing-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:26px; }
.jp-marketing-feature { position:relative; min-height:390px; overflow:hidden; border-radius:var(--jp-radius); }
.jp-marketing-feature img,.jp-marketing-feature .jp-fallback-image { width:100%; height:100%; min-height:390px; object-fit:cover; }
.jp-marketing-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,26,56,.85),rgba(6,26,56,0) 70%); }
.jp-marketing-copy { position:absolute; z-index:2; bottom:0; left:0; right:0; padding:30px; color:white; }
.jp-marketing-copy h3 { margin:6px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:2rem; line-height:1.08; }
.jp-marketing-copy a { color:white; }
.jp-mini-list { display:grid; gap:0; }
.jp-mini-story { padding:17px 0; border-bottom:1px solid var(--jp-line); }
.jp-mini-story:first-child { padding-top:0; }
.jp-mini-story h3 { margin:4px 0; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; line-height:1.2; }
.jp-mini-story p { margin:0; color:var(--jp-muted); font-size:.88rem; }

/* About */
.jp-about-panel { display:grid; grid-template-columns:.8fr 1.2fr; min-height:360px; overflow:hidden; border:1px solid var(--jp-line); border-radius:var(--jp-radius); background:linear-gradient(135deg,#eef6ff,#f9fbff); }
.jp-about-image { min-height:360px; background:linear-gradient(145deg,#dcecff,#f6faff); }
.jp-about-image img { width:100%; height:100%; object-fit:cover; }
.jp-about-copy { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.jp-about-copy h2 { margin:0; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.05; }
.jp-about-copy p { color:var(--jp-muted); }

/* Services */
.jp-services { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.jp-service { min-height:165px; padding:24px 18px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px solid var(--jp-line); background:white; }
.jp-service span { font-size:1.8rem; }
.jp-service strong { display:block; margin-top:12px; color:var(--jp-navy); line-height:1.2; }
.jp-cta-band { margin-top:18px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:30px; border-radius:var(--jp-radius); background:var(--jp-navy); color:white; }
.jp-cta-band h3 { margin:0; color:white; font-family:Georgia,"Times New Roman",serif; font-size:2rem; }
.jp-cta-band p { margin:5px 0 0; color:#d7e6f8; }
.jp-cta-band .jp-btn { background:white; color:var(--jp-navy); border-color:white; }

/* Newsletter */
.jp-newsletter { padding:30px 0; border-top:1px solid var(--jp-line); background:#eff6ff; }
.jp-newsletter-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:30px; align-items:center; }
.jp-newsletter h2 { margin:0; font-family:Georgia,"Times New Roman",serif; color:var(--jp-navy); font-size:1.55rem; }
.jp-newsletter p { margin:4px 0 0; color:var(--jp-muted); font-size:.9rem; }
.jp-newsletter-slot .widget { margin:0; }
.jp-newsletter-slot input[type="email"] { width:min(70%,520px); min-height:45px; padding:10px 14px; border:1px solid var(--jp-line); border-radius:5px 0 0 5px; }
.jp-newsletter-slot input[type="submit"],.jp-newsletter-slot button { min-height:45px; padding:10px 18px; border:1px solid var(--jp-navy); background:var(--jp-navy); color:white; }

/* Footer */
.site-footer { background:white; border-top:1px solid var(--jp-line); padding:36px 0; }
.jp-footer-grid { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.jp-footer-brand strong { display:block; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; letter-spacing:.08em; }
.jp-footer-brand span,.jp-footer-meta { color:var(--jp-muted); font-size:.82rem; }
.footer-menu { list-style:none; display:flex; gap:18px; flex-wrap:wrap; padding:0; margin:0; }
.footer-menu a { color:var(--jp-muted); font-size:.85rem; }

/* Single/article */
.jp-article-header { padding:68px 0 34px; text-align:center; }
.jp-article-header .jp-eyebrow { margin-bottom:12px; }
.jp-article-header h1 { max-width:950px; margin:0 auto; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.6rem,5.5vw,5rem); line-height:.98; }
.jp-article-deck { max-width:760px; margin:20px auto 0; color:var(--jp-muted); font-size:1.1rem; }
.jp-article-meta { margin-top:20px; color:var(--jp-muted); font-size:.9rem; }
.jp-article-hero { width:min(calc(100% - 40px),1100px); margin:0 auto 44px; }
.jp-article-hero img { width:100%; max-height:650px; object-fit:cover; border-radius:var(--jp-radius); }
.jp-reading { width:min(calc(100% - 40px),var(--jp-reading)); margin:0 auto; padding-bottom:70px; font-family:Georgia,"Times New Roman",serif; font-size:1.1rem; line-height:1.9; }
.jp-reading h2,.jp-reading h3 { color:var(--jp-navy); line-height:1.2; }
.jp-reading a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.jp-reading blockquote { margin:30px 0; padding:10px 0 10px 24px; border-left:4px solid var(--jp-blue); color:#39506e; font-size:1.25rem; }

/* Archive/page */
.jp-page-header { padding:70px 0 30px; }
.jp-page-header h1 { margin:0; color:var(--jp-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,5vw,4.8rem); line-height:1; }
.jp-page-header p { color:var(--jp-muted); max-width:720px; }
.jp-pagination { margin-top:34px; }

/* accessibility */
.screen-reader-text { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.screen-reader-text:focus { clip:auto !important; width:auto; height:auto; top:8px; left:8px; z-index:99999; padding:12px 16px; background:white; color:var(--jp-navy); }

@media (max-width: 1000px) {
  .jp-header-inner { min-height:70px; }
  .jp-menu-toggle { display:block; }
  .site-navigation { display:none; position:absolute; left:0; right:0; top:70px; padding:18px 20px 24px; background:white; border-bottom:1px solid var(--jp-line); }
  .site-navigation.is-open { display:block; }
  .primary-menu { display:grid; gap:12px; }
  .jp-hero-inner { grid-template-columns:1fr; min-height:auto; }
  .jp-hero-copy { padding:58px 0 12px; }
  .jp-hero-visual { min-height:390px; }
  .jp-signature { top:12%; right:5%; }
  .jp-proof-grid { grid-template-columns:repeat(2,1fr); }
  .jp-proof-item:nth-child(2) { border-right:0; }
  .jp-proof-item:nth-child(-n+2) { border-bottom:1px solid var(--jp-line); }
  .jp-picks-grid,.jp-marketing-grid,.jp-about-panel { grid-template-columns:1fr; }
  .jp-post-grid { grid-template-columns:repeat(2,1fr); }
  .jp-services { grid-template-columns:repeat(2,1fr); }
  .jp-services .jp-service:last-child { grid-column:1/-1; }
  .jp-newsletter-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .jp-wrap { width:min(calc(100% - 28px),var(--jp-max)); }
  .jp-section { padding:46px 0; }
  .jp-section-heading { align-items:start; flex-direction:column; }
  .jp-hero h1 { font-size:3.3rem; }
  .jp-hero h1 span { font-size:1.95rem; }
  .jp-hero-visual { min-height:320px; }
  .jp-hero-photo { max-height:360px; }
  .jp-hero-placeholder { width:80%; font-size:5rem; }
  .jp-signature { display:none; }
  .jp-proof-grid { grid-template-columns:1fr 1fr; }
  .jp-proof-item { padding:18px 8px; font-size:.67rem; }
  .jp-picks-grid { gap:16px; }
  .jp-feature { min-height:390px; }
  .jp-feature-content { padding:24px; }
  .jp-side-story { grid-template-columns:105px 1fr; }
  .jp-side-story img,.jp-side-story .jp-fallback-image { width:105px; }
  .jp-pillars,.jp-post-grid { grid-template-columns:1fr; }
  .jp-about-copy { padding:32px 24px; }
  .jp-services { grid-template-columns:1fr; }
  .jp-services .jp-service:last-child { grid-column:auto; }
  .jp-cta-band { grid-template-columns:1fr; }
  .jp-footer-grid { grid-template-columns:1fr; }
}