/*
Theme Name: Villa Petra Gaeta
Theme URI: https://villapetra.it
Author: Villa Petra
Author URI: https://villapetra.it
Description: Tema WordPress ultra-luxury monopagina per la vendita di una prestigiosa villa in pietra naturale a Gaeta. Design system "Materica" — architettura, pietra, mare Tirreno.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villa-petra
Tags: one-page, custom-menu, featured-images, translation-ready
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ============================================================
   DESIGN SYSTEM — "MATERICA"
   Palette ispirata alla pietra naturale di Gaeta e al Tirreno.
   ============================================================ */

:root {

  /* ─── Color Palette ─── */
  
  /* Primary — Pietra Naturale */
  --ci-stone:            #8B7355;
  --ci-stone-light:      #A89279;
  --ci-stone-dark:       #6B5640;
  --ci-stone-rgb:        139, 115, 85;
  
  /* Secondary — Blu Tirreno */
  --ci-sea:              #1B4965;
  --ci-sea-light:        #2D6A8F;
  --ci-sea-dark:         #0F2D40;
  --ci-sea-rgb:          27, 73, 101;
  
  /* Accent — Oro Lusso */
  --ci-gold:             #C9A96E;
  --ci-gold-light:       #D4BC8E;
  --ci-gold-dark:        #B08C4A;
  --ci-gold-rgb:         201, 169, 110;
  
  /* Neutrals */
  --ci-cream:            #F5F0EB;
  --ci-warm-white:       #FAF8F5;
  --ci-charcoal:         #2C2C2C;
  --ci-dark:             #1A1714;
  --ci-dark-rgb:         26, 23, 20;
  
  /* Functional */
  --ci-success:          #4A7C59;
  --ci-border:           rgba(139, 115, 85, 0.15);
  --ci-border-light:     rgba(139, 115, 85, 0.08);
  
  
  /* ─── Typography ─── */
  
  --ci-font-heading:     'Cormorant Garamond', 'Georgia', serif;
  --ci-font-body:        'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  
  /* Fluid Type Scale — Premium sizing */
  --ci-text-hero:        clamp(3.2rem, 8vw, 7rem);
  --ci-text-h2:          clamp(2.4rem, 5.5vw, 4.5rem);
  --ci-text-h3:          clamp(1.6rem, 3.2vw, 2.3rem);
  --ci-text-h4:          clamp(1.2rem, 1.6vw, 1.5rem);
  --ci-text-body:        clamp(1.05rem, 1.2vw, 1.2rem);
  --ci-text-small:       clamp(0.88rem, 1vw, 1rem);
  --ci-text-eyebrow:     clamp(0.75rem, 1vw, 0.9rem);
  --ci-text-cta:         0.9rem;
  
  /* Line Heights */
  --ci-lh-heading:       1.08;
  --ci-lh-body:          1.75;
  --ci-lh-tight:         1.3;
  
  /* Letter Spacing */
  --ci-ls-eyebrow:       0.25em;
  --ci-ls-cta:           0.2em;
  --ci-ls-heading:       -0.02em;
  --ci-ls-hero:          -0.03em;
  
  
  /* ─── Spacing ─── */
  
  --ci-section-py:       clamp(80px, 12vh, 140px);
  --ci-section-py-sm:    clamp(50px, 8vh, 80px);
  --ci-container-max:    1340px;
  --ci-container-wide:   1600px;
  --ci-container-narrow: 900px;
  --ci-container-px:     clamp(20px, 4vw, 60px);
  --ci-gap:              clamp(24px, 4vw, 48px);
  --ci-gap-sm:           clamp(12px, 2vw, 24px);
  
  
  /* ─── Transitions ─── */
  
  --ci-ease-luxury:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ci-ease-smooth:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ci-duration:         0.6s;
  --ci-duration-fast:    0.3s;
  --ci-duration-slow:    1.2s;
  
  
  /* ─── Shadows ─── */
  
  --ci-shadow-soft:      0 4px 24px rgba(0, 0, 0, 0.06);
  --ci-shadow-medium:    0 8px 40px rgba(0, 0, 0, 0.1);
  --ci-shadow-deep:      0 16px 64px rgba(0, 0, 0, 0.14);
  --ci-shadow-gold:      0 4px 30px rgba(201, 169, 110, 0.2);
  
  
  /* ─── Borders ─── */
  
  --ci-radius:           4px;
  --ci-radius-lg:        8px;
  --ci-radius-pill:      100px;
}


/* ============================================================
   BASE RESET & NORMALIZE
   Minimal, focused on performance and consistency.
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--ci-font-body);
  font-size: var(--ci-text-body);
  font-weight: 400;
  line-height: var(--ci-lh-body);
  color: var(--ci-charcoal);
  background-color: var(--ci-cream);
  overflow-x: hidden;
}

/* Remove default link underlines — we style them intentionally */
a {
  color: inherit;
  text-decoration: none;
}

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

ul, ol {
  list-style: none;
}

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

