/*
Theme Name: The Ebook Edit
Theme URI: https://theebookedit.com/
Author: The Ebook Edit
Author URI: https://theebookedit.com/
Description: Custom classic theme for The Ebook Edit — an ebook writing, editing, formatting, and publishing-support brand. Ported from the original static site with the same layout, brand palette, responsive behaviour, and accessibility features.
Version: 1.0.0
Requires at least: 6.3
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: the-ebook-edit
Tags: business, portfolio, one-column, two-columns, custom-menu, accessibility-ready
*/

:root {
  --blue-700: #04329c;
  --blue-600: #044dd5;
  --blue-100: #d7e5f9;
  --cyan-500: #0ac2e5;
  --gold-500: #fbc341;
  --gold-100: #fcefd8;
  --coral-500: #e46741;
  --ink: #12213d;
  --muted: #5d6a7d;
  --paper: #fffdf8;
  --white: #ffffff;
  --line: #dfe6f0;
  --shadow: 0 22px 55px rgba(4, 50, 156, 0.12);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --container: 1180px;
}

* { box-sizing: border-box; }
/* scroll-padding-top clears the sticky header when an in-page anchor is opened,
   for example /publishing#formatting. */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 3px; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-blue { background: linear-gradient(135deg, var(--blue-700), var(--blue-600)); color: white; }
.section-soft { background: linear-gradient(180deg, #ffffff, #f4f8ff); }
.section-gold { background: linear-gradient(135deg, var(--gold-100), #fff8e9); }
.eyebrow {
  margin: 0 0 14px;
  color: var(--blue-700);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-blue .eyebrow { color: var(--gold-500); }
h1, h2, h3, h4 {
  margin: 0 0 .55em;
  color: var(--blue-700);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 7vw, 5.5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.section-blue h2, .section-blue h3 { color: white; }
p { margin: 0 0 1.15em; }
.lead { max-width: 760px; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.28rem); }
.section-blue .lead { color: rgba(255,255,255,.82); }
.section-blue .card { color: var(--ink); }
.section-blue .card h3 { color: var(--blue-700); }
.kicker { color: var(--blue-600); font-weight: 800; }
.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }

.skip-link { position: fixed; left: 12px; top: -80px; z-index: 9999; padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(4,50,156,.08);
  background: rgba(255,253,248,.94);
  backdrop-filter: blur(16px);
}
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 250px; max-height: 58px; object-fit: contain; object-position: left center; }
.nav-toggle { display: none; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--blue-700); padding: 10px 12px; font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: 23px; }
.site-nav a { color: var(--ink); font-size: .94rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--blue-600); }
.site-nav .nav-cta { padding: 11px 18px; border-radius: 999px; background: var(--gold-500); color: var(--blue-700); box-shadow: 0 8px 24px rgba(251,195,65,.28); }

.hero { position: relative; overflow: hidden; padding: 88px 0 78px; background: radial-gradient(circle at 90% 12%, rgba(10,194,229,.18), transparent 30%), radial-gradient(circle at 15% 92%, rgba(251,195,65,.22), transparent 34%), linear-gradient(180deg, #fff, var(--paper)); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 56px; }
.hero h1 span { color: var(--coral-500); }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 22px; border: 2px solid transparent; border-radius: 999px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue-600); color: white; box-shadow: 0 12px 30px rgba(4,77,213,.22); }
.button-primary:hover { background: var(--blue-700); color: white; }
.button-gold { background: var(--gold-500); color: var(--blue-700); box-shadow: 0 12px 30px rgba(251,195,65,.25); }
.button-gold:hover { background: #ffd05e; color: var(--blue-700); }
.button-outline { border-color: var(--blue-600); color: var(--blue-600); background: transparent; }
.button-outline:hover { background: var(--blue-600); color: white; }
.button-light { background: white; color: var(--blue-700); }
.hero-card { position: relative; padding: 34px; border: 1px solid rgba(4,77,213,.12); border-radius: var(--radius-lg); background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.hero .hero-card::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 120px; height: 120px; border-radius: 28px; background: linear-gradient(135deg, var(--gold-500), var(--coral-500)); z-index: -1; transform: rotate(8deg); }
.hero-logo { width: min(100%, 570px); margin: 0 auto 25px; }
.mini-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mini-list li { display: flex; align-items: flex-start; gap: 12px; }
/* Services assessment column: the checklist and its button are siblings, so the
   button needs its own top margin to sit clear of the last checklist item. */
.assessment-panel .button { margin-top: 28px; }
.tick { flex: 0 0 26px; width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--gold-500); color: var(--blue-700); font-size: .82rem; font-weight: 900; }

.trust-strip { border-block: 1px solid var(--line); background: white; }
.trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 24px 0; }
.trust-item { color: var(--blue-700); font-size: .9rem; font-weight: 800; text-align: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.cards { margin-top: 40px; }
.card { height: 100%; min-width: 0; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: 0 10px 35px rgba(18,33,61,.06); }
.card-accent { border-top: 5px solid var(--gold-500); }
.card p:last-child { margin-bottom: 0; }
.icon-tile { width: 54px; height: 54px; margin-bottom: 20px; display: grid; place-items: center; border-radius: 16px; background: var(--blue-100); color: var(--blue-700); font-size: 1.4rem; font-weight: 900; }
.card:nth-child(2n) .icon-tile, .service-card-link:nth-child(2n) .icon-tile { background: var(--gold-100); }
.card:nth-child(3n) .icon-tile, .service-card-link:nth-child(3n) .icon-tile { background: rgba(10,194,229,.14); }
.card-link { display: inline-flex; margin-top: 12px; font-weight: 800; }

/* Whole-card links: the anchor wraps the card, so the card itself holds no
   interactive elements and the CTA below is plain text. */
.service-card-link { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.service-card { display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.service-card > .card-cta { margin-top: auto; padding-top: 1.5rem; }
.card-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-600); font-weight: 800; }
.service-card-link:hover .service-card,
.service-card-link:focus-visible .service-card { transform: translateY(-4px); border-color: rgba(4,77,213,.38); box-shadow: 0 20px 45px rgba(4,50,156,.16); }
.service-card-link:hover .card-cta, .service-card-link:focus-visible .card-cta { color: var(--blue-700); }
.service-card-link:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 4px; }
.service-card h2, .service-card h3 { text-wrap: pretty; }

