/*
Theme Name: Leylaart Studio
Theme URI: https://leylaart.com
Author: Leyla Rashid
Description: Portfolio theme — "Studio Table" direction. Works scattered like objects on a studio table, handwritten annotations, flat ink-line aesthetic. Bright + dark (follows system preference). No build step required.
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: leylaart
*/

/* ─── Design tokens ─── */
:root {
  --paper: #fafaf7;
  --ink: #1a1a18;
  --ink-soft: #6b6b66;
  --ink-faint: #b8b8b3;
  --rule: #d8d6cf;
  --accent: oklch(0.62 0.13 35);
  --accent-2: oklch(0.55 0.10 230);

  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --hand: 'Caveat', cursive;
  --display: 'Architects Daughter', 'Kalam', cursive;

  --pad: 28px;
  --gap: 18px;
  --img-border-w: 3px; /* frame thickness on artwork images — tune 2-4px to taste */
}

/* Dark tokens: system preference (unless user forced light) or manual toggle. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --paper: #16161a;
    --ink: #f1ece0;
    --rule: #2e2e34;
    --ink-soft: #9a9890;
    --ink-faint: #4a4a52;
    --accent: oklch(0.74 0.13 35);
    --accent-2: oklch(0.72 0.10 230);
  }
}
:root.theme-dark {
  --paper: #16161a;
  --ink: #f1ece0;
  --rule: #2e2e34;
  --ink-soft: #9a9890;
  --ink-faint: #4a4a52;
  --accent: oklch(0.74 0.13 35);
  --accent-2: oklch(0.72 0.10 230);
}

/* ─── Base ─── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

.dotgrid {
  background-image: radial-gradient(circle, var(--ink-faint) 0.8px, transparent 0.8px);
  background-size: 14px 14px;
}

/* ─── Type roles ─── */
.t-display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
.t-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hand-note {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--accent);
  line-height: 1.1;
}

/* ─── Top bar ─── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px var(--pad);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper);
  flex-wrap: wrap;
}
.topbar .logo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
}
.topbar .logo sup { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; }
.topbar nav ul {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar nav a { text-decoration: none; }
.topbar nav .current-menu-item a,
.topbar nav .current_page_item a,
.topbar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.theme-toggle {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  width: 32px;
  height: 32px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

/* ─── Footer ─── */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px var(--pad);
  border-top: 1.5px solid var(--ink);
  margin-top: auto;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .row { display: flex; gap: 16px; }

/* ─── Buttons / pills / tags ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.pill.ghost { border-style: dashed; }
.pill.solid, .pill.is-active { background: var(--ink); color: var(--paper); }
.tag {
  display: inline-flex;
  padding: 3px 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: transparent; /* buttons otherwise get the UA's light default bg */
  text-decoration: none;
  cursor: pointer;
}
.tag.is-active { background: var(--ink); color: var(--paper); }

/* ─── Work thumbnail frame ─── */
.work-pin { position: absolute; }
.work-pin a { display: block; height: 100%; }
.work-pin img, .work-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: var(--img-border-w) solid var(--ink);
  border-radius: 2px;
}
.work-pin.is-portrait img { object-position: center top; }
.work-pin .hand-note { position: absolute; white-space: nowrap; }
.work-pin .note-top { left: 4px; top: -26px; }
.work-pin .note-bottom { left: 4px; bottom: -26px; }
/* placeholder when a work has no image yet */
.work-ph {
  width: 100%; height: 100%;
  border: var(--img-border-w) solid var(--ink);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  background: repeating-linear-gradient(135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--ink) 6%, transparent) 7px 8px);
}

/* ─── Home ─── */
.home-canvas {
  position: relative;
  min-height: calc(100vh - 140px);
  overflow: hidden;
}
.home-headline {
  position: absolute;
  left: 4%;
  top: 40px;
  font-size: clamp(44px, 6.5vw, 84px);
  z-index: 2;
}
.home-headline .dot { color: var(--accent); }
.home-hint { position: absolute; left: 38%; top: 80px; }
.home-filters {
  position: absolute;
  left: 5%;
  bottom: 36px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 3;
}
.home-shownote {
  position: absolute;
  right: 4%;
  bottom: 90px;
  transform: rotate(-4deg);
  text-align: right;
}
.home-shownote svg { display: block; margin: 6px 0 0 auto; }

