/*
Theme Name: Elad David Portfolio
Theme URI: https://example.local/
Author: ChatGPT
Description: WordPress starter theme generated from the Elad David HTML prototype. Static header/footer and page templates ready for ACF and custom queries.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: elad-david
*/

/* Prototype styles: about_elad_david */
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        body {
            background-color: #f9f9f9;
            color: #1a1c1c;
        }
        .reveal-content {
            opacity: 0;
            transform: translateY(20px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-content.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Prototype styles: contact_elad_david */
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
            font-size: 20px;
        }
        body {
            cursor: crosshair;
        }
        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus,
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover,
        textarea:-webkit-autofill:focus {
            -webkit-text-fill-color: #000000;
            -webkit-box-shadow: 0 0 0px 1000px #f9f9f9 inset;
            transition: background-color 5000s ease-in-out 0s;
        }
        .fade-in {
            animation: fadeIn 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        }
        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

/* Prototype styles: galleries_elad_david_1 */
body {
            background-color: #f9f9f9;
            color: #1a1c1c;
            -webkit-font-smoothing: antialiased;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .gallery-card:hover img {
            transform: scale(1.02);
        }
        .gallery-card img {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        ::-webkit-scrollbar {
            width: 4px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #e2e2e2;
        }

/* Prototype styles: galleries_elad_david_2 */
body {
            background-color: #f9f9f9;
            color: #1a1c1c;
            -webkit-font-smoothing: antialiased;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .gallery-card:hover img {
            transform: scale(1.02);
        }
        .gallery-card img {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        ::-webkit-scrollbar {
            width: 4px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #e2e2e2;
        }

        /* Lightbox specific styles */
        #lightbox-overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        #lightbox-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

/* Prototype styles: home_elad_david */
body {
            background-color: #f9f9f9;
            color: #000000;
            overflow-x: hidden;
        }
        
        /* Smooth transitions for the "Invisible Interface" */
        .fade-in {
            animation: fadeIn 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        }

        @keyframes fadeIn {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
            font-size: 20px;
        }

        /* Hide scrollbar but keep functionality */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Prototype styles: landscapes_elad_david_1 */
body {
            background-color: #f9f9f9;
            color: #1a1c1c;
            -webkit-font-smoothing: antialiased;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .gallery-image-container {
            overflow: hidden;
            background-color: #eeeeee;
        }
        .gallery-image-container img {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .gallery-image-container:hover img {
            transform: scale(1.05);
        }
        .lightbox-overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .lightbox-active .lightbox-overlay {
            opacity: 1;
            pointer-events: auto;
        }

/* Prototype styles: landscapes_elad_david_2 */
body {
            background-color: #f9f9f9;
            color: #1a1c1c;
            -webkit-font-smoothing: antialiased;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .gallery-image-container {
            overflow: hidden;
            background-color: #eeeeee;
        }
        .gallery-image-container img {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .gallery-image-container:hover img {
            transform: scale(1.05);
        }
        .lightbox-overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
            backdrop-filter: blur(8px);
        }
        .lightbox-active .lightbox-overlay {
            opacity: 1;
            pointer-events: auto;
        }


/* WordPress/admin niceties */
html { scroll-behavior: smooth; }
body.admin-bar .site-mobile-header,
body.admin-bar .site-sidebar,
body.admin-bar .site-mobile-menu { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-mobile-header,
  body.admin-bar .site-sidebar,
  body.admin-bar .site-mobile-menu { top: 46px; }
}
.site-sidebar a[aria-current="page"] {
  color: #000000;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* WordPress conversion fixes / Tailwind CDN fallback
   The prototype relies on custom Tailwind tokens. In WordPress, enqueue order or CDN timing can
   leave those tokens uncompiled, so the key custom utilities are backed up here. */
:root {
  --ed-surface: #f9f9f9;
  --ed-primary: #000000;
  --ed-secondary: #5e5e5e;
  --ed-outline: #7e7576;
  --ed-outline-variant: #cfc4c5;
  --ed-surface-container: #eeeeee;
  --ed-surface-container-high: #e8e8e8;
  --ed-on-surface: #1a1c1c;
  --ed-on-surface-variant: #4c4546;
  --ed-on-primary: #ffffff;
  --ed-sidebar-width: 280px;
  --ed-mobile-margin: 24px;
  --ed-desktop-margin: 80px;
  --ed-section-gap: 160px;
  --ed-gutter: 40px;
  --ed-container-max: 1600px;
}

html { background: var(--ed-surface); }
body { margin: 0; background: var(--ed-surface); color: var(--ed-on-surface); }
body > main { background: var(--ed-surface); }

/* Custom colors used by the exported prototype. */
.bg-surface { background-color: var(--ed-surface) !important; }
.bg-surface\/90 { background-color: rgba(249,249,249,.9) !important; }
.bg-surface-container { background-color: var(--ed-surface-container) !important; }
.bg-surface-container-high { background-color: var(--ed-surface-container-high) !important; }
.bg-primary { background-color: var(--ed-primary) !important; }
.bg-primary\/10 { background-color: rgba(0,0,0,.1) !important; }
.text-primary { color: var(--ed-primary) !important; }
.text-secondary { color: var(--ed-secondary) !important; }
.text-surface { color: var(--ed-surface) !important; }
.text-outline { color: var(--ed-outline) !important; }
.text-on-primary { color: var(--ed-on-primary) !important; }
.text-on-surface-variant { color: var(--ed-on-surface-variant) !important; }
.text-on-surface\/60 { color: rgba(26,28,28,.6) !important; }
.border-outline-variant { border-color: var(--ed-outline-variant) !important; }
.border-outline-variant\/30 { border-color: rgba(207,196,197,.3) !important; }
.border-primary { border-color: var(--ed-primary) !important; }
.hover\:text-primary:hover { color: var(--ed-primary) !important; }
.hover\:bg-on-surface-variant:hover { background-color: var(--ed-on-surface-variant) !important; }
.placeholder\:text-outline::placeholder { color: var(--ed-outline) !important; }
.placeholder\:text-secondary\/30::placeholder { color: rgba(94,94,94,.3) !important; }
.group:focus-within .group-focus-within\:text-primary { color: var(--ed-primary) !important; }

/* Custom font families and sizes from the prototype Tailwind config. */
.font-display-xl,
.font-display-xl-mobile,
.font-headline-lg,
.font-headline-lg-mobile,
.font-headline-md { font-family: "Playfair Display", serif !important; }
.font-body-md,
.font-body-lg,
.font-nav-link,
.font-label-caps { font-family: "Inter", sans-serif !important; }
.text-display-xl { font-size: 80px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; font-weight: 400 !important; }
.text-display-xl-mobile { font-size: 48px !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; font-weight: 400 !important; }
.text-headline-lg { font-size: 40px !important; line-height: 1.2 !important; font-weight: 400 !important; }
.text-headline-lg-mobile { font-size: 32px !important; line-height: 1.2 !important; font-weight: 400 !important; }
.text-headline-md { font-size: 24px !important; line-height: 1.3 !important; font-weight: 400 !important; }
.text-body-md { font-size: 16px !important; line-height: 1.6 !important; font-weight: 400 !important; }
.text-body-lg { font-size: 18px !important; line-height: 1.6 !important; letter-spacing: -0.01em !important; font-weight: 300 !important; }
.text-nav-link { font-size: 14px !important; line-height: 1 !important; letter-spacing: 0.02em !important; font-weight: 400 !important; }
.text-label-caps { font-size: 12px !important; line-height: 1 !important; letter-spacing: 0.1em !important; font-weight: 600 !important; }
.font-label-caps { font-size: 12px; line-height: 1; letter-spacing: .1em; font-weight: 600; text-transform: uppercase; }

/* Custom spacing tokens. */
.w-sidebar-width { width: var(--ed-sidebar-width) !important; }
.p-margin-desktop { padding: var(--ed-desktop-margin) !important; }
.px-margin-mobile { padding-left: var(--ed-mobile-margin) !important; padding-right: var(--ed-mobile-margin) !important; }
.left-margin-mobile { left: var(--ed-mobile-margin) !important; }
.bottom-margin-mobile { bottom: var(--ed-mobile-margin) !important; }
.py-section-gap { padding-top: var(--ed-section-gap) !important; padding-bottom: var(--ed-section-gap) !important; }
.pb-section-gap { padding-bottom: var(--ed-section-gap) !important; }
.mt-section-gap { margin-top: var(--ed-section-gap) !important; }
.max-w-container-max { max-width: var(--ed-container-max) !important; }
.gap-x-gutter { column-gap: var(--ed-gutter) !important; }

/* Layout guardrails for the fixed sidebar + content canvas. */
.site-sidebar { width: var(--ed-sidebar-width) !important; padding: var(--ed-desktop-margin) !important; box-sizing: border-box; }
.site-footer { box-sizing: border-box; }

@media (min-width: 768px) {
  body > main { margin-left: var(--ed-sidebar-width) !important; }
  .site-footer { margin-left: var(--ed-sidebar-width) !important; width: calc(100% - var(--ed-sidebar-width)) !important; }
  .md\:ml-sidebar-width { margin-left: var(--ed-sidebar-width) !important; }
  .md\:px-margin-desktop { padding-left: var(--ed-desktop-margin) !important; padding-right: var(--ed-desktop-margin) !important; }
  .md\:pt-margin-desktop { padding-top: var(--ed-desktop-margin) !important; }
  .md\:left-margin-desktop { left: var(--ed-desktop-margin) !important; }
  .md\:right-margin-desktop { right: var(--ed-desktop-margin) !important; }
  .md\:bottom-margin-desktop { bottom: var(--ed-desktop-margin) !important; }
  .md\:gap-gutter { gap: var(--ed-gutter) !important; }
  .md\:text-display-xl { font-size: 80px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; font-weight: 400 !important; }
  .md\:text-headline-lg { font-size: 40px !important; line-height: 1.2 !important; font-weight: 400 !important; }
  .md\:font-display-xl { font-family: "Playfair Display", serif !important; }
}

@media (max-width: 767px) {
  body > main { margin-left: 0 !important; padding-top: 88px; }
  .site-footer { margin-left: 0 !important; width: 100% !important; }
}