/*
Theme Name:   Archi Child
Theme URI:    https://archi.oceanthemes.site/
Description:  Make your modifications to [Parent Theme] in this Archi child theme.
Author:       OceanThemes
Author URI:   http://oceanthemes.net/
Template:     archi
Version:      1.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  archi-child
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* ============================================================================
   New homepage design ("dhh" = Designer Homes Homepage).
   Everything below is scoped so it cannot affect any other page:
     - element-level resets live under body.dhh-home only
     - every component class is prefixed dhh-
     - every @keyframes name is prefixed dhh
     - the accent color is its own custom property, --dhh-accent
   front-page.php is the only template that outputs this markup.
   ============================================================================ */

body.dhh-home {
  margin: 0;
  background: #F6F1E9;
  color: #1B1815;
  font-family: 'Manrope', system-ui, sans-serif;
  overflow-x: hidden;
}
body.dhh-home * { box-sizing: border-box; }
body.dhh-home a { text-decoration: none; color: inherit; }
body.dhh-home img { max-width: 100%; display: block; }
body.dhh-home h1, body.dhh-home h2, body.dhh-home h3, body.dhh-home p { margin: 0; }
html:has(body.dhh-home) { scroll-behavior: smooth; }

:root {
  --dhh-accent: #B8703F;
}

.dhh-nav-link,
.dhh-door-panel a { transition: color 0.2s ease; }
.dhh-nav-link:hover,
.dhh-door-panel a:hover { color: var(--dhh-accent) !important; }

