/* ============================================================
   A.S. Daniyal Best Trading & Contracting
   site.css — global base, Working-Drawing devices, motion
   Loaded AFTER css/tailwind.css.
   ============================================================ */

/* ---------- Base ---------- */
:root {
  --hair: 1px;
  --grid-line: rgba(201, 162, 75, 0.22);   /* brass @ 22% */
  --brass: #C9A24B;
  --obsidian: #0D211D;
  --forest: #13302A;
  --ivory: #F4EFE3;
  --concrete: #DCD7C8;
  --graphite: #22282A;
}

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--obsidian);
  color: var(--ivory);
  min-height: 100vh;
}

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

/* Images never overflow their container */
img,
svg,
video {
  max-width: 100%;
  display: block;
}

/* ---------- Typography niceties ---------- */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Selection colour — brass on obsidian */
::selection {
  background: var(--brass);
  color: var(--obsidian);
}

/* ---------- Working-Drawing hairline helpers ---------- */
.hair-t { border-top:    var(--hair) solid var(--grid-line); }
.hair-b { border-bottom: var(--hair) solid var(--grid-line); }
.hair-l { border-left:   var(--hair) solid var(--grid-line); }
.hair-r { border-right:  var(--hair) solid var(--grid-line); }

/* When a hairline sits on Warm Ivory or Concrete Grey,
   use a graphite-tinted line instead of brass — the brass
   hairlines are designed for dark surfaces. */
.bg-ivory    .hair-t,
.bg-ivory    .hair-b,
.bg-ivory    .hair-l,
.bg-ivory    .hair-r,
.bg-concrete .hair-t,
.bg-concrete .hair-b,
.bg-concrete .hair-l,
.bg-concrete .hair-r {
  border-color: rgba(34, 40, 42, 0.15);
}

/* ---------- Bracket device for photography ---------- */
/* Two L-shaped brass corners, top-left and bottom-right.
   Used on hero, team photo, service photos, and the map. */
.bracket {
  position: relative;
}

.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--brass);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}

.bracket::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.bracket::after {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

/* ---------- Underlying grid overlay (opener sections) ---------- */
/* Applied inline on each page opener, but defined here as a
   reusable class so we don't repeat the long background-image
   string in every section. */
.grid-underlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(to right, var(--brass) 1px, transparent 1px),
    linear-gradient(to bottom, var(--brass) 1px, transparent 1px);
  background-size: 120px 120px;
}

/* ---------- Hero reveal animation ---------- */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  animation: revealUp 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.reveal-1 { animation-delay: 80ms;  }
.reveal-2 { animation-delay: 200ms; }
.reveal-3 { animation-delay: 320ms; }

/* ---------- Form field resets ---------- */
/* The contact form uses underline-only inputs (hairlines).
   Strip the browser's default box chrome and dropdown arrow. */
input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Restore a visible focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 0;
}

/* Remove the default focus ring ONLY when a mouse click
   triggers focus — keyboard users still get :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* Custom select arrow — a single brass caret, not the OS native one */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 14px 14px;
  padding-right: 24px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Kill the yellow Chrome autofill background — it fights the palette */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--graphite);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Placeholder colour — graphite @ 35% on ivory form fields */
::placeholder {
  color: rgba(34, 40, 42, 0.35);
  opacity: 1;
}

/* ---------- Tap targets on mobile ---------- */
/* Buttons and links on mobile Safari have a grey flash by
   default — remove it, we already provide a real hover state. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- WhatsApp FAB safe area ---------- */
/* On iPhones with a home indicator, keep the FAB above it */
@supports (padding: max(0px)) {
  .fixed.bottom-6.right-6 {
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    right:  max(1.5rem, env(safe-area-inset-right));
  }
}
/* ============================================================
   PRINCIPALS — portrait reveal on scroll
   Used only on about.html for the two principal photographs.
   ============================================================ */

.principal-portrait {
  position: relative;
  /* Start hidden; the IntersectionObserver in site.js reveals them. */
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition:
    opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Revealed state — added by JS when the figure enters the viewport. */
.principal-portrait.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle vertical drift while scrolling — the figure "floats" against
   the underlying grid. Very small amplitude so it reads as depth,
   not as an animation. Disabled under reduced-motion below. */
.principal-portrait--left img,
.principal-portrait--right img {
  transition: transform 1600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .principal-portrait {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .principal-portrait--left img,
  .principal-portrait--right img {
    transition: none !important;
    transform: none !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .reveal,
  .reveal-1,
  .reveal-2,
  .reveal-3 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ---------- Print ---------- */
/* Minimal — the site has no print-optimised pages, but if a
   client prints Contact, this keeps it readable. */
@media print {
  header,
  footer,
  .fixed {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }
}