/*
Theme Name: Clearstone
Theme URI: https://www.clearstone.nl
Author: Clearstone B.V.
Author URI: https://www.clearstone.nl
Description: Custom theme for Clearstone B.V. — IT Consultancy and Software Development. Rebuilt 2026, refreshed from the 1998-era brand.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: clearstone
*/

/* ---------- Design tokens ----------
   Colors/type pulled from the real archived site (web.archive.org, 2025-08-13 capture):
   footer bg #008100, nav link/accent #87D271, hero band #BBBBBB, body text #333,
   headings 30px/500-weight, system "Segoe UI" font stack — see README.md. */
:root {
  --color-primary: #008100;
  --color-primary-dark: #026b1f;
  --color-primary-light: #87d271;
  --color-primary-tint: #eaf6e4;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-heading: #1e2a38;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f9f7;
  --color-border: #e1e8e5;
  --color-hero-bg: #bbbbbb;
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --max-width: 1160px;
  --radius: 6px;
}

/* ---------- Reset-ish base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.6em; font-weight: 500; color: var(--color-heading); }
h1 { font-size: 2rem; }
h2 { font-size: 1.875rem; } /* 30px, matching the real site's section headings */
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 64px 0; }
.section-alt { background: var(--color-bg-alt); }
/* Centered, uppercase heading + centered italic subtitle — confirmed from real screenshots
   (an earlier pass had this left-aligned based on a misleading Wayback computed-style read).
   "Latest News" is the one exception on the real site: plain, left-aligned, no subtitle —
   use .section-header-plain for that instead of this. */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.section-header h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.section-header p {
  font-style: italic;
  color: var(--color-text-muted);
}
.section-header-plain {
  text-align: left;
  margin: 0 0 32px;
}
.section-header-plain h2 { text-transform: none; letter-spacing: normal; }
/* Real "Get to know us" button, confirmed from screenshots: solid green, bold uppercase
   white text, a slight border-radius, generously padded. (An earlier pass wrongly shrank
   this to a tiny flat rectangle based on a broken archive-replay measurement — see the
   plan addendum for why that reading was wrong.) */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 2px solid var(--color-primary);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); text-decoration: none; }
.btn-outline { background: transparent; color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
}
.site-logo img { height: 30px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: var(--color-primary);
  font-weight: 400;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}
/* The real nav-link color (#87D271, a pale green) reads too low-contrast against this
   near-white header to use as running text — same issue as the cookie banner and footer
   headings — so it's used as a hover underline accent instead, where legibility doesn't
   depend on it. */
.primary-nav a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-light);
  text-decoration: none;
}
.nav-toggle, .search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1;
  padding: 6px;
  width: 34px;
  height: 34px;
}
.nav-toggle svg, .search-toggle svg { width: 100%; height: 100%; }
.nav-toggle { display: none; }

/* Compact popover anchored under the search icon, not a full-width bar (confirmed from
   screenshots — an earlier pass built this as a full-width slide-down). */
.header-actions { position: relative; }
.header-search {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.header-search.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.header-search-inner { display: flex; padding: 10px; }
.header-search-inner input[type="search"] {
  flex: 1;
  border: 1px solid var(--color-border);
  border-right: none;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  border-radius: 4px 0 0 4px;
  min-width: 0;
}
.header-search-inner button {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  padding: 0 18px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav-toggle {
    background: var(--color-primary-light);
    border-radius: 4px;
  }
  .header-search { right: -24px; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav li { border-top: 1px solid var(--color-border); }
  .primary-nav a { display: block; padding: 14px 24px; }
}

/* ---------- Hero ----------
   Two real photos, recovered directly from the live site during a brief restore window
   (the Wayback Machine never crawled either one). The original alternated these as Swiper
   carousel slides — recreated here as a CSS-only crossfade (no JS/carousel library).

   The real hero is a duotone (grayscale photo + a saturated green tint that follows the
   photo's own light/dark areas via mix-blend-mode: color), not a flat dark wash sitting on
   top of the natural-color photo — an earlier pass got this wrong from a first look at a
   screenshot; a second, closer screenshot comparison against the real site caught it. The
   tint color (#00b400) is the same real green measured off the real "Get to know us"
   button earlier in this project. */
/* min-height (not just padding) so the hero fills most of the viewport like the real
   one does — an earlier pass sized this by padding alone, which left it noticeably
   shorter than the real full-bleed banner (confirmed by comparing screenshots: the real
   hero shows no other page content below the fold, mine did). */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-color: var(--color-hero-bg);
  padding: 100px 0;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00b400;
  mix-blend-mode: color;
  z-index: 1;
}
.hero .hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(1.05) contrast(1.05);
  opacity: 0;
  animation: heroCrossfade 16s infinite;
}
.hero .hero-slide:nth-of-type(1) { background-image: url("assets/images/hero-bridge.jpg"); animation-delay: 0s; }
.hero .hero-slide:nth-of-type(2) { background-image: url("assets/images/hero-header-bg.jpg"); animation-delay: -8s; }
@keyframes heroCrossfade {
  0%   { opacity: 1; }
  47%  { opacity: 1; }
  53%  { opacity: 0; }
  97%  { opacity: 0; }
  100% { opacity: 1; }
}
/* Left-aligned, not centered — a distinct pattern from the centered page-title banners
   ("Contact Us", "About Clearstone" etc.) that an earlier pass wrongly applied here too. */
