/* === Lonadi Site - Optimized CSS === */

/* Reset */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}
body{margin:0;line-height:inherit;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}
h1,h2,h3,h4,p,ul{margin:0}
ul{list-style:none;padding:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:inherit}
button{font-family:inherit;font-size:100%;line-height:inherit;margin:0;padding:0;cursor:pointer}

/* Layout */
.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline{display:inline}.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}
.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}
.self-start{align-self:flex-start}.self-center{align-self:center}

/* Grid */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.col-span-2{grid-column:span 2/span 2}.row-span-2{grid-row:span 2/span 2}

/* Positioning */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}.top-4{top:16px}.top-16{top:64px}
.bottom-0{bottom:0}.bottom-6{bottom:24px}
.left-0{left:0}.left-4{left:16px}.left-6{left:24px}
.right-4{right:16px}
.z-0{z-index:0}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}

/* Width */
.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}
.w-12{width:48px}.w-px{width:1px}
.min-w-0{min-width:0}.max-w-md{max-width:448px}.max-w-lg{max-width:512px}.max-w-2xl{max-width:672px}.max-w-4xl{max-width:896px}

/* Height */
.h-full{height:100%}.min-h-screen{min-height:100vh}
.h-4{height:16px}.h-8{height:32px}.h-10{height:40px}.h-12{height:48px}.h-14{height:56px}.h-16{height:64px}
.h-48{height:192px}.h-64{height:256px}

/* Spacing */
.m-0{margin:0}.mx-auto{margin-inline:auto}.mt-auto{margin-top:auto}
.mt-0\.5{margin-top:2px}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}.mt-16{margin-top:64px}.mt-20{margin-top:80px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-10{margin-bottom:40px}.mb-12{margin-bottom:48px}.mb-16{margin-bottom:64px}.mb-24{margin-bottom:96px}
.p-0{padding:0}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}
.px-2{padding-inline:8px}.px-3{padding-inline:12px}.px-4{padding-inline:16px}.px-6{padding-inline:24px}.px-8{padding-inline:32px}.px-10{padding-inline:40px}
.py-0\.5{padding-block:2px}.py-1{padding-block:4px}.py-2{padding-block:8px}.py-3{padding-block:12px}.py-4{padding-block:16px}.py-16{padding-block:64px}
.pb-1{padding-bottom:4px}.pb-2{padding-bottom:8px}.pb-16{padding-bottom:64px}.pb-20{padding-bottom:80px}.pb-24{padding-bottom:96px}.pb-32{padding-bottom:128px}
.pt-4{padding-top:16px}.pt-16{padding-top:64px}.pt-20{padding-top:80px}

/* Typography */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-xs{font-size:12px;line-height:16px}.text-sm{font-size:14px;line-height:20px}
.text-base{font-size:16px;line-height:24px}.text-lg{font-size:18px;line-height:28px}
.text-xl{font-size:20px;line-height:28px}.text-2xl{font-size:24px;line-height:32px}
.text-3xl{font-size:30px;line-height:36px}.text-4xl{font-size:36px;line-height:40px}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.font-normal{font-weight:400}
.tracking-tight{letter-spacing:-0.025em}.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}
.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
.uppercase{text-transform:uppercase}
.underline{text-decoration:underline}.no-underline{text-decoration:none}
.whitespace-nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Backgrounds */
.bg-white{background-color:#fff}
.bg-black{background-color:#000}
.bg-transparent{background-color:transparent}
.bg-cover{background-size:cover}.bg-center{background-position:center}

/* Borders */
.border{border-width:1px}.border-2{border-width:2px}
.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}
.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}.rounded-full{border-radius:9999px}
.rounded-l-lg{border-radius:8px 0 0 8px}.rounded-r-lg{border-radius:0 8px 8px 0}.rounded-t-xl{border-radius:12px 12px 0 0}

/* Shadows */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05)}.shadow{box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,0.1)}.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,0.1)}
.shadow-xl{box-shadow:0 20px 25px rgba(0,0,0,0.1)}.shadow-2xl{box-shadow:0 25px 50px rgba(0,0,0,0.15)}

/* Overflow */
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}
.overflow-y-auto{overflow-y:auto}

/* Opacity */
.opacity-0{opacity:0}.opacity-70{opacity:0.7}.opacity-90{opacity:0.9}

/* Transitions */
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.duration-200{transition-duration:200ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}

/* Transforms */
.rotate-180{transform:rotate(180deg)}.scale-105{transform:scale(1.05)}.scale-110{transform:scale(1.1)}

/* Hover */
.hover\:opacity-80:hover{opacity:0.8}.hover\:opacity-90:hover{opacity:0.9}
.hover\:underline:hover{text-decoration:underline}.hover\:scale-110:hover{transform:scale(1.1)}
.hover\:scale-105:hover{transform:scale(1.05)}.hover\:opacity-100:hover{opacity:1}