.dhh-btn-solid { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.dhh-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.dhh-btn-outline { transition: background 0.2s ease, color 0.2s ease; }
.dhh-btn-outline:hover { background: var(--dhh-accent); border-color: var(--dhh-accent); color: #1B1815 !important; }
.dhh-btn-outline-dark { transition: background 0.2s ease, color 0.2s ease; }
.dhh-btn-outline-dark:hover { background: #1B1815; color: #F6F1E9 !important; }

/* hero */
.dhh-hero-gradient {
  background:
    radial-gradient(1100px 600px at 15% 20%, color-mix(in srgb, var(--dhh-accent) 38%, transparent), transparent 60%),
    radial-gradient(900px 520px at 85% 75%, color-mix(in srgb, var(--dhh-accent) 24%, transparent), transparent 55%),
    #1B1815;
  background-size: 200% 200%;
  background-attachment: fixed;
  animation: dhhGradientShift 20s ease-in-out infinite;
}
@keyframes dhhGradientShift {
  0% { background-position: 0% 0%, 100% 100%; }
  50% { background-position: 100% 50%, 0% 50%; }
  100% { background-position: 0% 0%, 100% 100%; }
}
.dhh-float-card { animation: dhhFloatY 6s ease-in-out infinite; }
@keyframes dhhFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* scroll-driven 3d reveal for every section */
.dhh-scroll-3d {
  animation: dhhScrollReveal 1s linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}
@keyframes dhhScrollReveal {
  from { opacity: 0; transform: perspective(1000px) rotateX(16deg) translateY(56px) scale(0.96); }
  to { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dhh-scroll-3d, .dhh-hero-gradient, .dhh-float-card, .dhh-spin-badge, .dhh-orbit-ring, .dhh-orbit-item-inner {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* fixed, door-opening menu */
.dhh-door-menu { position: relative; perspective: 700px; }
.dhh-door-icon { position: relative; display: inline-block; width: 22px; height: 22px; perspective: 220px; }
.dhh-door-leaf { position: absolute; top: 0; width: 10px; height: 22px; background: #F6F1E9; border-radius: 1px; transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
.dhh-door-leaf-l { left: 0; transform-origin: left center; }
.dhh-door-leaf-r { right: 0; transform-origin: right center; }
.dhh-door-panel {
  position: absolute; top: 46px; left: 0; min-width: 200px; z-index: 60;
  background: #1B1815; border: 1px solid rgba(246,241,233,0.15); border-radius: 4px;
  padding: 14px; opacity: 0; transform: translateY(-10px) rotateX(-18deg); transform-origin: top center;
  pointer-events: none; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}
.dhh-door-menu:hover .dhh-door-panel,
.dhh-door-menu:focus-within .dhh-door-panel { opacity: 1; transform: translateY(0) rotateX(0deg); pointer-events: auto; }
.dhh-door-menu:hover .dhh-door-leaf-l,
.dhh-door-menu:focus-within .dhh-door-leaf-l { transform: rotateY(-150deg); }
.dhh-door-menu:hover .dhh-door-leaf-r,
.dhh-door-menu:focus-within .dhh-door-leaf-r { transform: rotateY(150deg); }
.dhh-door-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dhh-door-panel li { margin: 0; }
.dhh-door-panel a { display: block; padding: 8px 10px; border-radius: 2px; color: #F6F1E9; font-size: 14px; transition: color 0.2s ease, background 0.2s ease; }
.dhh-door-panel a:hover { background: rgba(246,241,233,0.06); }

/* "four disciplines" orbiting a slow-spinning circular badge */
.dhh-orbit-wrap { position: relative; width: 560px; max-width: 100%; height: 560px; margin: 0 auto; }
.dhh-orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 190px; height: 190px; }
.dhh-spin-badge { animation: dhhSpin 24s linear infinite; }
.dhh-orbit-ring { position: absolute; inset: 0; animation: dhhSpin 46s linear infinite; }
.dhh-orbit-item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.dhh-orbit-item-inner { animation: dhhSpinReverse 46s linear infinite; }
@keyframes dhhSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dhhSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* recent work: full photo in a house-shaped frame, door opens on hover */
.dhh-project-card { transition: transform 0.3s ease; }
.dhh-project-card:hover, .dhh-project-card:focus-within { transform: translateY(-4px); }
.dhh-home-frame { position: relative; width: 100%; height: 300px; overflow: hidden; }
.dhh-mini-door-wrap { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); width: 64px; height: 92px; perspective: 260px; }
.dhh-mini-door-leaf { position: absolute; top: 0; width: 32px; height: 92px; background: #2A2620; border: 1px solid rgba(246,241,233,0.22); transition: transform 0.6s cubic-bezier(.4,0,.2,1); }
.dhh-mini-door-leaf-l { left: 0; transform-origin: left center; border-top-left-radius: 6px; }
.dhh-mini-door-leaf-r { right: 0; transform-origin: right center; border-top-right-radius: 6px; }
.dhh-project-card:hover .dhh-mini-door-leaf-l,
.dhh-project-card:focus-within .dhh-mini-door-leaf-l { transform: rotateY(-104deg); }
.dhh-project-card:hover .dhh-mini-door-leaf-r,
.dhh-project-card:focus-within .dhh-mini-door-leaf-r { transform: rotateY(104deg); }
.dhh-door-nameplate { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); width: 80%; max-width: 220px; text-align: center; opacity: 0; transition: opacity 0.4s ease 0.15s; }
.dhh-project-card:hover .dhh-door-nameplate,
.dhh-project-card:focus-within .dhh-door-nameplate { opacity: 1; }

/* renovation before / after */
.dhh-ba-wrap { position: relative; width: 100%; max-width: 880px; height: 420px; border-radius: 6px; overflow: hidden; }
.dhh-ba-after { position: absolute; inset: 0; background: linear-gradient(135deg,#4a4030,#241f18); display: flex; align-items: center; justify-content: center; }
.dhh-ba-before-clip {
  position: absolute; inset: 0; width: 50%; overflow: hidden;
  background: linear-gradient(135deg,#6b6a63,#3d3b35); display: flex; align-items: center; justify-content: center;
  border-right: 3px solid var(--dhh-accent); transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.dhh-ba-wrap:hover .dhh-ba-before-clip { width: 78%; }
.dhh-ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%;
  background: #F6F1E9; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  transition: left 0.6s cubic-bezier(.4,0,.2,1); z-index: 2;
}
.dhh-ba-wrap:hover .dhh-ba-handle { left: 78%; }
.dhh-ba-tag { position: absolute; top: 16px; padding: 5px 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; color: #F6F1E9; }
.dhh-ba-tag-before { left: 16px; background: rgba(27,24,21,0.55); }
.dhh-ba-tag-after { right: 16px; background: var(--dhh-accent); color: #1B1815; }

/* utility grids */
.dhh-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.dhh-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.dhh-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }

@media (max-width: 960px) {
  .dhh-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dhh-grid-3 { grid-template-columns: 1fr !important; }
  .dhh-grid-2 { grid-template-columns: 1fr !important; }
  .dhh-hide-mobile { display: none !important; }
  .dhh-orbit-wrap { width: 100% !important; height: auto !important; }
  .dhh-orbit-ring { position: static !important; animation: none !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
  .dhh-orbit-item { position: static !important; width: 100% !important; }
  .dhh-orbit-item-inner { animation: none !important; margin: 0 !important; width: 100% !important; height: auto !important; border-radius: 8px !important; flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; padding: 16px 20px !important; }
  .dhh-orbit-center { position: static !important; margin: 0 auto 20px !important; }
  .dhh-door-panel { position: fixed !important; top: 68px !important; left: 16px !important; right: 16px !important; min-width: auto !important; }
  .dhh-ba-wrap { height: 320px !important; }
}