.hero .container { position: relative; z-index: 2; width: 100%; text-align: left; }
/* Large display size, wrapping to two lines in a ~700px column — the shared h1 rule
   (2rem, sized for page-title banners like "Contact Us") is much too small here, which
   an earlier pass missed since the hero was too short to notice the heading looked cramped. */
.hero h1 { margin-top: 4px; color: #fff; text-transform: none; font-size: 4rem; max-width: 700px; line-height: 1.15; }
.hero p.lede { font-size: 1.25rem; color: rgba(255,255,255,0.9); max-width: 620px; margin: 20px 0 36px; }
@media (max-width: 640px) {
  .hero h1 { font-size: 2.6rem; }
}
.hero .actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-slide { animation: none; opacity: 1; }
  .hero .hero-slide:nth-of-type(2) { opacity: 0; }
}

/* ---------- Grids / cards ---------- */
.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Real Projects grid cards crop much taller than the source screenshot's native 800x578
   (landscape) shape, anchored to the top so the target site's own nav/hero stays visible —
   an earlier pass just used the source image's own aspect ratio, which reads much shorter/
   wider than the real site's cards. */
.card .card-media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-bg-alt); }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card .card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card .card-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 8px; text-transform: none; }
.card p { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: 0; }

/* Recent-posts cards on the home page: image, then a day/month-year date badge with a
   thin divider, then the title — no excerpt (confirmed from screenshots; distinct from
   the Projects grid's .card pattern). */
.news-card { display: block; }
.news-card .card-media { aspect-ratio: 800 / 578; overflow: hidden; background: var(--color-bg-alt); margin-bottom: 16px; }
.news-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-date {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}
.news-date .day { font-size: 1.8rem; font-weight: 500; color: var(--color-heading); line-height: 1; }
.news-date .month-year { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--color-text-muted); border-left: 1px solid var(--color-border); padding-left: 12px; }
.news-card h3 { margin: 0; text-transform: none; font-size: 1.1rem; }

/* Real layout: plain 2-column list, no card border/background (an earlier pass boxed
   these as bordered cards). */
.services-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; column-gap: 64px; }
.service-card { padding: 0; max-width: 460px; }
.service-card .icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: var(--color-primary);
}
.service-card .icon svg { width: 100%; height: 100%; }
.service-card h3 { text-transform: none; }
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Client logo tiles ----------
   Real design: each logo centered inside its own light-gray square tile, 4-column grid
   (confirmed from screenshots — an earlier pass used a plain flowing strip instead). */
.client-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.client-strip .client-tile {
  background: #f5f5f5;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
/* Logos filling most of the tile, not a small icon floating in a lot of empty gray space
   — the 60px cap this used to have looked much too small next to the real site's tiles. */
.client-strip img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity 0.2s, filter 0.2s;
}
.client-strip img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 780px) {
  .client-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .client-strip { grid-template-columns: 1fr; }
}

/* ---------- Content / prose pages ---------- */
.page-hero {
  background: var(--color-bg-alt);
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.page-hero h1 { margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.page-hero p { font-style: italic; color: var(--color-text-muted); margin: 0; }
.prose { max-width: 760px; margin: 0 auto; }
.prose img { border-radius: var(--radius); margin: 24px 0; }
/* About page's body text runs the full container width, not a narrow reading column —
   confirmed from screenshots; its first paragraph ("Founded in 1998") is also its own
   centered italic subtitle line, not part of the regular left-aligned text. */
.prose-about { max-width: none; }
.prose-about > p:first-child {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 32px;
}

/* Single Project page: image first, then a plain left-aligned title directly below on
   white background — no grey page-hero band, no category badge (confirmed from a real
   screenshot; an earlier pass put the title in a centered grey hero band above the image). */
.single-project-content h1 {
  text-align: left;
  text-transform: none;
  margin-top: 32px;
}
.single-project-content .prose { text-align: left; }

/* Previous/Next project navigation bar. */
.project-pagination { background: var(--color-bg-alt); margin-top: 32px; }
.project-pagination-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 32px 24px;
}
.project-pagination-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--color-heading);
}
.project-pagination-link:hover { text-decoration: none; }
.project-pagination-link:hover strong { text-decoration: underline; }
.project-pagination-next { text-align: right; flex-direction: row-reverse; }
.project-pagination-link .arrow { color: var(--color-primary-light); font-size: 1.3rem; }
.project-pagination-link .label { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 2px; }
.project-pagination-link strong { font-weight: 500; color: var(--color-heading); }
@media (max-width: 640px) {
  .project-pagination-inner { flex-wrap: wrap; }
}