/* Publishing platforms. Tiles keep their size when an approved logo image
   replaces the text label, so the grid does not shift. */
.platform-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 38px 0 0; padding: 0; list-style: none; }
.platform-tile { display: grid; place-items: center; min-height: 104px; padding: 18px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; box-shadow: 0 8px 24px rgba(18,33,61,.05); text-align: center; }
.platform-name { color: var(--blue-700); font-size: .88rem; font-weight: 800; line-height: 1.35; text-wrap: balance; }
.platform-logo { max-height: 44px; width: auto; margin-inline: auto; object-fit: contain; }
.platform-note { max-width: 760px; margin: 22px 0 0; color: var(--muted); font-size: .88rem; }
.article-card-title { font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.3; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.feature-panel { padding: 38px; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--blue-700), #06276e); color: white; box-shadow: var(--shadow); }
.feature-panel h3 { color: white; }
.feature-panel .mini-list li { color: rgba(255,255,255,.88); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
.stat { padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.08); }
.stat strong { display: block; color: var(--gold-500); font-family: Georgia, serif; font-size: 1.65rem; }

.steps { counter-reset: step; display: grid; gap: 18px; margin-top: 38px; }
.step { counter-increment: step; display: grid; grid-template-columns: 66px 1fr; gap: 20px; align-items: start; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.step::before { content: counter(step, decimal-leading-zero); width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--blue-600); color: white; font-weight: 900; }
/* Every stage uses the same heading size, rhythm and Output line spacing. */
.step h3 { margin-top: 3px; margin-bottom: 10px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.22; }
.step p { max-width: 74ch; margin-bottom: .7em; }
.step p:last-child { margin-bottom: 0; }

.package { position: relative; overflow: hidden; }
.package.featured { border: 2px solid var(--blue-600); box-shadow: var(--shadow); }
.package-label { position: absolute; top: 18px; right: -35px; width: 150px; padding: 7px; transform: rotate(35deg); background: var(--gold-500); color: var(--blue-700); font-size: .72rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.package ul { padding-left: 20px; }
.package li { margin-bottom: 8px; }
.price-note { color: var(--coral-500); font-weight: 900; }

.quote-block { padding: 40px; border-left: 7px solid var(--gold-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: white; box-shadow: 0 12px 35px rgba(18,33,61,.07); }
.quote-block p { color: var(--blue-700); font-family: Georgia, serif; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.35; }
.quote-block small { color: var(--muted); }

.page-hero { padding: 76px 0 62px; background: radial-gradient(circle at 85% 10%, rgba(10,194,229,.18), transparent 30%), linear-gradient(180deg, white, #f5f9ff); }
.page-hero h1 { max-width: 940px; font-size: clamp(2.55rem, 6vw, 4.6rem); }
/* Every page hero opens with the eyebrow, so the first child never adds its own
   top margin. This keeps Services, Process, Portfolio, About, Insights and the
   article pages on exactly the same vertical rhythm. */
.page-hero > .container > :first-child { margin-top: 0; }
.page-hero .lead { margin-bottom: 0; }

.service-list { display: grid; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; }
.service-list li { position: relative; padding-left: 34px; }
.service-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--coral-500); font-weight: 900; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.pill { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--blue-700); font-size: .88rem; font-weight: 800; }

.portfolio-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.portfolio-art { flex: 0 0 auto; height: 190px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-700), var(--blue-600) 52%, var(--cyan-500)); color: white; font-family: Georgia, serif; font-size: 2rem; text-align: center; padding: 24px; }
.portfolio-card:nth-child(2) .portfolio-art { background: linear-gradient(135deg, var(--gold-500), var(--coral-500)); color: var(--blue-700); }
.portfolio-card:nth-child(3) .portfolio-art { background: linear-gradient(135deg, #06276e, var(--cyan-500)); }
.portfolio-body { flex: 1 1 auto; padding: 28px; }
.portfolio-body h3 { font-size: 1.4rem; }
.portfolio-body .service-list { gap: 10px; margin-top: 0; }
.portfolio-subhead { margin: 22px 0 10px; color: var(--blue-700); font-family: inherit; font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.portfolio-deliverables { margin-bottom: 0; color: var(--muted); }
.notice { padding: 18px 20px; border: 1px solid #f4d794; border-radius: 14px; background: #fff8e7; color: #6b4d09; }

.article-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.prose { max-width: 780px; }
.prose h2 { margin-top: 1.35em; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .55em; }
.prose blockquote { margin: 32px 0; padding: 24px 28px; border-left: 5px solid var(--gold-500); background: white; color: var(--blue-700); font-family: Georgia, serif; font-size: 1.25rem; }
.sidebar { position: sticky; top: 110px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.sidebar ul { margin: 0; padding-left: 20px; }
.sidebar li { margin-bottom: 8px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 18px 0 0; color: var(--muted); font-size: .92rem; }

.faqs { display: grid; gap: 14px; margin-top: 32px; }
details { border: 1px solid var(--line); border-radius: 16px; background: white; }
summary { padding: 20px 54px 20px 22px; color: var(--blue-700); font-weight: 900; cursor: pointer; position: relative; }
summary::after { content: "+"; position: absolute; right: 22px; top: 15px; font-size: 1.6rem; color: var(--coral-500); }
details[open] summary::after { content: "−"; }
details p { padding: 0 22px 22px; color: var(--muted); }

.form-shell { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
label { color: var(--blue-700); font-weight: 800; }
input, select, textarea { width: 100%; padding: 13px 14px; border: 1px solid #bdc8d8; border-radius: 11px; background: white; color: var(--ink); }
textarea { min-height: 150px; resize: vertical; }
.form-note { color: var(--muted); font-size: .88rem; }
.hidden { display: none !important; }

.cta-band { position: relative; overflow: hidden; padding: 52px; border-radius: var(--radius-lg); background: linear-gradient(125deg, var(--blue-700), var(--blue-600)); color: white; box-shadow: var(--shadow); }
.cta-band h2 { color: white; }
.cta-band p { max-width: 720px; color: rgba(255,255,255,.82); }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 45px solid rgba(251,195,65,.22); }

.site-footer { margin-top: 70px; padding: 64px 0 24px; background: #061b4d; color: rgba(255,255,255,.8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 36px; }
.footer-logo { display: inline-block; border-radius: 10px; }
.footer-brand img { width: 260px; padding: 8px; border-radius: 10px; background: white; }
.footer-title { margin-bottom: 14px; color: var(--gold-500); font-family: inherit; font-size: .9rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: grid; gap: 9px; }
.footer-links a { color: rgba(255,255,255,.82); text-decoration: none; }
.footer-links a:hover { color: white; }
.footer-contact { margin-top: 14px; font-size: .92rem; }
/* Footer social links. Rendered by the WordPress theme only when a Social Links
   menu is assigned, so nothing here can produce an empty heading or gap. */
.footer-title-social { margin-top: 26px; }
.social-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social-list a { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: rgba(255,255,255,.86); font-size: .86rem; font-weight: 700; text-decoration: none; }
.social-list a:hover { border-color: var(--gold-500); color: white; }
.footer-contact a { color: rgba(255,255,255,.92); }
.footer-contact a:hover { color: white; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.58); font-size: .86rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; left: 20px; right: 20px; top: 75px; display: none; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); align-items: stretch; flex-direction: column; gap: 4px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 10px 12px; }
  .site-nav .nav-cta { text-align: center; margin-top: 6px; }
  .hero-grid, .split, .article-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 62px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .sidebar { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  body { font-size: 16px; }
  .container { width: min(calc(100% - 28px), var(--container)); }
  .section { padding: 64px 0; }
  .brand img { width: 205px; }
  .nav-wrap { min-height: 72px; }
  .grid-2, .grid-3, .grid-4, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-tile { min-height: 92px; padding: 16px 12px; }
  .service-card > .card-cta { padding-top: 1.1rem; }
  .hero-card, .form-shell, .cta-band { padding: 26px; }
  .step { grid-template-columns: 52px 1fr; padding: 20px; gap: 14px; }
  .step::before { width: 48px; height: 48px; border-radius: 14px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 380px) {
  .platform-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .button:hover { transform: none; }
  .service-card-link:hover .service-card,
  .service-card-link:focus-visible .service-card { transform: none; }
}

/* WordPress admin toolbar: keep the sticky header clear of it. The toolbar is
   fixed and 32px tall on desktop, 46px below 782px, and becomes absolute (so it
   scrolls away with the page) below 600px. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}

/* Contact Form 7 field markup mapped onto the existing form styles. */
.wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="submit"] { width: auto; }
.wpcf7-not-valid-tip { color: var(--coral-500); font-size: .88rem; font-weight: 700; }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: var(--coral-500); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--blue-600); }
.wpcf7-spinner { margin-left: 12px; }