/* ============================================================
   NOVENSY — Django-specific additions layered on design-system.css.
   Only tokens from design-system.css; no new hex values.
   ============================================================ */

/* Form validation errors (server-rendered) */
.form-error{color:var(--gold-soft);font-size:13px;margin-top:6px;border-left:2px solid var(--gold);padding-left:10px;}

/* Showcase cards (public) */
.card-link{text-decoration:none;display:block;color:inherit;}
.card-meta{margin-top:12px;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);}

/* Two-column grid that collapses to one column on mobile — used to force
   .card-grid to 2 cols on the contact page instead of its default 3, and
   to align .contact-emails under it (inline styles would out-specificity
   the existing .card-grid mobile breakpoint, so this is a class instead). */
.grid-2col{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.grid-2col{grid-template-columns:1fr;}}

/* Contact page — plain (non-link) selectable text, deliberately outside
   the card boxes so clicking/dragging to select never triggers a mailto:
   navigation instead. Grid mirrors .card-grid so each email centers
   directly under its matching card, with an arrow pointing down at it. */
.contact-emails{display:grid;gap:28px;margin:32px 0 28px;}
.contact-email-item{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.contact-arrow{font-size:22px;color:var(--gold);line-height:1;}
.contact-email{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:var(--gold-soft);word-break:break-word;user-select:text;}
.empty-panel{text-align:center;padding:70px 20px;border:1px solid var(--line);color:var(--grey);}
.empty-panel p{max-width:520px;margin:0 auto 10px;line-height:1.7;}
.showcase-body{padding:44px;line-height:1.9;color:var(--cream);}
.showcase-body p{max-width:760px;}

/* ---------------- Client portal ---------------- */
.portal-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-left:10px;}
.portal-main{min-height:60vh;padding-bottom:90px;}
.portal-user{color:var(--grey);font-size:13.5px;text-decoration:none;margin-right:14px;}
.portal-user:hover{color:var(--cream);}
.inline-form{display:inline;}
.inline-form .btn{padding:10px 18px;}
.back-link{color:var(--grey);font-size:13px;text-decoration:none;display:inline-block;margin-bottom:18px;}
.back-link:hover{color:var(--gold-soft);}
.flash{border:1px solid var(--line);border-left:2px solid var(--gold);padding:14px 18px;margin-bottom:22px;color:var(--gold-soft);font-size:14px;background:var(--ink-2);}
.muted{color:var(--grey);font-size:14px;line-height:1.7;}

.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:10px;}
.portal-panel{border:1px solid var(--line);background:var(--ink-2);padding:30px;margin-top:26px;}
.portal-grid .portal-panel{margin-top:0;}
.panel-title{font-family:'Playfair Display',serif;font-size:21px;font-weight:600;color:var(--cream);margin-bottom:18px;}
.portal-narrow{margin-top:26px;}

/* Project table */
.p-table{width:100%;border-collapse:collapse;font-size:14px;}
.p-table th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
.p-table td{padding:14px 12px;border-bottom:1px solid var(--line);color:var(--cream);}
.p-table a{color:var(--gold-soft);text-decoration:none;}
.p-table a:hover{text-decoration:underline;}

/* Status pills — one gold system, opacity encodes state */
.status-pill{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border:1px solid var(--line);color:var(--grey);white-space:nowrap;}
.status-pill.s-in_progress,.status-pill.s-in_review,.status-pill.s-accepted{border-color:var(--gold);color:var(--gold-soft);}
.status-pill.s-live,.status-pill.s-completed,.status-pill.s-done{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.status-pill.s-on_hold,.status-pill.s-declined{opacity:.55;}

.req-list{list-style:none;padding:0;margin:0;}
.req-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--cream);}
.req-list li:last-child{border-bottom:none;}

/* Project updates timeline */
.timeline{margin-top:6px;}
.timeline-item{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);}
.timeline-item:last-child{border-bottom:none;}
.timeline-dot{width:8px;height:8px;background:var(--gold);margin-top:8px;flex-shrink:0;}
.timeline-item p{color:var(--cream);font-size:14.5px;line-height:1.7;margin-bottom:4px;}

/* Message thread */
.thread{display:flex;flex-direction:column;gap:14px;margin-bottom:26px;}
.msg{max-width:78%;padding:14px 18px;border:1px solid var(--line);}
.msg-client{align-self:flex-end;background:var(--ink-3);}
.msg-staff{align-self:flex-start;background:var(--ink-2);border-left:2px solid var(--gold);}
.msg-body{font-size:14.5px;color:var(--cream);line-height:1.65;}
.msg-meta{margin-top:6px;font-size:11.5px;color:var(--grey);letter-spacing:.05em;}
.msg-form textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--cream);padding:13px 15px;font-family:'Inter',sans-serif;font-size:14px;min-height:80px;resize:vertical;}
.msg-form textarea:focus{outline:none;border-color:var(--gold);}
.msg-form .btn{margin-top:12px;}