/* ─── Works archive (collage) ─── */
.works-page { padding: 28px var(--pad); flex: 1; }
.works-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.works-head .t-display { font-size: 36px; }
.works-head .count { font-family: var(--mono); font-size: 15px; color: var(--ink-faint); }
.works-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.works-collage { position: relative; min-height: 640px; }
.works-hint { position: absolute; right: 20px; bottom: 10px; }
.work-pin.is-hidden { display: none; }

/* ─── Work detail ─── */
.work-detail {
  display: flex;
  gap: 40px;
  padding: 36px var(--pad) 48px;
  flex: 1;
  align-items: stretch;
}
.work-detail .hero { flex: 1; position: relative; max-width: 560px; }
.work-detail .hero img {
  width: auto;
  max-width: 100%;
  max-height: 68vh; /* keep the whole work visible without scrolling */
  height: auto;
  border: var(--img-border-w) solid var(--ink);
  border-radius: 2px;
  transform: rotate(-1deg);
}
.work-detail .hero .note-zoom { position: absolute; left: -8px; top: -30px; transform: rotate(-3deg); }
.work-detail .hero a[data-zoom] { display: inline-block; cursor: zoom-in; }
.zoom-dialog { border: none; padding: 0; background: transparent; }
.zoom-dialog::backdrop { background: color-mix(in srgb, var(--ink) 80%, transparent); }
.zoom-dialog img { max-width: 94vw; max-height: 94vh; cursor: zoom-out; }
.work-detail .hero .note-size { position: absolute; right: 10px; bottom: -32px; color: var(--accent-2); }
.work-detail .info { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.work-detail .info h1 { font-size: 42px; transform: rotate(-0.5deg); }
.work-detail .note { max-width: 46ch; }
.work-detail .actions { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 20px; }
.work-nav {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--pad) 24px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.work-nav a { text-decoration: none; }
.work-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Polaroid ─── */
.polaroid {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 8px 8px 6px;
  box-shadow: 3px 3px 0 var(--ink);
  width: 160px;
}
.polaroid img { aspect-ratio: 1 / 1; object-fit: cover; border: none; border-radius: 0; }
.polaroid .work-ph { aspect-ratio: 1 / 1; height: auto; border: none; border-radius: 0; }
.polaroid .cap {
  font-family: var(--hand);
  font-size: 17px;
  text-align: center;
  margin-top: 6px;
  color: var(--ink);
}

/* ─── About ─── */
.about-page { display: flex; gap: 48px; padding: 40px var(--pad) 60px; flex: 1; align-items: flex-start; }
.about-page .bio { flex: 1.1; }
.about-page .bio .t-display { font-size: clamp(30px, 3.5vw, 44px); margin: 6px 0 20px; }
.about-page .bio .text { max-width: 52ch; }
.about-photos { flex: 1; position: relative; min-height: 480px; }
.about-photos .polaroid { position: absolute; width: 200px; }
.about-photos .p1 { left: 8%; top: 0; transform: rotate(-5deg); }
.about-photos .p2 { left: 45%; top: 70px; transform: rotate(4deg); }
.about-photos .p3 { left: 25%; top: 260px; transform: rotate(-2deg); }
.about-photos .hand-note { position: absolute; left: 78%; top: 150px; }

/* ─── Commission ─── */
.commission-page { padding: 36px var(--pad) 60px; flex: 1; }
.commission-page > .t-display { font-size: clamp(34px, 4.5vw, 52px); }
.commission-page > .t-display .q { color: var(--accent); }
.process-strip {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 36px 0 44px;
  flex-wrap: wrap;
}
.process-step { width: 160px; position: relative; }
.process-step .label { font-family: var(--display); font-size: 24px; margin-top: 2px; }
.process-step .thumb {
  width: 150px;
  height: 95px;
  object-fit: cover;
  border: var(--img-border-w) solid var(--ink);
  border-radius: 2px;
  margin-top: 8px;
}
/* dashed hand-drawn arrows are flex items that stretch to fill the gap between steps */
.process-strip { align-items: flex-start; }
.process-strip .arrow {
  color: var(--accent);
  flex: 1 1 0;
  min-width: 40px;
  width: 40px;
  margin-top: 32px; /* sits at label height */
  pointer-events: none;
}
.commission-form-wrap { max-width: 820px; margin: 0 auto; }

/* Contact Form 7 styling to match ink-line aesthetic.
   CF7 puts every field in one <p> separated by <br> — we hide the <br>s and
   turn each <p> into a two-column grid instead. */
.wpcf7 form br { display: none; }
.wpcf7 form p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin: 0 0 20px;
}
.wpcf7 label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.wpcf7 label:has(textarea) { grid-column: 1 / -1; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
}
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}
.wpcf7 input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 10px 26px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--paper); color: var(--ink); }
/* validation + response messages */
.wpcf7 .wpcf7-not-valid-tip {
  font-family: var(--hand);
  font-size: 17px;
  color: var(--accent);
  margin-top: 4px;
}
.wpcf7 .wpcf7-response-output {
  margin: 0;
  padding: 12px 16px;
  border: 1.5px dashed var(--accent) !important;
  border-radius: 2px;
  font-family: var(--hand);
  font-size: 19px;
  color: var(--accent);
}

