/*
Theme Name: Arcan / Spectrum
Theme URI: https://example.com/
Author: Arcan Işık
Description: A vivid editorial portfolio theme for packaging design, independent projects and writing. Includes persistent light/dark mode, responsive case-study layouts and custom content templates.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: arcan-spectrum
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --arc-bg: #f7f5f1;
  --arc-surface: #ffffff;
  --arc-surface-2: #ece9e2;
  --arc-text: #111111;
  --arc-muted: #69665f;
  --arc-line: rgba(17,17,17,.15);
  --arc-orange: #ff4d00;
  --arc-violet: #7557ff;
  --arc-lime: #c7ff36;
  --arc-blue: #2f6bff;
  --arc-pink: #ff5ea8;
  --arc-shadow: 0 24px 70px rgba(30,25,18,.12);
  --arc-radius: 28px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --arc-bg: #0c0c0d;
  --arc-surface: #151517;
  --arc-surface-2: #202024;
  --arc-text: #f5f3ef;
  --arc-muted: #a9a6a0;
  --arc-line: rgba(255,255,255,.14);
  --arc-shadow: 0 24px 80px rgba(0,0,0,.42);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body {
  background: var(--arc-bg);
  color: var(--arc-text);
  transition: background-color .25s ease, color .25s ease;
}

::selection { background: var(--arc-lime); color: #111; }
a { text-underline-offset: .18em; }

.arc-shell { max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px); }
.arc-kicker { letter-spacing: .11em; text-transform: uppercase; font-size: .78rem; font-weight: 700; }
.arc-muted { color: var(--arc-muted); }
.arc-rule { border-top: 1px solid var(--arc-line); }

.arc-header-wrap {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--arc-bg) 82%, transparent);
  border-bottom: 1px solid var(--arc-line);
}
.arc-header { min-height: 78px; display:flex; align-items:center; gap:24px; }
.arc-brand a { color: var(--arc-text); text-decoration:none; font-weight:800; letter-spacing:-.04em; }
.arc-nav { margin-left:auto; }
.arc-nav a { text-decoration:none; }

.arc-theme-toggle {
  width: 44px; height: 44px; border-radius: 999px; border:1px solid var(--arc-line);
  background: var(--arc-surface); color: var(--arc-text); cursor:pointer; display:grid; place-items:center;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.arc-theme-toggle:hover { transform: rotate(8deg) scale(1.04); }
.arc-theme-toggle:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--arc-blue); outline-offset: 3px; }
.arc-theme-toggle svg { width:19px; height:19px; }
.arc-theme-toggle .moon { display:none; }
html[data-theme="dark"] .arc-theme-toggle .sun { display:none; }
html[data-theme="dark"] .arc-theme-toggle .moon { display:block; }

.arc-hero { padding-block: clamp(72px, 10vw, 160px) clamp(54px, 7vw, 110px); overflow:hidden; }
.arc-hero h1 { max-width: 12ch; margin:0; font-size: clamp(4rem, 10vw, 9.5rem); line-height:.86; letter-spacing:-.075em; }
.arc-hero h1 .accent { color: var(--arc-orange); }
.arc-hero-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); gap:clamp(30px,5vw,80px); align-items:end; }
.arc-hero-copy { max-width: 34rem; font-size: clamp(1.08rem,1.5vw,1.35rem); line-height:1.5; }
.arc-status-pill { display:inline-flex; gap:.65rem; align-items:center; border:1px solid var(--arc-line); border-radius:999px; padding:.6rem .9rem; background:var(--arc-surface); font-size:.88rem; }
.arc-status-dot { width:9px; height:9px; border-radius:50%; background:var(--arc-lime); box-shadow:0 0 0 5px color-mix(in srgb,var(--arc-lime) 18%,transparent); }

.arc-marquee { border-block:1px solid var(--arc-line); overflow:hidden; white-space:nowrap; }
.arc-marquee-track { display:inline-block; padding:18px 0; animation:arc-marquee 24s linear infinite; font-weight:700; letter-spacing:.02em; }
.arc-marquee-track span { margin-right:40px; }
@keyframes arc-marquee { to { transform:translateX(-50%); } }

.arc-section { padding-block: clamp(72px,8vw,128px); }
.arc-section-heading { display:grid; grid-template-columns:1fr 2fr; gap:32px; align-items:end; margin-bottom:48px; }
.arc-section-heading h2 { margin:0; font-size:clamp(2.7rem,6vw,6.5rem); letter-spacing:-.06em; line-height:.92; }

.arc-work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.arc-card { position:relative; overflow:hidden; border-radius:var(--arc-radius); background:var(--arc-surface); border:1px solid var(--arc-line); box-shadow:none; transition: transform .3s ease, box-shadow .3s ease; }
.arc-card:hover { transform:translateY(-4px); box-shadow:var(--arc-shadow); }
.arc-card:nth-child(4n+1) { grid-column:span 7; }
.arc-card:nth-child(4n+2) { grid-column:span 5; }
.arc-card:nth-child(4n+3) { grid-column:span 5; }
.arc-card:nth-child(4n+4) { grid-column:span 7; }
.arc-card .wp-block-post-featured-image { margin:0; aspect-ratio:4/3; overflow:hidden; }
.arc-card .wp-block-post-featured-image img { width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.arc-card:hover .wp-block-post-featured-image img { transform:scale(1.025); }
.arc-card-body { padding:22px 24px 26px; }
.arc-card .wp-block-post-title { margin:0; font-size:clamp(1.5rem,2vw,2.25rem); letter-spacing:-.035em; }
.arc-card .wp-block-post-title a { text-decoration:none; color:inherit; }
.arc-card .wp-block-post-excerpt { color:var(--arc-muted); }

.arc-project-card { border-top:1px solid var(--arc-line); padding:26px 0; display:grid; grid-template-columns:minmax(190px,.55fr) 1fr auto; gap:28px; align-items:center; }
.arc-project-card:last-child { border-bottom:1px solid var(--arc-line); }
.arc-project-card .wp-block-post-title { margin:0; letter-spacing:-.04em; }
.arc-project-card .wp-block-post-title a { color:inherit; text-decoration:none; }
.arc-project-arrow { font-size:2rem; transition:transform .2s ease; }
.arc-project-card:hover .arc-project-arrow { transform:translateX(6px); }

.arc-color-panel { border-radius:var(--arc-radius); padding:clamp(30px,5vw,72px); background:var(--arc-violet); color:#fff; }
.arc-color-panel a { color:#fff; }
.arc-color-panel.orange { background:var(--arc-orange); }
.arc-color-panel.lime { background:var(--arc-lime); color:#111; }
.arc-color-panel.lime a { color:#111; }

.arc-note-list .wp-block-post { padding:24px 0; border-top:1px solid var(--arc-line); display:grid; grid-template-columns:160px minmax(0,1fr) auto; gap:24px; align-items:baseline; }
.arc-note-list .wp-block-post:last-child { border-bottom:1px solid var(--arc-line); }
.arc-note-list .wp-block-post-title { margin:0; letter-spacing:-.035em; }
.arc-note-list .wp-block-post-title a { color:inherit; text-decoration:none; }
.arc-note-list .wp-block-post-date { color:var(--arc-muted); }

.arc-page-hero { padding-block:clamp(70px,10vw,140px) 60px; }
.arc-page-hero h1 { max-width:13ch; font-size:clamp(3.8rem,9vw,9rem); line-height:.88; letter-spacing:-.07em; margin:0; }
.arc-case-meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.arc-case-meta > * { border:1px solid var(--arc-line); border-radius:999px; padding:.55rem .85rem; }
.arc-entry-content { font-size:clamp(1.06rem,1.3vw,1.22rem); line-height:1.7; }
.arc-entry-content > * { max-width:820px; margin-inline:auto; }
.arc-entry-content > .alignwide { max-width:1180px; }
.arc-entry-content > .alignfull { max-width:none; }
.arc-entry-content h2 { font-size:clamp(2.5rem,5vw,5rem); letter-spacing:-.055em; line-height:.95; margin-top:1.4em; }
.arc-entry-content h3 { font-size:clamp(1.8rem,3vw,3rem); letter-spacing:-.04em; }
.arc-entry-content img { border-radius:22px; }
.arc-entry-content blockquote { border-left:5px solid var(--arc-orange); padding-left:24px; font-size:1.3em; }

.arc-footer { padding-block:64px 34px; border-top:1px solid var(--arc-line); margin-top:80px; }
.arc-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
.arc-footer-mark { font-size:clamp(3rem,7vw,7rem); font-weight:800; letter-spacing:-.07em; line-height:.85; }
.arc-footer a { color:inherit; }

.wp-block-button__link { transition:transform .18s ease, box-shadow .18s ease; }
.wp-block-button__link:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.15); }

@media (max-width: 900px) {
  .arc-hero-grid, .arc-section-heading { grid-template-columns:1fr; }
  .arc-card:nth-child(n) { grid-column:span 12; }
  .arc-project-card { grid-template-columns:1fr auto; }
  .arc-project-card > :nth-child(2) { grid-column:1 / -1; }
  .arc-note-list .wp-block-post { grid-template-columns:1fr auto; }
  .arc-note-list .wp-block-post-date { grid-column:1/-1; }
  .arc-footer-grid { grid-template-columns:1fr; }
}

@media (max-width: 650px) {
  .arc-header { min-height:66px; gap:12px; }
  .arc-nav .wp-block-navigation__responsive-container-open { display:flex; }
  .arc-hero { padding-top:58px; }
  .arc-hero h1 { font-size:clamp(3.5rem,20vw,6rem); }
  .arc-page-hero h1 { font-size:clamp(3.4rem,18vw,6rem); }
  .arc-card { border-radius:20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}