/* Portal stat-tile row — client dashboard project/request/message counts,
   staff dashboard pending/clients/open-request counts. */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px;}
.stat-tile{border:1px solid var(--line);background:var(--ink-2);padding:20px 22px;}
.stat-tile b{display:block;font-family:'Playfair Display',serif;font-size:28px;color:var(--gold-soft);}
.stat-tile span{font-size:12.5px;color:var(--grey);letter-spacing:.3px;}

@media (max-width:860px){
  .portal-grid{grid-template-columns:1fr;}
  .msg{max-width:95%;}
  .stat-row{grid-template-columns:1fr;}
}

/* Floating WhatsApp button — fixed bottom-right on every page. Dark
   circle with a brand-green glyph in dark theme (fixed hex, not
   --ink/--ink-2/--shadow, which sit too close to the dark-theme page
   background — see git history for why). Light theme uses the site's
   gold accent instead of black, with a white glyph for contrast on gold.
   .whatsapp-wrap carries the fixed position so the hover tooltip bubble
   (typed out in site.js) can anchor to it with position:absolute. */
.whatsapp-wrap{position:fixed;bottom:28px;right:28px;z-index:90;display:inline-block;}
.whatsapp-float{
  position:relative;display:flex;
  width:58px;height:58px;border-radius:50%;
  align-items:center;justify-content:center;
  background:#17171a;border:1px solid rgba(201,162,75,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:.3s;
}
.whatsapp-float:hover{border-color:#c9a24b;transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.4);}
.whatsapp-float svg{width:29px;height:29px;fill:#25D366;}
html[data-theme="light"] .whatsapp-float{background:var(--gold);border-color:var(--gold);}
html[data-theme="light"] .whatsapp-float:hover{background:var(--gold-soft);border-color:var(--gold-soft);}
html[data-theme="light"] .whatsapp-float svg{fill:#fff;}

/* Typewriter tooltip bubble — text is typed in character-by-character by
   site.js on hover/focus, using the visitor's current page language
   (document.documentElement.lang), so it works on the trilingual public
   site and the English-only portal alike. */
.wa-tooltip{
  position:absolute;bottom:72px;right:0;width:236px;
  background:var(--ink-2);border:1px solid var(--line);color:var(--cream);
  padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.55;
  box-shadow:0 10px 28px var(--shadow);
  opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.wa-tooltip::after{content:'';position:absolute;bottom:-7px;right:22px;width:14px;height:14px;background:var(--ink-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);}
.wa-tooltip-cursor{opacity:.6;animation:waCursorBlink 1s step-end infinite;}
@keyframes waCursorBlink{50%{opacity:0;}}
.whatsapp-wrap:hover .wa-tooltip,.whatsapp-wrap:focus-within .wa-tooltip{opacity:1;transform:translateY(0) scale(1);}
html[data-theme="light"] .wa-tooltip{box-shadow:0 10px 28px rgba(60,48,20,.22);border-color:rgba(162,121,42,.45);}
html[data-theme="light"] .wa-tooltip::after{border-color:rgba(162,121,42,.45);}
@media(max-width:640px){
  .whatsapp-wrap{bottom:18px;right:18px;}
  .whatsapp-float{width:50px;height:50px;}
  .whatsapp-float svg{width:25px;height:25px;}
  .wa-tooltip{width:min(236px, calc(100vw - 60px));bottom:64px;}
}

/* Privacy policy — long-form legal text: readable line length, spaced
   headings, plain bullet lists instead of the marketing card/grid styles. */
.legal-body{max-width:760px;color:var(--grey);font-size:15px;line-height:1.8;}
.legal-body h2{color:var(--cream);font-family:'Playfair Display',serif;font-size:22px;font-weight:600;margin:44px 0 14px;}
.legal-body h2:first-of-type{margin-top:0;}
.legal-body p{margin-bottom:14px;}
.legal-body ul{margin:0 0 14px;padding-left:20px;}
.legal-body li{margin-bottom:10px;}
.legal-body strong{color:var(--cream);font-weight:600;}
.legal-updated{font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);margin-bottom:36px;}

/* About page — "How We Work" steps: distinct bordered rectangle cards
   instead of the shared seamless tile grid. Same 3-col .card-grid layout
   (6 cards wrap to 2 rows automatically), just gapped with its own
   border/radius/shadow and a hover lift instead of edge-to-edge tiles. */
#how-we-work .card-grid{gap:22px;background:transparent;border:none;}
#how-we-work .card{border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px var(--shadow);}
#how-we-work .card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 12px 28px var(--shadow);}