/*
Theme Name: Tuttireal
Theme URI: https://tuttireal.com
Author: Appledill
Author URI: https://appledill.com
Description: Modern Mobile-First Multi-Vendor Marketplace Theme powered by Appledill Framework
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tuttireal
Tags: e-commerce, woocommerce, multivendor, marketplace, responsive, mobile-first, elementor
*/

/* ============================================================
   Appledill Framework v1.0 – CSS Custom Properties
   @package Tuttireal
   @since Tuttireal 1.0
   ============================================================ */

:root {
  /* Brand Colors */
  --tr-color-primary:        #e76f51;
  --tr-color-primary-dark:   #c9562f;
  --tr-color-primary-light:  #f4a287;
  --tr-color-secondary:      #264653;
  --tr-color-secondary-dark: #1a3240;
  --tr-color-accent:         #2a9d8f;
  --tr-color-accent-light:   #3dbfb0;

  /* Surface & Text */
  --tr-color-surface:        #ffffff;
  --tr-color-surface-alt:    #f8f9fa;
  --tr-color-surface-raised: #ffffff;
  --tr-color-text:           #212529;
  --tr-color-text-muted:     #6c757d;
  --tr-color-text-inverse:   #ffffff;
  --tr-color-border:         #dee2e6;
  --tr-color-border-light:   #f0f0f0;

  /* Semantic */
  --tr-color-success:        #27ae60;
  --tr-color-warning:        #f39c12;
  --tr-color-error:          #e74c3c;
  --tr-color-info:           #3498db;

  /* Typography */
  --tr-font-base:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tr-font-heading: 'Inter', system-ui, sans-serif;
  --tr-font-mono:    'Fira Code', ui-monospace, monospace;

  /* Fluid Font Scale */
  --tr-font-size-xs:   clamp(0.70rem,  1.2vw, 0.80rem);
  --tr-font-size-sm:   clamp(0.85rem,  1.5vw, 0.95rem);
  --tr-font-size-base: clamp(0.95rem,  1.8vw, 1.05rem);
  --tr-font-size-md:   clamp(1.05rem,  2.0vw, 1.15rem);
  --tr-font-size-lg:   clamp(1.15rem,  2.2vw, 1.30rem);
  --tr-font-size-xl:   clamp(1.40rem,  2.8vw, 1.75rem);
  --tr-font-size-2xl:  clamp(1.75rem,  3.5vw, 2.25rem);
  --tr-font-size-3xl:  clamp(2.25rem,  4.5vw, 3.00rem);

  /* Line Height */
  --tr-line-height-tight:  1.2;
  --tr-line-height-snug:   1.4;
  --tr-line-height-base:   1.6;
  --tr-line-height-loose:  1.8;

  /* Spacing Scale (8px base) */
  --tr-spacing-1:   0.25rem;   /* 4px  */
  --tr-spacing-2:   0.50rem;   /* 8px  */
  --tr-spacing-3:   0.75rem;   /* 12px */
  --tr-spacing-4:   1.00rem;   /* 16px */
  --tr-spacing-5:   1.25rem;   /* 20px */
  --tr-spacing-6:   1.50rem;   /* 24px */
  --tr-spacing-8:   2.00rem;   /* 32px */
  --tr-spacing-10:  2.50rem;   /* 40px */
  --tr-spacing-12:  3.00rem;   /* 48px */
  --tr-spacing-16:  4.00rem;   /* 64px */
  --tr-spacing-20:  5.00rem;   /* 80px */

  /* Border Radius */
  --tr-radius-sm:   4px;
  --tr-radius:      8px;
  --tr-radius-lg:   14px;
  --tr-radius-xl:   22px;
  --tr-radius-pill: 9999px;
  --tr-radius-full: 50%;

  /* Shadows */
  --tr-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --tr-shadow:      0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --tr-shadow-lg:   0 10px 40px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);
  --tr-shadow-xl:   0 20px 60px rgba(0,0,0,.18);
  --tr-shadow-inset:inset 0 2px 4px rgba(0,0,0,.06);

  /* Layout */
  --tr-container:         min(1280px, 100% - 2rem);
  --tr-container-wide:    min(1440px, 100% - 2rem);
  --tr-container-narrow:  min(760px,  100% - 2rem);
  --tr-header-height:     64px;
  --tr-sidebar-width:     300px;
  --tr-grid-gap:          var(--tr-spacing-6);

  /* Transitions */
  --tr-transition-fast:   0.12s ease;
  --tr-transition:        0.22s ease;
  --tr-transition-slow:   0.40s ease;

  /* Z-index Scale */
  --tr-z-base:      1;
  --tr-z-dropdown:  100;
  --tr-z-sticky:    200;
  --tr-z-overlay:   300;
  --tr-z-modal:     400;
  --tr-z-toast:     500;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --tr-color-surface:        #1a1a2e;
    --tr-color-surface-alt:    #16213e;
    --tr-color-surface-raised: #0f3460;
    --tr-color-text:           #e8eaf0;
    --tr-color-text-muted:     #9aa5b4;
    --tr-color-border:         #2d3748;
    --tr-color-border-light:   #1e2535;
  }
}