/* Accessible focus ring — visible only for keyboard users */
:focus-visible {
  outline: 2px solid var(--ci-gold);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

button {
  cursor: pointer;
}


/* ============================================================
   TYPOGRAPHY SYSTEM
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--ci-font-heading);
  line-height: var(--ci-lh-heading);
  letter-spacing: var(--ci-ls-heading);
  font-weight: 400;
  color: var(--ci-dark);
}

h1 {
  font-size: var(--ci-text-hero);
  font-weight: 300;
  letter-spacing: var(--ci-ls-hero);
}

h2 {
  font-size: var(--ci-text-h2);
}

h3 {
  font-size: var(--ci-text-h3);
  font-weight: 500;
}

h4 {
  font-size: var(--ci-text-h4);
  font-weight: 500;
}

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}


/* ─── Eyebrow Label ─── */

.ci-eyebrow {
  font-family: var(--ci-font-body);
  font-size: var(--ci-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ci-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ci-stone);
  display: inline-block;
  margin-bottom: 1.5rem;
}

.ci-eyebrow--light {
  color: var(--ci-gold);
}


/* ─── Decorative Divider ─── */

.ci-divider {
  width: 60px;
  height: 1px;
  background-color: var(--ci-gold);
  border: none;
  margin: 2rem 0;
  transform-origin: left center;
}

.ci-divider--center {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.ci-container {
  width: 100%;
  max-width: var(--ci-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ci-container-px);
  padding-right: var(--ci-container-px);
}

.ci-container--wide {
  max-width: var(--ci-container-wide);
}

.ci-container--narrow {
  max-width: var(--ci-container-narrow);
}

.ci-section {
  padding-top: var(--ci-section-py);
  padding-bottom: var(--ci-section-py);
  position: relative;
  overflow: hidden;
}


/* ─── Background Variants ─── */

.ci-bg-cream {
  background-color: var(--ci-cream);
}

.ci-bg-warm {
  background-color: var(--ci-warm-white);
}

.ci-bg-dark {
  background-color: var(--ci-dark);
  color: var(--ci-cream);
}

.ci-bg-dark h2,
.ci-bg-dark h3,
.ci-bg-dark h4 {
  color: var(--ci-cream);
}

.ci-bg-dark .ci-eyebrow {
  color: var(--ci-gold);
}

.ci-bg-dark .ci-divider {
  background-color: var(--ci-gold-light);
}


/* ============================================================
   BUTTON SYSTEM
   ============================================================ */

.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--ci-font-body);
  font-size: var(--ci-text-cta);
  font-weight: 600;
  letter-spacing: var(--ci-ls-cta);
  text-transform: uppercase;
  padding: 1em 2.4em;
  border-radius: var(--ci-radius-pill);
  transition: all var(--ci-duration-fast) var(--ci-ease-smooth);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.ci-btn--primary {
  background-color: var(--ci-stone);
  color: var(--ci-warm-white);
  border: 1px solid var(--ci-stone);
}

.ci-btn--primary:hover {
  background-color: var(--ci-stone-dark);
  border-color: var(--ci-stone-dark);
  transform: translateY(-2px);
  box-shadow: var(--ci-shadow-medium);
}

.ci-btn--outline {
  background-color: transparent;
  color: var(--ci-cream);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ci-btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.ci-btn--gold {
  background-color: var(--ci-gold);
  color: var(--ci-dark);
  border: 1px solid var(--ci-gold);
}

.ci-btn--gold:hover {
  background-color: var(--ci-gold-dark);
  border-color: var(--ci-gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--ci-shadow-gold);
}


/* ─── Ghost Link CTA ─── */

.ci-link-cta {
  font-family: var(--ci-font-body);
  font-size: var(--ci-text-cta);
  font-weight: 600;
  letter-spacing: var(--ci-ls-cta);
  text-transform: uppercase;
  color: var(--ci-stone);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  position: relative;
  padding-bottom: 4px;
}

.ci-link-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--ci-stone);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--ci-duration-fast) var(--ci-ease-smooth);
}

.ci-link-cta:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.ci-link-cta__arrow {
  transition: transform var(--ci-duration-fast) var(--ci-ease-smooth);
}

.ci-link-cta:hover .ci-link-cta__arrow {
  transform: translateX(4px);
}


/* ============================================================
   GSAP ANIMATION PREP
   Elements start invisible, GSAP reveals them.
   ============================================================ */

.ci-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.ci-reveal--line {
  transform: scaleX(0);
  will-change: transform;
}

/* Fallback: if JS fails, show everything */
.no-js .ci-reveal,
.no-js .ci-reveal--line {
  opacity: 1;
  transform: none;
}


/* ============================================================
   SELECTION & SCROLLBAR
   ============================================================ */

::selection {
  background-color: rgba(139, 115, 85, 0.2);
  color: var(--ci-dark);
}

/* Minimal elegant scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ci-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--ci-stone-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ci-stone);
}