/*
Theme Name: HURRIAMO
Theme URI: https://hurriamo.com
Author: HURRIAMO
Author URI: https://hurriamo.com
Description: A private, editorial WordPress theme for the HURRIAMO luxury garment house. Built for restraint: off-white, charcoal and burgundy, Playfair Display headlines, generous whitespace, and a scroll-driven golden filament hero. Includes Services and Portfolio content types and a built-in, validated private appointment-request flow.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hurriamo
Tags: custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   HURRIAMO — Design Tokens
   ========================================================================== */
:root{
  --off-white:#F7F4EF;
  --paper:#FFFFFF;
  --charcoal:#1C1B1A;
  --charcoal-soft:#2B2B2B;
  --burgundy:#6B1E2E;
  --burgundy-tint:#EFE1E2;
  --rose:#D8A9AF;
  --hairline: rgba(28,27,26,0.14);
  --hairline-dark: rgba(247,244,239,0.22);
  --gold: #C9A24B;
  --gold-soft: rgba(201,162,75,0.55);
  --max-w: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--off-white);
  color: var(--charcoal);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:700;
  line-height:1.1;
  margin:0 0 0.5em;
  letter-spacing:0.005em;
}
h1{ font-size: clamp(2.6rem, 5vw, 4.6rem); }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3{ font-size: 1.4rem; }
p{ margin:0 0 1.2em; }

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  font-family:"Inter", sans-serif;
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color: var(--burgundy);
  margin-bottom: 1em;
  display:block;
}

.hairline{
  height:1px;
  width:100%;
  background: var(--hairline);
  border:0;
  margin: 2.5rem 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: opacity .3s var(--ease), letter-spacing .3s var(--ease);
}
.btn:hover{ opacity:.62; letter-spacing:0.18em; }
.btn.btn-solid{
  border:1px solid var(--charcoal);
  padding:0.9em 1.8em;
  border-radius: var(--radius);
}
.btn.btn-solid:hover{ background:var(--charcoal); color:var(--off-white); opacity:1; letter-spacing:0.14em; }
.btn.on-dark{ color: var(--off-white); }
.btn.on-dark.btn-solid{ border-color: var(--off-white); }
.btn.on-dark.btn-solid:hover{ background:var(--off-white); color:var(--charcoal); }

/* ==========================================================================
   Site Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 1.4rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.site-header.is-scrolled{
  background: rgba(247,244,239,0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
  padding: 0.9rem 0;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.site-branding{ display:flex; align-items:center; gap:0.7rem; }
.site-branding img.custom-logo{ height:26px; width:auto; }
.site-branding .site-title{
  font-family:"Playfair Display", serif; font-weight:700; font-size:1.05rem; letter-spacing:0.08em;
}
.header-nav ul{ display:flex; gap:2.2rem; align-items:center; }
.header-nav a{
  font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid transparent; transition: border-color .3s var(--ease), opacity .3s;
}
.header-nav a:hover{ border-color: currentColor; }
.header-nav .cta{ color: var(--burgundy); }
.menu-toggle{
  display:none; background:none; border:0; width:26px; height:18px; position:relative;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor; transition: transform .3s var(--ease), opacity .3s;
}
.menu-toggle::before{ top:0; } .menu-toggle span{ top:50%; } .menu-toggle::after{ bottom:0; }
.nav-open .menu-toggle::before{ transform: translateY(8.5px) rotate(45deg); }
.nav-open .menu-toggle::after{ transform: translateY(-8.5px) rotate(-45deg); }
.nav-open .menu-toggle span{ opacity:0; }

@media (max-width: 860px){
  .header-nav{
    position:fixed; inset:0; top:0; background:var(--off-white); display:flex; align-items:center; justify-content:center;
    transform: translateY(-100%); transition: transform .5s var(--ease); z-index:90;
  }
  .header-nav ul{ flex-direction:column; gap:1.6rem; text-align:center; }
  .header-nav a{ font-size:0.95rem; }
  .nav-open .header-nav{ transform: translateY(0); }
  .menu-toggle{ display:block; z-index:95; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background: radial-gradient(ellipse at 50% 30%, #241417 0%, var(--charcoal) 60%, #141313 100%);
  color: var(--off-white);
  overflow:hidden;
  padding: 8rem 0 4.5rem;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.hero-inner{ position:relative; z-index:2; }
.hero .container{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.6rem; }
.hero-logo{ height:64px; width:auto; margin-bottom:0.6rem; opacity:0; transform:translateY(14px); animation: heroIn 1.4s var(--ease) forwards .2s; }
.hero-title{ opacity:0; transform:translateY(14px); animation: heroIn 1.4s var(--ease) forwards .4s; }
.hero-sub{ max-width:520px; color:var(--rose); opacity:0; transform:translateY(14px); animation: heroIn 1.4s var(--ease) forwards .6s; font-size:1rem; }
.hero-cta{ opacity:0; transform:translateY(14px); animation: heroIn 1.4s var(--ease) forwards .8s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--rose); opacity:.7;
}
.scroll-cue::after{
  content:""; display:block; width:1px; height:26px; background:currentColor; margin:0.6em auto 0;
  animation: cueMove 1.8s var(--ease) infinite;
}
@keyframes cueMove{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ==========================================================================
   Section rhythm
   ========================================================================== */
