/* =====================================================================
   PDF Editor — stylesheet
   A single, dependency-free CSS file (no build step) covering the
   marketing pages and the full editor UI, desktop through mobile.
   ===================================================================== */

/* ---------- Design tokens ------------------------------------------- */
:root {
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-primary-light: #eef2ff;
  --color-accent: #06b6d4;
  --color-danger: #dc2626;
  --color-danger-dark: #b91c1c;
  --color-success: #16a34a;

  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;
  --white: #ffffff;

  --border-color: #e2e8f0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

  --header-h: 64px;
  --toolbar-h: 52px;
  --tools-h: 56px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}

/* ---------- Fonts ------------------------------------------------------
   Self-hosted so the editor's on-screen preview of Arabic text matches the
   font embedded into the exported PDF (see assets/js/arabic.js /
   editor.js). Only the Arabic subset is included, so this stays small and
   never affects Latin text elsewhere on the site. ------------------------ */
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('/assets/fonts/NotoNaskhArabic-Regular.woff2') format('woff2'),
       url('/assets/fonts/NotoNaskhArabic-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('/assets/fonts/NotoNaskhArabic-Bold.woff2') format('woff2'),
       url('/assets/fonts/NotoNaskhArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; color: var(--ink-900); }
p { margin: 0 0 1em; color: var(--ink-700); }
ul, ol { margin: 0; padding: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: #fff;
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.is-hidden { display: none !important; }

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 11px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-outline { background: #fff; border-color: var(--ink-300); color: var(--ink-900); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink-700); border-color: var(--border-color); }
.btn-ghost:hover { background: var(--ink-100); text-decoration: none; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-dark); }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon-btn {
  background: transparent; border: none; cursor: pointer; color: var(--ink-500);
  width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-900); }

/* ---------- Header / nav ------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-color); height: var(--header-h);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink-900); }
.brand:hover { text-decoration: none; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.primary-nav { display: flex; align-items: center; gap: 28px; }
.primary-nav a { color: var(--ink-700); font-weight: 500; font-size: 15px; }
.primary-nav a:hover { color: var(--color-primary); text-decoration: none; }
.nav-cta { margin-left: 4px; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; }

/* ---------- Hero ------------------------------------------------------ */
.hero { padding: 72px 24px 88px; background: linear-gradient(180deg, var(--color-primary-light), #fff 65%); }
.hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-title { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.02em; }
.hero-subtitle { font-size: 18px; color: var(--ink-700); max-width: 560px; margin: 0 auto 36px; }

.dropzone {
  background: #fff; border: 2px dashed var(--ink-300); border-radius: var(--radius-lg);
  padding: 48px 24px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
  box-shadow: var(--shadow-sm);
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--color-primary); background: var(--color-primary-light); }
.dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-light); }
.dropzone-icon { margin: 0 auto 12px; color: var(--color-primary); }
.dropzone-title { font-size: 18px; font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
.dropzone-or { color: var(--ink-500); margin: 8px 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.dropzone-hint { margin: 14px 0 0; font-size: 13px; color: var(--ink-500); }

.privacy-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; font-size: 13px; color: var(--ink-500);
}
.privacy-note svg { flex: none; color: var(--color-accent); }

.upload-progress { max-width: 420px; margin: 20px auto 0; }
.upload-progress-bar { background: var(--ink-100); border-radius: 999px; height: 8px; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--color-primary); transition: width .2s ease; }
.upload-progress span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-500); }
.upload-error { max-width: 480px; margin: 16px auto 0; color: var(--color-danger); background: #fef2f2; border: 1px solid #fecaca; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }

/* ---------- Editor shell ------------------------------------------- */
.editor { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); min-height: 560px; }
.editor:fullscreen { height: 100vh; }

