/* =========================================================
   Clicks Dynasty — Design System
   Self-hosted, zero external dependencies.
   ========================================================= */

:root{
  --ink:        #10182B;   /* primary dark / nav / footer */
  --ink-soft:   #1B2440;   /* secondary dark surface */
  --parchment:  #FAF7F0;   /* light background */
  --paper:      #F2EEE3;   /* slightly deeper light surface */
  --gold:       #C6971F;   /* accent — used sparingly */
  --gold-soft:  #E7CE8C;   /* accent tint for hovers/borders */
  --crimson:    #7A2331;   /* secondary accent — rare use */
  --slate:      #4B5063;   /* body text on light */
  --slate-dim:  #7B8098;   /* muted text */
  --line:       #DED6C2;   /* hairline dividers on light */
  --line-dark:  rgba(255,255,255,0.14);
  --radius:     2px;
  --max:        1120px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--slate);
  background:var(--parchment);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  margin:0 0 0.5em;
  line-height:1.15;
  font-weight:600;
}
h1{ font-size:clamp(2.2rem,5vw,3.4rem); }
h2{ font-size:clamp(1.7rem,3.2vw,2.3rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; max-width:65ch; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
ul{ padding-left:1.1em; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
section{ padding:88px 0; }
.section-tight{ padding:56px 0; }

.eyebrow{
  color:var(--gold);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  margin-bottom:10px;
  display:block;
}

.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:var(--gold-soft); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--parchment); }
.btn-outline-light{ border-color:rgba(255,255,255,0.5); color:#fff; background:transparent; }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:var(--serif); font-weight:700; font-size:1.3rem;
  color:#fff; letter-spacing:0.02em;
}
.logo span{ color:var(--gold); }
nav.main-nav{ display:flex; align-items:center; gap:30px; }
nav.main-nav a{
  color:#E7E4DA; font-size:0.95rem; position:relative; padding:6px 0;
}
nav.main-nav a:hover{ color:#fff; }
nav.main-nav a.active{ color:var(--gold); }
.nav-cta{ margin-left:8px; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; }

@media (max-width:860px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:8px 24px 24px; gap:16px;
    display:none;
  }
  nav.main-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(198,151,31,0.35) 1px, transparent 0) 0 0/28px 28px,
    var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:110px 0 100px;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ color:#fff; }
.hero p.lead{ color:#C7C9D6; font-size:1.15rem; max-width:48ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-mark{ width:100%; }

.hero-grid > div:first-child{ animation:hero-rise 0.7s ease-out both; }
.hero-grid > div:last-child{ animation:hero-rise 0.7s ease-out 0.12s both; }
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-grid > div{ animation:none; }
}

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line-dark);
  margin-top:64px; padding-top:36px;
}
@media (max-width:860px){ .stat-strip{ grid-template-columns:repeat(2,1fr); gap:28px 0; } }
@media (max-width:480px){ .stat-strip{ grid-template-columns:1fr; gap:24px 0; } .stat-strip .stat{ border-left:none !important; padding-left:0 !important; } }
.stat-strip .stat{ border-left:1px solid var(--line-dark); padding-left:20px; }
.stat-strip .stat:first-child{ border-left:none; padding-left:0; }
.stat b{ display:block; font-family:var(--serif); font-size:2rem; color:var(--gold); }
.stat span{ font-size:0.85rem; color:#B7BACB; }

/* ---------- Light section blocks ---------- */
.block-head{ max-width:640px; margin-bottom:48px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:980px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.tile{ background:var(--parchment); padding:36px 32px; transition:background 0.2s ease; }
.tile:hover{ background:#fff; }
.tile .glyph{ font-size:1.6rem; margin-bottom:14px; }
.tile h3{ margin-bottom:10px; }
.tile ul{ margin:14px 0 0; padding-left:18px; color:var(--slate-dim); font-size:0.93rem; }
.tile ul li{ margin-bottom:4px; }
@media (prefers-reduced-motion: reduce){ .tile{ transition:none; } }

/* ---------- Numbered process (real sequence) ---------- */
.process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
@media (max-width:800px){ .process-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .process-list{ grid-template-columns:1fr; } }
.process-step{ border-top:2px solid var(--gold); padding-top:16px; }
.process-step .num{ font-family:var(--serif); color:var(--gold-soft); font-size:1.6rem; }

/* ---------- Dark band ---------- */
.band-dark{ background:var(--ink); color:#E7E4DA; }
.band-dark h2{ color:#fff; }
.band-dark .line{ border-color:var(--line-dark); }

/* ---------- Testimonial ---------- */
.testimonial{
  border-left:3px solid var(--gold);
  padding:8px 0 8px 28px;
  max-width:640px;
  margin:0 auto;
}
.testimonial blockquote{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin:0 0 16px; font-style:italic; }
.testimonial cite{ font-style:normal; color:var(--slate-dim); font-size:0.9rem; }

/* ---------- CTA ---------- */
.cta-band{
  background:var(--crimson);
  color:#fff;
  text-align:center;
  padding:72px 0;
  border-top:2px solid var(--gold);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#E7C9CE; margin:0 auto 28px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--ink); color:#B7BACB; padding:64px 0 28px; font-size:0.92rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:0.85rem; text-transform:none; letter-spacing:0.03em; margin-bottom:14px; font-family:var(--sans); font-weight:600; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid var(--line-dark); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.85rem; }

/* ---------- Forms ---------- */
.form-card{ background:#fff; border:1px solid var(--line); padding:36px; border-radius:var(--radius); }
label{ display:block; font-size:0.85rem; color:var(--slate-dim); margin:16px 0 6px; }
input,textarea,select{
  width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius); font-family:var(--sans); font-size:0.95rem;
  background:var(--parchment); color:var(--ink);
}
input:focus,textarea:focus,select:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
textarea{ min-height:120px; resize:vertical; }
.form-note{ font-size:0.82rem; color:var(--slate-dim); margin-top:16px; }
.form-msg{ display:none; padding:12px 16px; border-radius:var(--radius); margin-top:16px; font-size:0.9rem; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:#EAF3EA; color:#26502B; border:1px solid #BFDCC0; }
.form-msg.err{ background:#F8E9E9; color:#7A2331; border:1px solid #E7C3C3; }

/* ---------- Utility ---------- */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }

.badge{
  display:inline-block; font-size:0.78rem; color:var(--gold);
  border:1px solid var(--gold-soft); padding:4px 10px; border-radius:20px;
  margin-bottom:14px;
}

.divider{ height:1px; background:var(--line); border:none; margin:0; }

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink);
  padding:10px 16px; z-index:1000;
}
.skip-link:focus{ left:16px; top:16px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* Landscape phones/tablets: reduce vertical padding so hero content
   doesn't force excessive scrolling on short-height screens. */
@media (max-height:480px) and (orientation:landscape){
  .hero{ padding:56px 0 48px; }
  section{ padding:48px 0; }
  .section-tight{ padding:36px 0; }
}


/* =========================================================
   Landing Pages Extension — SEO & Digital Marketing pages
   Reuses existing design tokens; adds the Services mega-menu
   plus components used by the new keyword landing pages.
   ========================================================= */

/* ---------- Services mega-menu ---------- */
.has-mega{
  position:relative; display:inline-flex; align-items:center; gap:2px;
  /* Invisible "bridge" below the link: extends the hoverable box down
     through the visual gap to the panel so moving the mouse straight
     down doesn't exit .has-mega and close the menu. margin-bottom
     cancels the padding's effect on layout/alignment. */
  padding-bottom:16px; margin-bottom:-16px;
}
.mega-toggle{
  display:none; background:none; border:none; color:#E7E4DA; cursor:pointer;
  padding:4px; line-height:0;
}
.mega-toggle::after{
  content:""; display:block; width:7px; height:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.mega-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--ink); border:1px solid var(--line-dark);
  box-shadow:0 20px 44px rgba(0,0,0,.35);
  padding:28px; display:none; gap:28px;
  width:min(760px,92vw); grid-template-columns:repeat(4,1fr); z-index:200;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel,
.has-mega.open .mega-panel{ display:grid; }
.mega-panel h5{
  color:var(--gold); font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 12px; font-weight:700;
}
.mega-panel ul{ list-style:none; margin:0; padding:0; }
.mega-panel li{ margin-bottom:9px; }
.mega-panel a{ color:#E7E4DA; font-size:.87rem; }
.mega-panel a:hover{ color:var(--gold); }

@media (max-width:860px){
  .has-mega{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    padding-bottom:0; margin-bottom:0;
  }
  .mega-toggle{ display:inline-flex; }
  .mega-panel{
    position:static; transform:none; width:auto; box-shadow:none; border:none;
    background:transparent; padding:6px 0 6px 16px; display:none;
    grid-template-columns:1fr; gap:18px; border-left:2px solid var(--line-dark);
  }
  .has-mega.open .mega-panel{ display:grid; }
}

/* ---------- Interior-page hero checklist ---------- */
.hero-actions{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }
.hero-checklist{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:10px; max-width:62ch; }
@media(min-width:640px){ .hero-checklist{ grid-template-columns:1fr 1fr; } }
.hero-checklist li{ display:flex; gap:9px; align-items:flex-start; color:#C7C9D6; font-size:.92rem; }
.hero-checklist .tick{ color:var(--gold); font-weight:700; }

/* ---------- Mobile quick-read summary ---------- */
.tldr{ display:none; background:var(--paper); border:1px solid var(--line); padding:16px 20px; margin:32px 0 0; }
@media (max-width:640px){ .tldr{ display:block; } }
.tldr h2{ font-size:1rem; margin-bottom:6px; }

/* ---------- Benefit checklist ---------- */
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
@media(min-width:720px){ .check-list{ grid-template-columns:1fr 1fr; } }
.check-list li{ display:flex; gap:10px; align-items:flex-start; }
.check-list .tick{ color:var(--gold); font-weight:700; flex:0 0 auto; }

/* ---------- Problem statement box ---------- */
.problem-box{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--crimson); padding:28px 30px; }
.problem-box h3{ margin-bottom:14px; }

/* ---------- Outcome tiles ---------- */
.tile.outcome{ border-left:3px solid var(--gold); }
.tile.outcome .metric{ font-family:var(--serif); font-size:1.7rem; color:var(--gold); display:block; margin:4px 0 6px; }
.tile.outcome .tag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-dim); font-weight:700; }

/* ---------- CTA grid (3 variants) ---------- */
.cta-grid{ display:grid; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); grid-template-columns:repeat(3,1fr); }
@media(max-width:900px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-card{ padding:32px 28px; text-align:center; }
.cta-card h3{ font-size:1.25rem; }
.cta-card.cta-ink{ background:var(--ink); color:#fff; }
.cta-card.cta-ink h3{ color:#fff; }
.cta-card.cta-ink p{ color:#C7C9D6; }
.cta-card.cta-gold{ background:var(--gold); color:var(--ink); }
.cta-card.cta-gold p{ color:#4a3a10; }
.cta-card.cta-outline{ background:var(--ink-soft); color:#fff; }
.cta-card.cta-outline h3{ color:#fff; }
.cta-card.cta-outline p{ color:#C7C9D6; }
.cta-card p{ max-width:44ch; margin:0 auto 20px; }

/* ---------- FAQ accordion ---------- */
.faq-item{ background:#fff; border:1px solid var(--line); padding:2px 22px; margin-bottom:12px; }
.faq-item summary{
  cursor:pointer; font-weight:600; padding:16px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-family:var(--serif); color:var(--ink); font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--gold); font-size:1.3rem; flex:0 0 auto; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item .faq-a{ padding:0 0 18px; color:var(--slate-dim); }

/* ---------- Service-area chips ---------- */
.chip-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.chip{ background:var(--paper); border:1px solid var(--line); color:var(--ink); padding:7px 14px; font-size:.86rem; font-weight:600; }
.chip.is-secondary{ background:#fff; border-style:dashed; color:var(--slate-dim); font-weight:500; }

/* ---------- Mini about stats ---------- */
.mini-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.mini-stats div{ background:var(--parchment); padding:18px; text-align:center; }
.mini-stats .n{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); display:block; }
.mini-stats .l{ font-size:.76rem; color:var(--slate-dim); }

/* ---------- Prev/next pagination on landing pages ---------- */
.page-pagination{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media(max-width:640px){ .page-pagination{ grid-template-columns:1fr; } }
.page-pagination a{ background:var(--parchment); padding:20px 24px; display:block; }
.page-pagination a:hover{ background:#fff; }
.page-pagination .dir{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold); font-weight:700; }

/* ---------- Footer sub-row (extra link columns for landing pages) ---------- */
.footer-grid--sub{ grid-template-columns:repeat(3,1fr) !important; margin-top:36px; }
@media(max-width:800px){ .footer-grid--sub{ grid-template-columns:1fr 1fr !important; } }

/* ---------- Services-overview page: resource grid ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media(max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-4{ grid-template-columns:1fr; } }

/* ---------- Darken the "How It Works" step numbers ----------
   Base theme uses --gold-soft (a light hover/border tint) for these,
   which reads too faint as a heading number. Switch to the darker
   --gold used for other headings/accents; overridden here (after the
   base stylesheet) so it survives regeneration. */
.process-step .num{ color:var(--gold); }

/* ---------- Client dashboard (backend/dashboard.php) ---------- */
.dash-grid{ display:grid; gap:24px; }
@media(min-width:820px){ .dash-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.dash-card{ background:#fff; border:1px solid var(--line); padding:26px 28px; }
.dash-card h3{ margin-bottom:6px; }
.progress-track{ background:var(--line); height:8px; border-radius:6px; overflow:hidden; margin:10px 0 6px; }
.progress-fill{ background:var(--gold); height:100%; }
.status-chip{
  display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:4px 10px; border-radius:20px;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); white-space:nowrap;
}
.status-chip.is-live{ background:#E9F3E9; color:#2C6B2F; border-color:#BFE0C1; }
.update-item{ border-bottom:1px solid var(--line); padding:16px 0; }
.update-item:last-child{ border-bottom:none; }
.update-item .u-date{ font-size:.76rem; color:var(--slate-dim); text-transform:uppercase; letter-spacing:.04em; }
.update-item h4{ margin:4px 0 6px; }
.empty-state{ color:var(--slate-dim); font-style:italic; padding:20px 0; }

/* ---------- Admin panel (backend/admin.php, admin_client.php) ---------- */
.admin-pill{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gold-soft); border:1px solid rgba(255,255,255,0.3); border-radius:20px; padding:3px 10px;
}
.admin-form-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); align-items:end; }
.admin-form-grid label{ margin-top:0; }
.admin-form-grid-action{ display:flex; }
.btn-sm{ padding:9px 18px; font-size:0.85rem; }
.btn-danger{ border-color:var(--crimson); color:var(--crimson); background:transparent; }
.btn-danger:hover{ background:var(--crimson); color:#fff; }

.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.admin-table th, .admin-table td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin-table th{ color:var(--slate-dim); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.admin-row-actions{ display:flex; gap:8px; align-items:center; }
.admin-row-actions form{ display:inline; }

.admin-item{ padding:18px 0; border-bottom:1px solid var(--line); }
.admin-item:last-child{ border-bottom:none; }
.admin-item-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.admin-item-meta{ font-size:.82rem; color:var(--slate-dim); }
.admin-edit{ margin-top:10px; }
.admin-edit summary{
  cursor:pointer; font-size:.82rem; color:var(--gold); font-weight:600; list-style:none;
}
.admin-edit summary::-webkit-details-marker{ display:none; }
.admin-edit summary::before{ content:"+ "; }
.admin-edit[open] summary::before{ content:"\2212 "; }
.admin-edit form{ margin-top:14px; padding:16px; background:var(--parchment); border:1px solid var(--line); }
.admin-add-new{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.admin-add-new summary{ font-size:.9rem; }
.admin-delete-form{ display:inline-block; margin-top:8px; }