.section{ padding: 6.5rem 0; }
.section.tight{ padding: 4rem 0; }
.section.on-dark{ background: var(--charcoal); color: var(--off-white); }
.section.on-tint{ background: var(--paper); }
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Brand intro */
.brand-intro p{ font-size:1.15rem; color: var(--charcoal-soft); max-width: 760px; }

/* Creative director */
.director{ display:grid; grid-template-columns: 320px 1fr; gap:4rem; align-items:center; }
.director-photo{ aspect-ratio:4/5; background:var(--burgundy-tint); overflow:hidden; }
.director-photo img{ width:100%; height:100%; object-fit:cover; }
.director-role{ font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--burgundy); margin-bottom:1rem; display:block; }
.director-tags{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.6rem; }
.director-tags span{ font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; border:1px solid var(--hairline); padding:0.5em 0.9em; color:var(--charcoal-soft); }
@media (max-width:780px){ .director{ grid-template-columns:1fr; gap:2rem; } .director-photo{ max-width:280px; } }

/* Services */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hairline); }
.service-item{ padding:2.4rem 1.8rem 2.4rem 0; border-bottom:1px solid var(--hairline); border-right:1px solid var(--hairline); }
.service-item:nth-child(3n){ border-right:none; }
.service-num{ font-family:"Playfair Display",serif; color:var(--burgundy); font-size:1rem; margin-bottom:0.8rem; display:block; }
.service-item h3{ margin-bottom:0.5rem; font-size:1.2rem; }
.service-item p{ font-size:0.92rem; color: var(--charcoal-soft); margin-bottom:0; }
@media (max-width:900px){ .services-grid{ grid-template-columns:1fr; } .service-item{ border-right:none !important; padding-right:0; } }

/* Portfolio */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--gutter); }
.portfolio-item{ position:relative; overflow:hidden; aspect-ratio:4/5; background:#EDEAE3; }
.portfolio-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.portfolio-item:hover img{ transform:scale(1.045); }
.portfolio-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem;
  background:linear-gradient(to top, rgba(28,27,26,0.75), transparent);
  color:#fff; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  opacity:0; transition:opacity .4s var(--ease);
}
.portfolio-item:hover .portfolio-caption{ opacity:1; }
.portfolio-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed var(--hairline); color:var(--charcoal-soft); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; padding:1rem;
}
@media (max-width:900px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* Process */
.process-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.process-steps .num{ font-family:"Playfair Display",serif; color:var(--rose); font-size:1.6rem; display:block; margin-bottom:0.6rem; }
@media (max-width:780px){ .process-steps{ grid-template-columns:1fr; } }

/* Contact + Booking */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-details p{ font-size:0.95rem; }
.contact-details a{ border-bottom:1px solid var(--hairline); }
.form-row{ margin-bottom:1.3rem; }
.form-row label{ display:block; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:0.5em; color:var(--charcoal-soft); }
.form-row input, .form-row textarea, .form-row select{
  width:100%; border:0; border-bottom:1px solid var(--hairline); background:transparent; padding:0.6em 0.1em;
  color:var(--charcoal); transition:border-color .3s var(--ease);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline:none; border-color:var(--burgundy); }
.form-row textarea{ resize:vertical; min-height:100px; }
.form-hp{ position:absolute; left:-9999px; }
.form-msg{ padding:1em 1.2em; font-size:0.85rem; margin-bottom:1.5rem; border-left:2px solid var(--burgundy); background:var(--burgundy-tint); }
.form-msg.success{ border-color:#3E6B4B; background:#E9EFE9; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:2.5rem; } }

/* Footer */
.site-footer{ background:var(--charcoal); color:var(--off-white); padding:3.5rem 0 2rem; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.footer-mark{ font-family:"Playfair Display",serif; font-size:1.5rem; }
.footer-nav ul{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-nav a{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; opacity:.75; }
.footer-nav a:hover{ opacity:1; }
.footer-bottom{ border-top:1px solid var(--hairline-dark); padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; font-size:0.68rem; letter-spacing:0.06em; opacity:.6; }

/* Utility */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-logo,.hero-title,.hero-sub,.hero-cta{ animation:none; opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue::after{ animation:none; }
}