/* ---------- Contact ----------
   Icon-led, borderless 2-column layout (Email+Phone on the left, the two office
   addresses on the right), matching the real page — not the bordered cards this used
   to be. */
/* Full container width with a wide gap between the two column groups — the real page has
   a large empty middle area (columns sit roughly at the container's 1/4 and 3/4 marks),
   not squeezed into a narrow centered block like an earlier pass had it. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 160px;
  margin: 0 auto;
}
.contact-grid .contact-block { text-align: center; margin-bottom: 40px; }
.contact-grid .contact-block:last-child { margin-bottom: 0; }
.contact-grid .contact-block .icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  color: var(--color-primary);
}
.contact-grid .contact-block .icon svg { width: 100%; height: 100%; }
.contact-grid .contact-block h3 { margin-bottom: 6px; text-transform: none; }
.contact-grid .contact-block p { margin: 0; color: var(--color-text-muted); }
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
}
/* Full-bleed real Google Map, matching the real page's own inline styling exactly. */
#map {
  width: 100%;
  height: 550px;
  margin: 64px 0 0;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}

/* ---------- Blog ---------- */
.post-list { display: grid; gap: 32px; }
.post-card { display: grid; grid-template-columns: 220px 1fr; gap: 24px; border-bottom: 1px solid var(--color-border); padding-bottom: 32px; }
.post-card .card-media { border-radius: var(--radius); aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg-alt); }
.post-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 6px; }
@media (max-width: 640px) {
  .post-card { grid-template-columns: 1fr; }
}
.single-post .featured-image { margin-bottom: 32px; border-radius: var(--radius); overflow: hidden; }

/* ---------- Footer ----------
   Real footer bg is #008100 (vivid green) with white links on the archived site. Its
   section headings computed to #333 there, which is too low-contrast on this green to
   read reliably, so those are white here instead — a deliberate, small deviation. */
.site-footer { background: var(--color-primary); color: #eafcef; padding: 56px 0 28px; margin-top: 64px; }
.site-footer a { color: #ffffff; }
.site-footer h4, .site-footer h1, .site-footer h2, .site-footer h3 { color: #fff; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 2fr; margin-bottom: 32px; }
.footer-grid h4 { color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; font-size: 0.92rem; }
.footer-tagline { max-width: 420px; font-size: 0.92rem; color: #d9f0dd; }
.footer-nav-cols { column-count: 2; column-gap: 16px; }
.footer-nav-cols li { break-inside: avoid; }
.footer-linkedin { display: inline-flex; margin-top: 14px; width: 20px; height: 20px; color: #fff; }
.footer-linkedin svg { width: 100%; height: 100%; }
/* Real footer splits Contact Info into two side-by-side offices (Clearstone B.V. |
   Clearstone d.o.o.), not one stacked list. */
.footer-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.footer-offices li { list-style: none; }
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: #fff;
  border: none;
  cursor: pointer;
}
.back-to-top svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 20px;
  font-size: 0.85rem;
  color: #d9f0dd;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  text-align: center;
}
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-offices { grid-template-columns: 1fr; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #10231b;
  color: #e7f1ec;
  border-top: 1px solid rgba(255,255,255,0.12);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.cookie-consent.is-visible { transform: translateY(0); }
.cookie-consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 24px;
}
.cookie-consent-inner p { margin: 0; font-size: 0.92rem; }
.cookie-consent-inner a { color: #ffffff; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-consent-actions .btn,
.cookie-consent-actions .btn-neutral {
  padding: 8px 18px;
  font-size: 0.9rem;
  cursor: pointer;
}
/* Same visual weight as Accept (solid, filled) — a ghost/outline Decline button
   reads as a dark pattern to EU regulators (CNIL, EDPB precedent), so both
   choices need to be equally easy to see and click, not just equally clickable. */
.cookie-consent-actions .btn-neutral {
  background: #3a4f45;
  border-color: #3a4f45;
  color: #fff;
}
.cookie-consent-actions .btn-neutral:hover { background: #4b6357; border-color: #4b6357; }
@media (max-width: 640px) {
  .cookie-consent-inner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- 404 ---------- */
.not-found { text-align: center; padding: 100px 0; }
.not-found h1 { font-size: 4rem; color: var(--color-primary); }