/* Active */
.active\:scale-90:active{transform:scale(0.9)}.active\:scale-95:active{transform:scale(0.95)}

/* Effects */
.backdrop-blur-md{backdrop-filter:blur(12px)}

/* Custom Lonadi Colors */
:root {
  --lonadi-primary: #f04f23;
  --lonadi-primary-dark: #d93d1a;
  --lonadi-surface: #fff5f0;
  --lonadi-surface-high: #ffe8dd;
  --lonadi-surface-low: #fff9f7;
  --lonadi-surface-dim: #f0e0d8;
  --lonadi-on-surface: #292524;
  --lonadi-on-surface-variant: #44403c;
  --lonadi-outline: #c0b0a8;
  --lonadi-outline-variant: #e0d0c8;
  --lonadi-secondary: #78716c;
  --lonadi-on-primary: #ffffff;
}

.bg-primary{background-color:var(--lonadi-primary)}
.bg-primary\/90{background-color:rgba(240,79,35,0.9)}
.bg-primary-container{background-color:var(--lonadi-primary-dark)}
.bg-primary-fixed{background-color:var(--lonadi-surface-high)}
.bg-primary-fixed\/30{background-color:rgba(255,232,221,0.5)}
.bg-primary-fixed-dim{background-color:#ffc4a8}
.bg-on-primary-container\/20{background-color:rgba(255,255,255,0.2)}
.bg-secondary{background-color:var(--lonadi-secondary)}
.bg-secondary-container{background-color:#d6d3d1}
.bg-secondary-container\/30{background-color:rgba(214,211,209,0.3)}
.bg-secondary-fixed{background-color:#e7e5e4}
.bg-secondary-fixed-dim{background-color:#a8a29e}
.bg-surface{background-color:var(--lonadi-surface)}
.bg-surface\/95{background-color:rgba(255,245,240,0.95)}
.bg-surface-container{background-color:var(--lonadi-surface-high)}
.bg-surface-container-high{background-color:var(--lonadi-surface-high)}
.bg-surface-container-low{background-color:var(--lonadi-surface-low)}
.bg-surface-container-lowest{background-color:#fff}
.bg-surface-dim{background-color:var(--lonadi-surface-dim)}
.bg-outline-variant\/30{background-color:rgba(224,208,200,0.3)}
.bg-background{background-color:var(--lonadi-surface)}
.bg-background\/95{background-color:rgba(255,245,240,0.95)}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-black\/40{--tw-gradient-from:rgba(0,0,0,0.4);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,0) var(--tw-gradient-to,transparent)}
.from-on-surface\/80{--tw-gradient-from:rgba(41,37,36,0.8);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,0)}
.via-on-surface\/20{--tw-gradient-stops:var(--tw-gradient-from),rgba(41,37,36,0.2),var(--tw-gradient-to,transparent)}
.via-transparent{--tw-gradient-stops:var(--tw-gradient-from),transparent,var(--tw-gradient-to,transparent)}
.to-transparent{--tw-gradient-to:transparent}

.text-white{color:#fff}
.text-primary{color:var(--lonadi-primary)}
.text-on-primary{color:var(--lonadi-on-primary)}
.text-on-primary-container{color:#fff}
.text-on-primary-container\/90{color:rgba(255,255,255,0.9)}
.text-on-secondary{color:#fff}
.text-on-secondary-container{color:var(--lonadi-on-surface)}
.text-on-surface{color:var(--lonadi-on-surface)}
.text-on-surface-variant{color:var(--lonadi-on-surface-variant)}
.text-on-background{color:var(--lonadi-on-surface)}
.text-secondary{color:var(--lonadi-secondary)}

.border-primary{border-color:var(--lonadi-primary)}
.border-primary\/20{border-color:rgba(240,79,35,0.2)}
.border-secondary{border-color:var(--lonadi-secondary)}
.border-outline-variant\/10{border-color:rgba(224,208,200,0.1)}
.border-outline-variant\/30{border-color:rgba(224,208,200,0.3)}
.border-on-primary-container\/40{border-color:rgba(255,255,255,0.4)}

/* Custom font classes */
.font-headline-xl{font-family:'Playfair Display',serif;font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.font-headline-xl-mobile{font-family:'Playfair Display',serif;font-size:36px;line-height:1.2;font-weight:700}
.font-headline-lg{font-family:'Playfair Display',serif;font-size:32px;line-height:1.2;font-weight:700}
.font-headline-md{font-family:'Playfair Display',serif;font-size:24px;line-height:1.3;font-weight:600}
.font-body-lg{font-family:Montserrat,sans-serif;font-size:18px;line-height:1.6;font-weight:400}
.font-body-md{font-family:Montserrat,sans-serif;font-size:16px;line-height:1.6;font-weight:400}
.font-label-md{font-family:Montserrat,sans-serif;font-size:14px;line-height:1.2;font-weight:600;letter-spacing:0.05em}
.font-label-sm{font-family:Montserrat,sans-serif;font-size:12px;line-height:1.2;font-weight:500}
.font-headline-lg-mobile{font-family:'Playfair Display',serif;font-size:28px;line-height:1.2;font-weight:700}

/* Text size aliases */
.text-headline-xl{font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-0.02em}
.text-headline-xl-mobile{font-size:36px;line-height:1.2;font-weight:700}
.text-headline-lg{font-size:32px;line-height:1.2;font-weight:700}
.text-headline-md{font-size:24px;line-height:1.3;font-weight:600}
.text-headline-lg-mobile{font-size:28px;line-height:1.2;font-weight:700}
.text-body-lg{font-size:18px;line-height:1.6;font-weight:400}
.text-body-md{font-size:16px;line-height:1.6;font-weight:400}
.text-label-md{font-size:14px;line-height:1.2;font-weight:600;letter-spacing:0.05em}
.text-label-sm{font-size:12px;line-height:1.2;font-weight:500}

/* Spacing system */
.px-margin-mobile{padding-inline:16px}
.py-base{padding-block:8px}
.gap-gutter{gap:20px}
.-mx-margin-mobile{margin-inline:-16px}
.max-w-container-max{max-width:1200px}

/* Bottom nav shadow */
.shadow-\[0_-2px_10px_rgba\(45\,41\,38\,0\.08\)\]{box-shadow:0 -2px 10px rgba(45,41,38,0.08)}

/* Hide scrollbar */
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.hide-scrollbar::-webkit-scrollbar{display:none}

/* Object fit */
.object-cover{object-fit:cover}
.aspect-square{aspect-ratio:1}

/* Snapping */
.snap-x{scroll-snap-type:x mandatory}
.snap-start{scroll-snap-align:start}

/* Pointer events */
.pointer-events-none{pointer-events:none}

/* Selection */
.selection\:\!bg-primary-fixed ::selection,::selection{background-color:var(--lonadi-surface-high)!important}
.selection\:\!text-on-primary-fixed ::selection,::selection{color:var(--lonadi-primary-dark)!important}

/* Responsive: md breakpoint (768px) */
@media(min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:block{display:block}
  .md\:w-2\/5{width:40%}
  .md\:w-3\/5{width:60%}
  .md\:h-full{height:100%}
  .md\:h-80{height:320px}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:gap-12{gap:48px}
  .md\:max-w-md{max-width:448px}
  .md\:left-1\/2{left:50%}
  .md\:-translate-x-1\/2{transform:translateX(-50%)}
  .md\:mb-4{margin-bottom:16px}
  .md\:pb-32{padding-bottom:128px}
  .md\:px-margin-desktop{padding-inline:40px}
  .md\:rounded-full{border-radius:9999px}
  .md\:shadow-2xl{box-shadow:0 25px 50px rgba(0,0,0,0.15)}
  .md\:font-headline-xl{font-family:'Playfair Display',serif}
  .md\:font-headline-lg{font-family:'Playfair Display',serif}
  .md\:text-headline-xl{font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-0.02em}
  .md\:text-headline-lg{font-size:32px;line-height:1.2;font-weight:700}
  .md\:auto-rows-\[250px\]{grid-auto-rows:250px}
}

/* Responsive: lg breakpoint (1024px) */
@media(min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-5{grid-column:span 5/span 5}
  .lg\:col-span-7{grid-column:span 7/span 7}
  .lg\:h-96{height:384px}
}

/* Material symbols */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;font-size:24px;line-height:1;display:inline-block;vertical-align:middle}

/* Print */
@media print {
  header, nav, footer { display: none !important; }
  body { background: white !important; }
}

/* Dark mode */
@media(prefers-color-scheme:dark){
  .dark\:bg-on-surface{background-color:#292524}
  .dark\:bg-surface-container-highest{background-color:#44403c}
  .dark\:bg-surface-dim{background-color:#383430}
  .dark\:bg-secondary-fixed-dim{background-color:#a8a29e}
  .dark\:text-on-secondary-fixed{color:#1c1917}
  .dark\:text-outline-variant{color:#e0d0c8}
  .dark\:text-white-fixed{color:#fff}
}

/* Animations */
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-25%)}}
.animate-bounce{animation:bounce 1s infinite}

/* Bottom Navigation */
nav.fixed.bottom-0 a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-radius: 16px;
}
nav.fixed.bottom-0 a.nav-active,
nav.fixed.bottom-0 a:hover {
    color: #fff;
    background: rgba(255,255,255,0.18);
}