/* ==========================================================================
   PADI Los Angeles - Global Design Tokens
   Sumber: HTML design (Home v2, About, Menu, Order, Checkout)
   Pakai di: Elementor > Site Settings > Custom CSS  (Elementor Pro)
             atau enqueue dari child theme (style.css).
   Catatan: seluruh design memakai border-radius 0 (kotak, tanpa rounded).
   ========================================================================== */

/* ---------- 1. TOKENS -------------------------------------------------- */
:root{
  /* Brand - hijau */
  --padi-green:        #10705A;   /* background utama / primary        */
  --padi-green-surface:#0C5A47;   /* section alternating, card, input  */
  --padi-green-deep:   #094B3C;   /* footer, tombol solid gelap        */
  --padi-green-overlay:#093A2E;   /* basis gradient overlay foto       */

  /* Brand - netral */
  --padi-cream:        #F1EAD9;   /* teks utama                        */
  --padi-gold:         #F7DDA8;   /* aksen, harga, italic, hover       */
  --padi-amber:        #E0A44E;   /* border tag "Must Try"             */

  /* Garis & border (cream dengan opacity) */
  --padi-line-08: rgba(241,234,217,.08);
  --padi-line-10: rgba(241,234,217,.10);
  --padi-line-12: rgba(241,234,217,.12);
  --padi-line-14: rgba(241,234,217,.14);
  --padi-line-16: rgba(241,234,217,.16);
  --padi-line-28: rgba(241,234,217,.28);
  --padi-line-30: rgba(241,234,217,.30);
  --padi-line-35: rgba(241,234,217,.35);
  --padi-line-45: rgba(241,234,217,.45);
  --padi-line-50: rgba(241,234,217,.50);

  /* Overlay gradient di atas foto */
  --padi-overlay-hero:  linear-gradient(180deg,rgba(9,58,46,.55) 0%,rgba(9,58,46,.20) 45%,rgba(9,58,46,.92) 100%);
  --padi-overlay-order: linear-gradient(180deg,rgba(9,58,46,.82) 0%,rgba(9,58,46,.55) 45%,rgba(9,58,46,.96) 100%);
  --padi-overlay-card:  linear-gradient(180deg,rgba(9,58,46,0) 0%,rgba(9,58,46,.88) 78%);

  /* Font family */
  --padi-font-display: "Instrument Serif", Georgia, serif;
  --padi-font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Skala tipografi fluid (nilai clamp persis seperti di HTML design V2) */
  --padi-fs-hero:      clamp(32px, 4.4vw, 62px);  /* H1 Home / Menu / Order    */
  --padi-fs-hero-lg:   clamp(34px, 4.6vw, 64px);  /* H1 About / Checkout conf. */
  --padi-fs-display-l: clamp(34px, 3.6vw, 54px);  /* H2 panel Home             */
  --padi-fs-display-s: clamp(28px, 3.4vw, 46px);  /* H2 penutup About          */
  --padi-fs-display-m: clamp(26px, 3.2vw, 42px);  /* H2 statement              */
  --padi-fs-quote:     clamp(26px, 3.4vw, 44px);  /* kutipan serif italic      */
  --padi-fs-sub:       clamp(20px, 2.3vw, 32px);  /* sub-headline serif        */
  --padi-fs-price-xl:  clamp(40px, 5vw,   56px);  /* harga tasting menu        */
  --padi-fs-section:   29px;                      /* judul kategori menu       */

  /* Layout */
  --padi-container:  1240px;
  --padi-gutter:     32px;   /* desktop  */
  --padi-gutter-mob: 16px;   /* <= 1024px */
  --padi-section-y:  clamp(88px, 12vw, 152px);
  --padi-radius:     0;

  /* Motion */
  --padi-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE ---------------------------------------------------- */
body{
  background: var(--padi-green);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-weight: 400;
  scroll-behavior: smooth;
}
a{ color: var(--padi-cream); text-decoration: none; transition: color .25s; }
a:hover{ color: var(--padi-gold); }
::selection{ background: var(--padi-gold); color: var(--padi-green); }

h1,h2,h3,h4,h5,h6{
  font-family: var(--padi-font-display);
  font-weight: 400;
  color: var(--padi-cream);
  margin: 0;
}
.padi-italic{ font-family: var(--padi-font-display); font-style: italic; color: var(--padi-gold); }

/* Semua elemen Elementor tanpa sudut membulat */
.elementor-button,
.elementor-field-group input,
.elementor-field-group select,
.elementor-field-group textarea,
.elementor-widget-image img{ border-radius: var(--padi-radius); }

/* ---------- 3. TIPOGRAFI UTILITY --------------------------------------- */
.padi-eyebrow{                       /* "01 - The Kitchen", "About Us" */
  font-family: var(--padi-font-body);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--padi-cream);
}
.padi-eyebrow--bold{ font-size:12px; font-weight:600; letter-spacing:.3em; }
.padi-nav{ font-size:11.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; }
.padi-topbar{ font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.padi-tag{ font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.padi-tag--boxed{
  display:inline-block; padding:4px 8px 3px;
  font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(224,164,78,.45); color:var(--padi-cream);
}
.padi-display    { font-family:var(--padi-font-display); font-size:var(--padi-fs-hero); line-height:1.16; }
.padi-display--lg{ font-size:var(--padi-fs-hero-lg);    line-height:1.12; }  /* H1 About / Checkout */
.padi-display--l { font-size:var(--padi-fs-display-l);  line-height:1.15; }
.padi-display--s { font-size:var(--padi-fs-display-s);  line-height:1.20; }
.padi-display--m { font-size:var(--padi-fs-display-m);  line-height:1.25; }
.padi-display--sub{ font-size:var(--padi-fs-sub);       line-height:1.35; color:var(--padi-gold); }
.padi-section-title{ font-family:var(--padi-font-display); font-size:var(--padi-fs-section); line-height:1.25; }
.padi-section-rule { width:48px; height:2px; background:var(--padi-gold); margin-top:18px; }
.padi-quote{
  font-family:var(--padi-font-display); font-style:italic;
  font-size:var(--padi-fs-quote); line-height:1.3; color:var(--padi-cream);
}
.padi-body-l{ font-size:17px;   line-height:1.8; }
.padi-body  { font-size:16px;   line-height:1.7; }
.padi-body-s{ font-size:13.5px; line-height:1.6; }
.padi-legal { font-size:12px;   line-height:1.9; letter-spacing:.04em; }
.padi-price { font-family:var(--padi-font-display); font-size:15px; color:var(--padi-gold); white-space:nowrap; }
.padi-price--xl{ font-size:var(--padi-fs-price-xl); line-height:1; }   /* "$68 per person" */
.padi-item-name{ font-family:var(--padi-font-display); font-size:17px; line-height:1.35; }
.padi-gold{ color:var(--padi-gold); }

/* ---------- 4. TOMBOL --------------------------------------------------- */
.padi-btn,
.elementor-button.padi-btn{
  display:inline-block;
  font-family: var(--padi-font-body);
  font-size:11px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  padding:14px 30px;
  border-radius:0; cursor:pointer;
  border:1px solid var(--padi-line-45);
  background:transparent; color:var(--padi-cream);
  transition: background .25s, border-color .25s, color .25s;
}
.padi-btn:hover{ background:var(--padi-gold); border-color:var(--padi-gold); color:var(--padi-green); }

.padi-btn--solid{ background:var(--padi-green);      border-color:var(--padi-green); }
.padi-btn--deep { background:var(--padi-green-deep); border-color:var(--padi-green-deep); }
.padi-btn--fill-green:hover{ background:var(--padi-green); border-color:var(--padi-green); color:var(--padi-cream); }

.padi-btn--chip{                     /* filter kategori di halaman Menu */
  font-size:10.5px; letter-spacing:.24em; padding:11px 18px;
  border-color:var(--padi-line-30);
}
.padi-btn--chip:hover{ background:transparent; border-color:var(--padi-gold); color:var(--padi-gold); }

.padi-btn--sm{                       /* "Add to order" di kartu produk */
  font-size:12px; letter-spacing:.18em; padding:12px 18px;
  border-color:var(--padi-line-35);
}
.padi-btn--sm:hover{ background:var(--padi-green); border-color:var(--padi-green); color:var(--padi-cream); }

.padi-btn--block{                    /* "Place Order" */
  display:block; width:100%; text-align:center;
  font-size:12px; font-weight:600; letter-spacing:.26em; padding:18px 24px;
  background:var(--padi-green-deep); border-color:var(--padi-green-deep);
}
.padi-btn--qty{ width:38px; height:38px; padding:0; font-size:17px; line-height:1; border-color:var(--padi-line-30); }
.padi-btn--qty:hover{ background:transparent; border-color:var(--padi-gold); color:var(--padi-gold); }

.padi-link-arrow{                    /* "Learn More ->" */
  display:inline-block;
  font-family:var(--padi-font-display); font-size:18px; letter-spacing:.12em;
  color:var(--padi-gold); border-bottom:1px solid var(--padi-gold); padding-bottom:4px;
}
.padi-link-arrow:hover{ color:var(--padi-cream); border-color:var(--padi-cream); }

/* ---------- 5. FORM ----------------------------------------------------- */
.padi-label,
.elementor-field-group > label{
  display:block; margin-bottom:8px;
  font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--padi-cream);
}
.padi-field,
.elementor-field-group .elementor-field-textual{
  width:100%; box-sizing:border-box;
  background:var(--padi-green-surface);
  border:1px solid var(--padi-line-35);
  border-radius:0;
  color:var(--padi-cream);
  padding:13px 14px;
  font-family:var(--padi-font-body); font-size:14px;
}
.padi-field:focus,
.elementor-field-group .elementor-field-textual:focus{
  border-color:var(--padi-gold); outline:none; box-shadow:none;
}
.padi-field::placeholder,
.elementor-field-textual::placeholder{ color:rgba(241,234,217,.55); }

/* ---------- 6. KOMPONEN ------------------------------------------------- */
.padi-container{ max-width:var(--padi-container); margin:0 auto; padding-left:var(--padi-gutter); padding-right:var(--padi-gutter); box-sizing:border-box; }
.padi-section{ padding-top:var(--padi-section-y); padding-bottom:var(--padi-section-y); }
.padi-section--alt{ background:var(--padi-green-surface); border-top:1px solid var(--padi-line-12); }
.padi-divider{ border-top:1px solid var(--padi-line-12); }

.padi-card{                          /* kartu menu / produk */
  border:1px solid var(--padi-line-14);
  background:var(--padi-green-surface);
  transition:border-color .25s;
}
.padi-card:hover{ border-color:rgba(224,164,78,.5); }

.padi-leader{ flex:1; border-bottom:1px dotted var(--padi-line-30); }   /* garis titik nama..harga */
.padi-panel{ border:1px solid var(--padi-line-16); background:var(--padi-green-surface); }
.padi-media{ filter:saturate(.94); display:block; width:100%; }
.padi-logo{ filter:brightness(0) invert(.94); display:block; }
.padi-overlay-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--padi-overlay-hero); }
.padi-overlay-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--padi-overlay-card); }

/* ---------- 7. ANIMASI -------------------------------------------------- */
@keyframes padiKenburns{ 0%{transform:scale(1.07)} 100%{transform:scale(1)} }

.padi-kenburns{ animation:padiKenburns 16s ease-out both; }

[data-anim]{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s var(--padi-ease); }
[data-anim][data-anim-in]{ opacity:1; transform:none; }
[data-anim-img]{ overflow:hidden; }
[data-anim-img] > img{ transform:scale(1.09); transition:transform 1.35s var(--padi-ease); }
[data-anim-img][data-anim-in] > img{ transform:scale(1); }


@media (prefers-reduced-motion:reduce){
  [data-anim],[data-anim-img] > img,.padi-kenburns{
    opacity:1!important; transform:none!important; transition:none!important; animation:none!important;
  }
}

/* ---------- 8. RESPONSIVE ----------------------------------------------- */
@media (max-width:1024px){
  .padi-container{ padding-left:var(--padi-gutter-mob); padding-right:var(--padi-gutter-mob); }
  .padi-topbar{ font-size:9.5px; }
  .padi-nav{ font-size:11px; letter-spacing:.2em; }
}
@media (max-width:767px){
  .padi-btn{ padding:13px 24px; }
}