/* ============================================================
   Modern Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--tr-font-base);
  font-size: var(--tr-font-size-base);
  line-height: var(--tr-line-height-base);
  color: var(--tr-color-text);
  background-color: var(--tr-color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button { cursor: pointer; border: none; background: none; }

a { color: var(--tr-color-primary); text-decoration: none; transition: color var(--tr-transition-fast); }
a:hover { color: var(--tr-color-primary-dark); }

p { margin-bottom: var(--tr-spacing-4); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tr-font-heading);
  font-weight: 700;
  line-height: var(--tr-line-height-tight);
  color: var(--tr-color-secondary);
  margin-bottom: var(--tr-spacing-4);
}
h1 { font-size: var(--tr-font-size-3xl); }
h2 { font-size: var(--tr-font-size-2xl); }
h3 { font-size: var(--tr-font-size-xl); }
h4 { font-size: var(--tr-font-size-lg); }
h5 { font-size: var(--tr-font-size-md); }
h6 { font-size: var(--tr-font-size-base); }

ul, ol { padding-left: var(--tr-spacing-6); margin-bottom: var(--tr-spacing-4); }
li { margin-bottom: var(--tr-spacing-1); }

blockquote {
  border-left: 4px solid var(--tr-color-primary);
  padding: var(--tr-spacing-4) var(--tr-spacing-6);
  margin: var(--tr-spacing-6) 0;
  background: var(--tr-color-surface-alt);
  border-radius: 0 var(--tr-radius) var(--tr-radius) 0;
  font-style: italic;
  color: var(--tr-color-text-muted);
}

code, pre {
  font-family: var(--tr-font-mono);
  font-size: 0.9em;
}
code {
  background: var(--tr-color-surface-alt);
  padding: 0.1em 0.4em;
  border-radius: var(--tr-radius-sm);
}
pre {
  background: var(--tr-color-secondary);
  color: #f8f9fa;
  padding: var(--tr-spacing-4) var(--tr-spacing-6);
  border-radius: var(--tr-radius);
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

hr {
  border: none;
  border-top: 1px solid var(--tr-color-border);
  margin: var(--tr-spacing-8) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--tr-spacing-6);
}
th, td {
  padding: var(--tr-spacing-3) var(--tr-spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--tr-color-border);
}
th {
  font-weight: 600;
  background: var(--tr-color-surface-alt);
  color: var(--tr-color-secondary);
}
tr:hover td { background: var(--tr-color-surface-alt); }

/* ============================================================
   Layout Utilities
   ============================================================ */
.tr-container { width: var(--tr-container); margin-inline: auto; }
.tr-container-wide { width: var(--tr-container-wide); margin-inline: auto; }
.tr-container-narrow { width: var(--tr-container-narrow); margin-inline: auto; }

.tr-grid {
  display: grid;
  gap: var(--tr-grid-gap);
}
.tr-grid-2 { grid-template-columns: repeat(1, 1fr); }
.tr-grid-3 { grid-template-columns: repeat(1, 1fr); }
.tr-grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .tr-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .tr-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tr-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .tr-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tr-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.tr-flex { display: flex; }
.tr-flex-center { display: flex; align-items: center; justify-content: center; }
.tr-flex-between { display: flex; align-items: center; justify-content: space-between; }
.tr-flex-col { display: flex; flex-direction: column; }
.tr-flex-wrap { flex-wrap: wrap; }
.tr-gap-2 { gap: var(--tr-spacing-2); }
.tr-gap-4 { gap: var(--tr-spacing-4); }
.tr-gap-6 { gap: var(--tr-spacing-6); }

/* ============================================================
   Accessibility
   ============================================================ */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--tr-color-primary);
  clip: auto !important;
  color: var(--tr-color-text-inverse);
  display: block;
  font-size: var(--tr-font-size-sm);
  font-weight: 700;
  height: auto;
  left: 8px;
  padding: 12px 24px;
  top: 8px;
  width: auto;
  z-index: 100000;
  border-radius: var(--tr-radius);
}

:focus-visible {
  outline: 3px solid var(--tr-color-primary);
  outline-offset: 2px;
}

/* ============================================================
   Alignment
   ============================================================ */
.alignleft  { float: left; margin: 0 var(--tr-spacing-6) var(--tr-spacing-4) 0; }
.alignright { float: right; margin: 0 0 var(--tr-spacing-4) var(--tr-spacing-6); }
.aligncenter, div.aligncenter { display: block; margin: 0 auto var(--tr-spacing-4); }
.alignnone  { margin: 0 var(--tr-spacing-4) var(--tr-spacing-4) 0; }

/* ============================================================
   Sticky / Clearfix
   ============================================================ */
.sticky { position: sticky; top: 0; }
.clearfix::after { content: ''; display: block; clear: both; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery {
  display: grid;
  gap: var(--tr-spacing-2);
  margin-bottom: var(--tr-spacing-6);
}
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) {
  .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
  .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
  .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
}

.gallery-item { overflow: hidden; border-radius: var(--tr-radius-sm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-transition); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  font-size: var(--tr-font-size-xs);
  color: var(--tr-color-text-muted);
  padding: var(--tr-spacing-2);
  text-align: center;
}