.editor-toolbar {
  height: var(--toolbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; border-bottom: 1px solid var(--border-color); background: #fff; gap: 12px; flex: none;
  overflow-x: auto;
}
.toolbar-group { display: flex; align-items: center; gap: 6px; flex: none; }
.toolbar-divider { width: 1px; height: 24px; background: var(--border-color); margin: 0 4px; }
.tbtn {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent;
  color: var(--ink-700); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.tbtn:hover:not([disabled]) { background: var(--ink-100); }
.tbtn[disabled] { opacity: .35; cursor: not-allowed; }
.tbtn-label { white-space: nowrap; }
.zoom-level { font-size: 13px; color: var(--ink-700); width: 46px; text-align: center; }

.editing-toolbar {
  flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 14px; overflow-x: auto;
  border-bottom: 1px solid var(--border-color); background: var(--ink-50);
}
.ttool {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 6px 8px; color: var(--ink-700); font-size: 11px; cursor: pointer; flex: none;
}
.ttool svg { color: inherit; }
.ttool:hover { background: #fff; border-color: var(--border-color); }
.ttool.is-active { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
.ttool-mobile-pages { display: none; margin-inline-start: auto; }

/* ---------- Editor body / layout ------------------------------------ */
.editor-body { flex: 1; display: flex; min-height: 0; position: relative; }

.page-sidebar {
  width: 208px; flex: none; border-right: 1px solid var(--border-color); background: #fff;
  display: flex; flex-direction: column; padding: 12px; overflow: hidden;
}
.page-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.page-sidebar-head h2 { font-size: 14px; margin: 0; }
#btn-close-pages { display: none; }
.page-thumb-list { list-style: none; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 2px; margin-bottom: 10px; }
.page-thumb {
  border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 6px; cursor: grab; background: #fff;
  position: relative; transition: border-color .15s ease;
}
.page-thumb.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.page-thumb.is-dragging { opacity: .4; }
.page-thumb.is-drop-target { border-color: var(--color-accent); }
.page-thumb img { width: 100%; border-radius: 4px; border: 1px solid var(--border-color); background: #fff; pointer-events: none; }
.page-thumb-num { font-size: 11px; color: var(--ink-500); text-align: center; margin-top: 4px; }
.page-thumb-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; opacity: 0; transition: opacity .1s; }
.page-thumb:hover .page-thumb-actions, .page-thumb:focus-within .page-thumb-actions { opacity: 1; }
.page-thumb-actions button {
  width: 22px; height: 22px; border-radius: 5px; border: none; background: rgba(255,255,255,.95); box-shadow: var(--shadow-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-700);
}
.page-thumb-actions button:hover { background: var(--color-primary); color: #fff; }

.canvas-area { flex: 1; position: relative; min-width: 0; background: var(--ink-100); display: flex; }
.canvas-scroll { flex: 1; overflow: auto; padding: 32px; display: flex; align-items: flex-start; justify-content: center; }
.canvas-stage { position: relative; box-shadow: var(--shadow-lg); background: #fff; flex: none; }
/* Both the background PDF render and Fabric's own canvas elements must be
   absolutely positioned at the stage's top-left so they sit exactly on
   top of one another. Fabric wraps #fabric-canvas in a `.canvas-container`
   div (position: relative) — an ID rule here that pulled #pdf-render-canvas
   out of this behavior previously left it in normal document flow, which
   pushed Fabric's interactive canvas out from underneath the visible page
   (clicks landed on nothing). Do not give any canvas in this stack its own
   `position` override. */
.canvas-stage canvas { display: block; position: absolute; top: 0; left: 0; }
/* Defense in depth: force Fabric's own wrapper div (which it inserts
   around #fabric-canvas, with an inline "position: relative" style) to
   sit at the same top-left corner regardless of DOM/flow order. */
.canvas-stage .canvas-container { position: absolute !important; top: 0 !important; left: 0 !important; margin: 0 !important; }
.canvas-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.7); font-size: 14px; color: var(--ink-700);
}
.spinner {
  width: 18px; height: 18px; border: 2.5px solid var(--ink-300); border-top-color: var(--color-primary);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Property panel ------------------------------------------ */
.property-panel {
  width: 260px; flex: none; border-left: 1px solid var(--border-color); background: #fff;
  overflow-y: auto; padding: 14px;
}
.property-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.property-panel-head h2 { font-size: 14px; margin: 0; }
#btn-close-properties { display: none; }
.prop-group { margin-bottom: 16px; }
.prop-group label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.prop-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.prop-row select, .prop-row input[type="number"], .prop-row input[type="text"] {
  border: 1px solid var(--ink-300); border-radius: var(--radius-sm); padding: 7px 8px; font-size: 13px; flex: 1; min-width: 0;
}
.prop-row input[type="color"] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--ink-300); border-radius: 6px; cursor: pointer; }
.prop-row input[type="range"] { flex: 1; }
.seg-group { display: flex; border: 1px solid var(--ink-300); border-radius: var(--radius-sm); overflow: hidden; }
.seg-group button {
  flex: 1; border: none; background: #fff; padding: 7px 0; cursor: pointer; font-size: 13px; border-inline-end: 1px solid var(--ink-300);
  color: var(--ink-700);
}
.seg-group button:last-child { border-inline-end: none; }
.seg-group button.is-active { background: var(--color-primary); color: #fff; }
.prop-note { font-size: 12px; color: var(--ink-500); background: var(--ink-50); border-radius: var(--radius-sm); padding: 8px 10px; }
.prop-danger { color: var(--color-danger); }

/* ---------- Modals ----------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 16px;
}
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; }
.modal-sm { max-width: 400px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border-color); }
.modal-head h2 { font-size: 17px; margin: 0; }
.modal-body { padding: 20px; }
.modal-foot { padding: 16px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#signature-pad { width: 100%; height: 220px; border: 1px dashed var(--ink-300); border-radius: var(--radius-md); touch-action: none; cursor: crosshair; background: #fff; }
.signature-controls { display: flex; gap: 20px; margin-top: 12px; align-items: center; font-size: 13px; color: var(--ink-700); }
.signature-controls label { display: flex; align-items: center; gap: 8px; }

/* ---------- Toasts ------------------------------------------------------ */
.toast-region { position: fixed; bottom: 20px; right: 20px; z-index: 800; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast {
  background: var(--ink-900); color: #fff; padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px;
  box-shadow: var(--shadow-lg); animation: toast-in .15s ease;
}
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- SEO / marketing sections ---------------------------------- */
.seo-section { padding: 72px 24px; }
.seo-section-alt { background: var(--ink-50); }
.seo-inner { max-width: 920px; margin: 0 auto; }
.seo-inner h2 { font-size: 30px; margin-bottom: 18px; letter-spacing: -0.01em; }

.steps-list { list-style: none; display: grid; gap: 24px; margin-top: 24px; }
.steps-list li { display: flex; gap: 16px; align-items: flex-start; }
.step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.steps-list h3 { font-size: 17px; margin-bottom: 2px; }
.steps-list p { margin: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.feature-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 22px; }
.feature-card h3 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { margin: 0; font-size: 14px; }

.faq-list { margin-top: 20px; border-top: 1px solid var(--border-color); }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; text-align: left; padding: 18px 4px; font-size: 16px; font-weight: 600;
  color: var(--ink-900); cursor: pointer;
}
.faq-chevron { transition: transform .15s ease; flex: none; color: var(--ink-500); }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.faq-answer > p { overflow: hidden; margin: 0 0 18px; padding-right: 28px; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer { overflow: hidden; }
.faq-answer > p { min-height: 0; }

/* ---------- Footer -------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--ink-300); padding: 56px 24px 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-col h3 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.footer-col a { display: block; color: var(--ink-300); font-size: 14px; margin-bottom: 8px; }
.footer-col a:hover { color: #fff; }
.footer-brand .brand-name { color: #fff; font-size: 18px; font-weight: 800; }
.footer-brand p { color: var(--ink-500); font-size: 13px; margin-top: 10px; max-width: 280px; }
.footer-bottom {
  max-width: 1200px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-500);
}
.footer-bottom p { margin: 0; }

/* ---------- Static pages (privacy/terms/contact) ---------------------- */
.static-page { padding: 64px 24px 96px; }
.static-inner { max-width: 760px; margin: 0 auto; }
.static-inner-narrow { max-width: 560px; }
.static-updated { color: var(--ink-500); font-size: 13px; margin-bottom: 32px; }
.static-inner h2 { font-size: 20px; margin-top: 32px; }

.alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: 20px; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.form-row input, .form-row textarea {
  border: 1px solid var(--ink-300); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 15px; font-family: inherit;
}
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Editor: Arabic / RTL mode --------------------------------
   Toggled by the "AR/EN" button in the editor toolbar (assets/js/i18n.js),
   scoped to #editor-section (plus the two modals it can open) so the
   marketing site around the editor stays untouched. Most of the editor's
   layout is plain `display:flex` with the default `flex-direction: row`,
   which already mirrors automatically under `dir="rtl"` per the CSS
   Flexbox spec — these rules only correct the handful of *physical*
   left/right properties that don't follow `dir` on their own (borders,
   absolute positioning) and apply the Arabic font. -------------------- */
#editor-section[dir="rtl"],
#signature-modal[dir="rtl"],
#confirm-modal[dir="rtl"] {
  font-family: 'Noto Naskh Arabic', var(--font-sans);
}
#editor-section[dir="rtl"] .page-sidebar { border-right: none; border-left: 1px solid var(--border-color); }
#editor-section[dir="rtl"] .property-panel { border-left: none; border-right: 1px solid var(--border-color); }
#editor-section[dir="rtl"] .page-thumb-actions { right: auto; left: 6px; }
#editor-section[dir="rtl"] .prop-note { text-align: right; }
@media (max-width: 720px) {
  #editor-section[dir="rtl"] .page-sidebar {
    left: auto; right: 0; transform: translateX(100%);
  }
  #editor-section[dir="rtl"] .page-sidebar.is-open { transform: translateX(0); }
}
/* Toasts render outside #editor-section (see includes/footer.php), so
   they mirror via a body class the toggle sets instead of [dir]. */
body.pdfeditor-rtl-toasts .toast-region { right: auto; left: 20px; font-family: 'Noto Naskh Arabic', var(--font-sans); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 960px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .primary-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border-color);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .15s ease, opacity .15s ease;
  }
  .primary-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .primary-nav a { padding: 12px 4px; border-bottom: 1px solid var(--ink-100); }
  .nav-cta { margin: 10px 0 0; text-align: center; }
  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero { padding: 48px 16px 64px; }
  .dropzone { padding: 32px 16px; }
  .seo-section { padding: 48px 16px; }

  /* ----- Mobile editor: rebuild the chrome instead of shrinking it ----- */
  .editor { height: calc(100vh - var(--header-h)); }
  .editor-toolbar { padding: 0 8px; gap: 6px; }
  .toolbar-group-center .tbtn-label, .toolbar-group-start .tbtn-label { display: none; }
  #btn-save { display: none; } /* Save-locally is available via Ctrl/Cmd+S; keep the bar short on phones */

  .editing-toolbar { padding: 6px 8px; gap: 2px; position: sticky; bottom: 0; order: 3; border-top: 1px solid var(--border-color); border-bottom: none; z-index: 5; }
  .ttool { min-width: 52px; }
  .ttool span { display: none; }
  .ttool-mobile-pages { display: flex; }

  .editor-body { flex-wrap: wrap; }
  .canvas-area { order: 1; width: 100%; }
  .canvas-scroll { padding: 12px; }

  .page-sidebar {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; width: 78vw; max-width: 300px; z-index: 60;
    box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform .18s ease;
  }
  .page-sidebar.is-open { transform: translateX(0); }
  #btn-close-pages { display: flex; }

  .property-panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 60vh; z-index: 60;
    border-left: none; border-top: 1px solid var(--border-color); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
  }
  #btn-close-properties { display: flex; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 30px; }
  .hero-subtitle { font-size: 16px; }
}

/* Print: hide chrome, useful if a user prints the page accidentally */
@media print {
  .site-header, .site-footer, .editor-toolbar, .editing-toolbar, .page-sidebar, .property-panel { display: none !important; }
}