/*
Theme Name: D2D Travels
Theme URI: https://d2dtravels.com/
Author: D2D Travels Pvt. Ltd.
Author URI: https://d2dtravels.com/
Description: Custom travel theme for D2D Travels Pvt. Ltd. (Drive To Destination), Sirsa. Tour packages, fleet hire, destinations and enquiry management, all editable from the WordPress admin panel. No page builder and no build step required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
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: d2d-travels
Tags: travel, business, custom-colors, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready

This file holds the design tokens, reset and typography.
Component and section styles live in assets/css/.
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Brand palette is derived from the D2D logo: vivid orange over deep navy.

   Contrast notes, measured against WCAG 2.1 AA:
     --accent (#F4761F) on white          = 2.83:1  -> NEVER use for text
     --accent-ink (#C2410C) on white      = 5.42:1  -> use for orange text
     --ink (#0F2942) on --accent          = 5.50:1  -> orange buttons take navy text
     white on --ink                       = 15.5:1
     --body (#40566B) on white            = 7.60:1

   Radius rule, applied everywhere without exception:
     buttons and pills  -> --r-pill
     inputs             -> --r-input
     cards and panels   -> --r-card
     large feature tiles-> --r-feature
   ========================================================================== */

:root {
  /* Brand */
  --ink:            #0F2942;
  --ink-soft:       #16395C;
  --ink-softer:     #1E4E7A;
  --accent:         #F4761F;
  --accent-strong:  #DC5A0A;
  --accent-ink:     #C2410C;
  --accent-soft:    #FFF3E9;

  /* Dark "brand" surfaces (top bar, footer, hero scrim, CTA, page headers).
     These stay dark in both themes, unlike --ink which is a text colour and
     flips. --on-accent is the text colour that sits on an orange fill and must
     stay dark in both themes to keep the button contrast valid. */
  --surface-ink:    #0F2942;
  --surface-ink-2:  #16395C;
  --on-accent:      #0F2942;

  /* Surfaces and text */
  --paper:          #FFFFFF;
  --paper-2:        #F6F9FC;
  --paper-3:        #EAF0F6;
  --body:           #40566B;
  --body-soft:      #5C7185;
  --on-dark:        #FFFFFF;
  --on-dark-soft:   #C3D4E4;

  /* Lines and shadows. Shadows are tinted to the navy hue, never pure black. */
  --line:           rgba(15, 41, 66, 0.12);
  --line-strong:    rgba(15, 41, 66, 0.22);
  --line-on-dark:   rgba(255, 255, 255, 0.16);
  --shadow-sm:      0 1px 2px rgba(15, 41, 66, 0.06),
                    0 2px 6px rgba(15, 41, 66, 0.05);
  --shadow-md:      0 4px 12px rgba(15, 41, 66, 0.08),
                    0 12px 28px rgba(15, 41, 66, 0.07);
  --shadow-lg:      0 8px 20px rgba(15, 41, 66, 0.10),
                    0 24px 56px rgba(15, 41, 66, 0.10);

  /* Radii */
  --r-pill:         999px;
  --r-input:        10px;
  --r-card:         14px;
  --r-feature:      20px;

  /* Type */
  --font-display:   "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:      "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 68ch;
  --gutter:         clamp(1rem, 4vw, 2rem);
  --section-y:      clamp(3.25rem, 6.5vw, 6rem);
  --section-y-lg:   clamp(4rem, 8vw, 7.5rem);

  /* Motion. MOTION_INTENSITY is 4, so transitions only, no choreography. */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:         140ms;
  --t:              240ms;
  --t-slow:         420ms;

  /* Layers. Documented scale, no ad-hoc z-index anywhere else. */
  --z-base:         1;
  --z-sticky:       100;
  --z-header:       200;
  --z-drawer:       300;
  --z-float:        400;
}

/* Dark mode.
   Three ways in, one set of values:
     - the visitor picks Dark      -> [data-theme="dark"]
     - the visitor picks Light     -> [data-theme="light"] keeps the light :root
     - no choice made yet          -> the system preference decides
   The no-flash script in the header sets data-theme before paint, so there is
   no theme flicker. Without JavaScript the media query still gives auto dark.
   The two dark blocks below are identical on purpose; keep them in sync. */

:root[data-theme="dark"] {
  --ink:           #E8F0F8;
  --ink-soft:      #C9DBEA;
  --ink-softer:    #A6C2D9;
  --accent:        #FF8A3D;
  --accent-strong: #FFA366;
  --accent-ink:    #FFB27A;
  --accent-soft:   #2A1C11;

  --paper:         #0B1A29;
  --paper-2:       #10263A;
  --paper-3:       #17334B;
  --body:          #B4C8DA;
  --body-soft:     #93ACC1;

  /* Brand surfaces stay dark and go a touch deeper than the page so the top
     bar and footer separate from the content. Their text stays light. */
  --surface-ink:   #060F18;
  --surface-ink-2: #0F2942;
  --on-dark:       #FFFFFF;
  --on-dark-soft:  #C3D4E4;
  --on-accent:     #0F2942;

  --line:          rgba(255, 255, 255, 0.13);
  --line-strong:   rgba(255, 255, 255, 0.24);
  --line-on-dark:  rgba(255, 255, 255, 0.16);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.40),
                   0 12px 28px rgba(0, 0, 0, 0.32);
  --shadow-lg:     0 8px 20px rgba(0, 0, 0, 0.45),
                   0 24px 56px rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --ink:           #E8F0F8;
    --ink-soft:      #C9DBEA;
    --ink-softer:    #A6C2D9;
    --accent:        #FF8A3D;
    --accent-strong: #FFA366;
    --accent-ink:    #FFB27A;
    --accent-soft:   #2A1C11;

    --paper:         #0B1A29;
    --paper-2:       #10263A;
    --paper-3:       #17334B;
    --body:          #B4C8DA;
    --body-soft:     #93ACC1;

    --surface-ink:   #060F18;
    --surface-ink-2: #0F2942;
    --on-dark:       #FFFFFF;
    --on-dark-soft:  #C3D4E4;
    --on-accent:     #0F2942;

    --line:          rgba(255, 255, 255, 0.13);
    --line-strong:   rgba(255, 255, 255, 0.24);
    --line-on-dark:  rgba(255, 255, 255, 0.16);
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.40),
                     0 12px 28px rgba(0, 0, 0, 0.32);
    --shadow-lg:     0 8px 20px rgba(0, 0, 0, 0.45),
                     0 24px 56px rgba(0, 0, 0, 0.40);
  }
}

