/*
Theme Name: Dragovia
Theme URI: https://dragovia.com
Author: Dragovia
Author URI: https://dragovia.com
Description: Dragovia — SEO, Affiliate, Marketing, App & Brand Building studio based in Cyprus. A dark, editorial, Next.js-feeling theme powered by WordPress. Sections are wired to menus, the Customizer, a Work portfolio custom post type, and native Posts (Journal).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dragovia
Tags: business, portfolio, one-page, dark, custom-logo, custom-menu, blog, editorial
*/

/* ------------------------------------------------------------------
   Dragovia — base + tokens
   Most styling is delivered via Tailwind (see header.php). This file
   holds theme tokens, the accent variable (overridden by Customizer),
   motion primitives, and small WordPress-content niceties.
------------------------------------------------------------------- */

:root {
  --ink: #111213;
  --surface: #191a1b;
  --paper: #f4f2ed;
  --sand: #e9e7e1;

  /* Brand accent — overridden inline from the Customizer */
  --accent: #ff6a1a;
  --accent-light: #ff8444;
  --accent-deep: #f06a18;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem; /* keep anchors clear of the fixed header */
}

body {
  min-height: 100vh;
}

/* Native cross-document page transitions — gives the SPA / Next.js feel
   when navigating between WordPress pages, in supporting browsers. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Slow Ken Burns drift on hero images. The image starts slightly scaled
   so the pan never reveals an edge; overflow is clipped by the hero. */
.dv-hero-img {
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .dv-hero-img {
    animation: dvKenBurns 26s ease-in-out infinite alternate;
  }
}
@keyframes dvKenBurns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-1.5%, -1.2%, 0); }
}

/* First-paint fade so the page feels "hydrated" rather than flashed in. */
@media (prefers-reduced-motion: no-preference) {
  .dv-boot {
    opacity: 0;
    animation: dvBoot 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  @keyframes dvBoot {
    to { opacity: 1; }
  }
}

/* Reveal + hero states (JS removes/animates these). */
[data-hero],
[data-reveal] {
  will-change: transform, opacity;
}

/* Smooth accordion-style detail expansion */
.process-detail,
.faq-answer {
  transition: none;
}

/* Hide the scrollbar on the mobile capabilities carousel */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Let the mobile carousel bleed to the screen edges with a peek of the next card */
@media (max-width: 767px) {
  .dv-services-track {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-left: 1rem;
  }
}

/* ------------------------------------------------------------------
   Brand logo.
   An uploaded site logo (Appearance → Customize → Site Identity) is
   rendered as a clean white silhouette on the dark header — so the
   black Dragovia wordmark shows up white automatically, no editing.
   The fallback wordmark uses a rounded, geometric weight closer to
   the Dragovia mark.
------------------------------------------------------------------- */
.dv-logo img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}
.dv-logo-word {
  font-family: 'Baloo 2', 'Inter', ui-rounded, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
  /* Trim the line box to the visual cap/baseline so the wordmark sits
     optically centred in the header instead of riding high. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.dv-logo,
.dv-logo a {
  display: inline-flex;
  align-items: center;
}
/* The signature linked-circle "o" sits inline, anchored to the baseline
   so it lines up with the surrounding lowercase letters. */
.dv-logo-word .dv-o {
  display: inline-block;
  height: 0.6em;
  width: auto;
  margin: 0 0.03em;
  vertical-align: baseline;
}

/* ------------------------------------------------------------------
   WordPress editor content (Journal / pages) — inherits the dark
   editorial feel and keeps long-form posts readable.
------------------------------------------------------------------- */
.dv-prose {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(244, 242, 237, 0.82);
}
.dv-prose > * + * { margin-top: 1.5rem; }
.dv-prose h2 { font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 3rem; color: #fff; }
.dv-prose h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin-top: 2.5rem; color: #fff; }
.dv-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.dv-prose a:hover { color: var(--accent-light); }
.dv-prose strong { color: #fff; font-weight: 600; }
.dv-prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
}
.dv-prose ul, .dv-prose ol { padding-left: 1.5rem; }
.dv-prose ul { list-style: disc; }
.dv-prose ol { list-style: decimal; }
.dv-prose li { margin-top: 0.5rem; }
.dv-prose img { border-radius: 0.5rem; }
.dv-prose code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}
.dv-prose pre {
  background: #0c0d0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
}
.dv-prose figure { margin-top: 2rem; }
.dv-prose figcaption { font-size: 0.85rem; color: rgba(244, 242, 237, 0.45); margin-top: 0.5rem; }

/* WordPress core alignment + caption helpers */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text { font-size: 0.85rem; color: rgba(244, 242, 237, 0.45); }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* Comments + WP admin bar spacing */
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}