/* ─── Motion — small, playful, respects reduced-motion ─── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in { from { opacity: 0; } }

  /* works, polaroids and notes settle in one by one */
  .work-pin, .polaroid, .hand-note, .process-step {
    animation: fade-in 0.5s ease backwards;
  }
  .work-pin:nth-child(2),  .polaroid:nth-child(2),  .process-step:nth-child(2) { animation-delay: 0.08s; }
  .work-pin:nth-child(3),  .polaroid:nth-child(3),  .process-step:nth-child(3) { animation-delay: 0.16s; }
  .work-pin:nth-child(4),  .process-step:nth-child(4) { animation-delay: 0.24s; }
  .work-pin:nth-child(5),  .process-step:nth-child(5) { animation-delay: 0.32s; }
  .work-pin:nth-child(6)  { animation-delay: 0.40s; }
  .work-pin:nth-child(7)  { animation-delay: 0.48s; }
  .work-pin:nth-child(8)  { animation-delay: 0.56s; }
  .work-pin:nth-child(n+9) { animation-delay: 0.64s; }

  /* pinned works straighten up and lift when you point at them */
  .work-pin { transition: transform 0.25s ease; }
  .work-pin:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 4; }

  /* polaroids tilt back level */
  .polaroid { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .about-photos .polaroid:hover { transform: rotate(0deg); box-shadow: 5px 5px 0 var(--ink); z-index: 4; }

  /* pills fill with ink */
  .pill, .tag { transition: background 0.15s ease, color 0.15s ease; }
  .pill:hover, .pill-filter:hover { background: var(--ink); color: var(--paper); }
  .pill.solid:hover { background: var(--paper); color: var(--ink); }

  /* theme toggle gives a little nod */
  .theme-toggle { transition: transform 0.2s ease; }
  .theme-toggle:hover { transform: rotate(-16deg); }

  /* whole page cross-fades between light and dark; class is added by
     filter.js just for the switch, then removed */
  :root.theme-fading,
  :root.theme-fading *,
  :root.theme-fading *::before,
  :root.theme-fading *::after {
    transition: background-color 0.35s ease, color 0.35s ease,
                border-color 0.35s ease, box-shadow 0.35s ease !important;
  }
}

/* ─── Generic page / blog fallback ─── */
.generic-page { padding: 36px var(--pad) 60px; max-width: 760px; flex: 1; }
.generic-page h1 { font-family: var(--display); }

/* ─── Responsive: collapse collages to simple grid ─── */
@media (max-width: 860px) {
  :root { --pad: 18px; }

  .home-canvas { min-height: 0; padding-bottom: 24px; }
  .home-headline { position: static; padding: 28px var(--pad) 8px; }
  .home-hint { display: none; }
  .home-pins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 16px var(--pad);
  }
  .work-pin { position: static !important; width: auto !important; height: auto !important; transform: none !important; }
  .work-pin img, .work-ph { aspect-ratio: 4 / 5; height: auto; }
  .work-pin .hand-note { position: static; white-space: normal; font-size: 18px; margin-top: 4px; }
  .home-filters { position: static; padding: 8px var(--pad); }
  .home-shownote { position: static; transform: none; padding: 16px var(--pad) 0; text-align: left; }
  .home-shownote svg { display: none; }

  .works-collage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .works-hint { display: none; }

  .work-detail { flex-direction: column; gap: 48px; }
  .work-detail .hero { min-height: 0; }
  .work-detail .hero img { height: auto; }

  .about-page { flex-direction: column; }
  .about-photos { min-height: 0; display: flex; flex-wrap: wrap; gap: 20px; }
  .about-photos .polaroid { position: static; transform: none; }
  .about-photos .hand-note { display: none; }

  .process-strip { flex-direction: column; gap: 28px; }
  .process-strip .arrow { display: none; }
  .wpcf7 form p { grid-template-columns: 1fr; }
}