/* Give the whole page a smooth cross-fade when the toggle is used, but never
   for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.d2d-theming,
  html.d2d-theming * {
    transition: background-color var(--t) var(--ease),
                border-color var(--t) var(--ease),
                color var(--t) var(--ease) !important;
  }
}

/* ==========================================================================
   2. FONTS, self-hosted so no third-party request is made on page load
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("assets/fonts/outfit-variable.woff2") format("woff2-variations"),
       url("assets/fonts/outfit-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.woff2") format("woff2-variations"),
       url("assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   3. RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.d2d-no-scroll { overflow: hidden; }

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* ==========================================================================
   4. TYPOGRAPHY
   Hierarchy is controlled with weight and colour first, raw scale second.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; }

p { margin: 0 0 1.1rem; }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease);
}

a:hover { color: var(--accent-strong); }

strong, b { font-weight: 700; color: var(--ink); }

blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-size: 1.0625rem;
}

code, pre, kbd {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 0.9em;
}

code {
  padding: 0.15em 0.4em;
  background: var(--paper-3);
  border-radius: 6px;
}

pre {
  padding: 1rem 1.25rem;
  background: var(--paper-3);
  border-radius: var(--r-card);
  overflow-x: auto;
}

/* Long-form editor content, used by page.php and single.php */
.d2d-prose { max-width: var(--container-text); }
.d2d-prose > *:last-child { margin-bottom: 0; }

.d2d-prose h2 { margin-top: 2.25rem; }
.d2d-prose h3 { margin-top: 1.75rem; }

.d2d-prose img,
.d2d-prose .wp-block-image img {
  border-radius: var(--r-card);
}

.d2d-prose figcaption {
  margin-top: 0.6rem;
  color: var(--body-soft);
  font-size: 0.875rem;
}

.d2d-prose ul,
.d2d-prose ol { margin-bottom: 1.25rem; }

.d2d-prose li { margin-bottom: 0.4rem; }

.d2d-prose table th,
.d2d-prose table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.d2d-prose table th {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ==========================================================================
   5. LAYOUT PRIMITIVES
   Grid over flex percentage maths, everywhere.
   ========================================================================== */

.d2d-shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.d2d-shell--wide { max-width: var(--container-wide); }
.d2d-shell--text { max-width: var(--container-text); }

.d2d-section { padding-block: var(--section-y); }
.d2d-section--lg { padding-block: var(--section-y-lg); }
.d2d-section--tint { background: var(--paper-2); }
.d2d-section--ink { background: var(--surface-ink); }

.d2d-section--ink h1,
.d2d-section--ink h2,
.d2d-section--ink h3,
.d2d-section--ink h4 { color: var(--on-dark); }

.d2d-section--ink p { color: var(--on-dark-soft); }

.d2d-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }

.d2d-grid--2 { grid-template-columns: 1fr; }
.d2d-grid--3 { grid-template-columns: 1fr; }
.d2d-grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .d2d-grid--3,
  .d2d-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .d2d-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .d2d-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d2d-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Section heading block. Stacked, never a left-headline / right-paragraph split. */
.d2d-heading { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.d2d-heading > *:last-child { margin-bottom: 0; }
.d2d-heading h2 { margin-bottom: 0.5rem; }
.d2d-heading p { font-size: 1.0625rem; }

.d2d-heading--center {
  margin-inline: auto;
  text-align: center;
}

/* The one eyebrow style in the theme. Used sparingly: at most once every
   three sections, per the layout rules. */
.d2d-eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.d2d-section--ink .d2d-eyebrow { color: var(--accent); }

/* ==========================================================================
   6. ACCESSIBILITY
   ========================================================================== */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  z-index: var(--z-float);
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  clip-path: none;
  background: var(--surface-ink);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect reduced motion. Everything above MOTION_INTENSITY 3 collapses. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .d2d-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   7. UTILITIES
   ========================================================================== */

.d2d-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}

.d2d-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.d2d-stack > * + * { margin-top: 1rem; }
.d2d-stack--sm > * + * { margin-top: 0.5rem; }
.d2d-stack--lg > * + * { margin-top: 1.75rem; }

.d2d-center { text-align: center; }
.d2d-nowrap { white-space: nowrap; }
.d2d-mb-0 { margin-bottom: 0; }
.d2d-mt-auto { margin-top: auto; }

.d2d-lede {
  color: var(--body);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

.wp-caption { max-width: 100%; }

.sticky,
.gallery-caption,
.bypostauthor { /* required by the WordPress theme check */ }