/*
Theme Name: OneLoveDAO V2
Author: One Love
Description: A custom theme for the One Love Art DAO website.
Version: 2.0
Tags: one-column, two-columns, custom-background, custom-logo, featured-images
Text Domain: onelovedaov2
*/

:root {
        --font-primary: 'Jost', sans-serif;
        --transition-speed: 0.3s;
        --nav-height: 60px; 
        --color-text: #ffffff;
        --color-background: #0d0d0d;
        --color-section-background: rgba(0, 0, 0, 0.65); 
        --color-primary: #ff2727;
        --color-secondary: #007cba;
        --color-cta-background: var(--color-section-background);
        --color-cta-button: #ff2727;
        --color-cta-button-hover: #e60000;
        --color-overlay: rgba(0, 0, 0, 0.6);
        --color-border: rgba(255,255,255,0.2);
        --color-footer-background: rgba(0, 0, 0, 0.6);
        --color-shadow: rgba(0,0,0,0.3);
        --particles-color: #ffffff; 
        --hearts-color: rgba(255, 39, 39, 0.8); 
        --nav-background: rgba(34, 34, 34, 0.95); 
      }

      :root.light-theme {
        --color-text: #2c3e50;
        --color-background: #f4f4f4;
        --color-section-background: rgba(224, 224, 224, 0.9); 
        --color-primary: #d9534f;
        --color-secondary: #5bc0de;
        --color-overlay: rgba(255, 255, 255, 0.8);
        --color-border: #cccccc;
        --color-shadow: rgba(0, 0, 0, 0.1);
        --particles-color: #ff0000; 
        --hearts-color: rgba(0, 0, 0, 0.8); 
        --nav-background: #f0f0f0; 
      }

      *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
      html { scroll-behavior: smooth; font-size: 16px; }
      body {
        font-family: var(--font-primary);
        background-color: var(--color-background);
        color: var(--color-text);
        overflow-x: hidden;
        transition: background-color var(--transition-speed), color var(--transition-speed);
        /* No body padding-top needed as #rectangle will have margin-top */
      }

      .parallax {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: url("https://onelovedao.org/wp-content/uploads/2024/10/Residency-BG.jpg") no-repeat center center fixed;
        background-size: cover; z-index: -3;
      }

      
      #rectangle {
        margin-top: var(--nav-height); 
        width: 100%;
        height: 55vh; 
        background-color: var(--color-section-background);
        border-top: 3px solid var(--color-primary);
        border-bottom: 3px solid var(--color-primary);
        z-index: 0; /* Stacking context for its children */
        overflow: hidden;
        transition: height var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed);
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        position: relative; 
      }

      #particles-js,
      #hearts-canvas { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 0; /* Above #rectangle's background, below .hero content */
      }


/* Navigation Bar Styling */
      nav {
        position: fixed;
        top: 0px;
        width: 100%;
        background: var(--nav-background);
        padding: 0px 20px;
        z-index: 2000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        transition: background-color var(--transition-speed), box-shadow var(--transition-speed), padding var(--transition-speed);
      }

      nav.scrolled {
        background: rgba(34, 34, 34, 1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
      }

      /* Logo Styling */
      nav .logo {
        display: flex;
        align-items: center;
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--color-text);
        text-decoration: none;
      }
      /* Navigation Links */
      nav .menu {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      nav .menu a {
        color: var(--color-text);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        position: relative;
        transition: color var(--transition-speed);
      }

      nav .menu a:hover {
        color: var(--color-primary);
      }

      /* Dropdown Menu */
      nav .dropdown {
        position: relative;
        
      }

      nav .dropdown-toggle {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: var(--color-text);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: color var(--transition-speed);
      }

      nav .dropdown-toggle:hover {
        color: var(--color-primary);
      }

      nav .dropdown-toggle i {
        margin-left: 5px;
        transition: transform var(--transition-speed);
      }

      nav .dropdown.open .dropdown-toggle i {
        transform: rotate(180deg);
      }

      nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--nav-background);
        border-radius: 5px;
        overflow: hidden;
        display: none;
        flex-direction: column;
        min-width: 200px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        transition: opacity var(--transition-speed), visibility var(--transition-speed);
        opacity: 1;
        visibility: hidden;
      }

      nav .dropdown.open .dropdown-menu {
        display: flex;
        opacity: 1;
        visibility: visible;
      }

      nav .dropdown-menu a {
        padding: 10px 15px;
        color: var(--color-text);
        text-decoration: none;
        font-size: 0.95rem;
        transition: background-color var(--transition-speed), color var(--transition-speed);
      }

      nav .dropdown-menu a:hover {
        background-color: var(--color-primary);
        color: #fff;
      }

      /* Theme Toggle Styling */
      .theme-toggle {
        margin-left: 20px;
        display: flex;
        align-items: center;
      }

      .theme-toggle input[type='checkbox'] {
        display: none;
      }

      .theme-toggle label {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px; /* Increased width */
        height: 25px; /* Increased height */
        background-color: var(--color-overlay);
        border-radius: 25px;
        position: relative;
        transition: background-color var(--transition-speed);
      }

      .theme-toggle label::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        background-color: var(--color-text);
        border-radius: 50%;
        transition: transform var(--transition-speed), background-color var(--transition-speed);
      }

      .theme-toggle input[type='checkbox']:checked + label {
        background-color: var(--color-primary);
      }

      .theme-toggle input[type='checkbox']:checked + label::after {
        transform: translateX(25px); /* Adjusted for increased width */
        background-color: #fff;
      }

      .theme-toggle label i {
        position: absolute;
        font-size: 12px;
        color: #f1c40f; /* Bright color for visibility */
      }

      .theme-toggle label .fa-moon {
        left: 5px;
      }

      .theme-toggle label .fa-sun {
        right: 5px;
      }

      /* Hamburger Menu Styling */
      .hamburger {
        display: none; /* Hidden on large screens */
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 20px;
        cursor: pointer;
        z-index: 2001; /* Above the nav */
      }

      .hamburger div {
        width: 100%;
        height: 3px;
        background-color: var(--color-text);
        transition: transform var(--transition-speed), opacity var(--transition-speed);
      }

      /* Hamburger Animation when Open */
      .hamburger.open div:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      .hamburger.open div:nth-child(2) {
        opacity: 0;
      }

      .hamburger.open div:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }

      /* Responsive Navigation */
      @media (max-width: 768px) {
        nav {
          padding: 15px 20px;
        }

        /* Show hamburger on small screens */
        .hamburger {
          display: flex;
        }

        /* Hide menu by default on small screens */
        nav .menu {
          position: fixed;
          top: 60px;
          right: 0;
          height: calc(100vh - 60px);
          width: 250px;
          background: var(--nav-background);
          flex-direction: column;
          align-items: flex-start;
          padding-top: 20px;
          transform: translateX(100%);
          transition: transform var(--transition-speed);
          gap: 20px;
          overflow-y: auto;
        }

        /* Slide in menu when open */
        nav .menu.open {
          transform: translateX(0);
        }

        /* Navigation links in the menu */
        nav .menu a,
        nav .menu .dropdown-toggle {
          padding: 10px 20px;
          width: 100%;
          font-size: 1.1rem;
        }

        /* Dropdown menu adjustments for mobile */
        nav .dropdown-menu {
          position: static;
          top: auto;
          left: auto;
          background: var(--nav-background);
          box-shadow: none;
          opacity: 1;
          visibility: visible;
          display: none;
          flex-direction: column;
          width: 100%;
        }

        nav .dropdown.open .dropdown-menu {
          display: flex;
        }

        nav .dropdown-menu a {
          padding-left: 20px;
          font-size: 1rem;
        }
      }



    @media (max-width: 768px) { /* Keep existing general responsive styles outside the new nav block */
      /* html { font-size: 14px; } /* This was duplicated, ensure it's defined once */
      nav .logo { font-size: 1.5rem; } /* This was in your original CSS */
    }


    @media (max-width: 480px) {
      html { font-size: 14px; } /* Your original CSS had 14px then 13px, consolidating */
      nav .logo { font-size: 1.3rem; }
      footer p { font-size: 0.8rem; }
    }

      #rectangle > .hero { 
          padding: 0; 
          margin: 0; 
          width: 100%; 
          height: 100%;
          position: relative; 
          z-index: 1; /* Above particles/hearts */
          display: flex; 
          justify-content: center;
          align-items: center;
      }
      #rectangle .central-image { 
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; 
        height: 100%; 
        padding: 20px; 
        box-sizing: border-box;
      }
      #rectangle .central-image img#central-image {
        max-width: 300px; /* Default size for image in rectangle */
        height: auto;
        border-radius: 8px; 
        transition: transform var(--transition-speed), max-width var(--transition-speed);
        object-fit: contain; 
      }
      #rectangle .central-image img#central-image:hover { 
        transform: scale(1.05);
      }
   
    /* Responsive adjustments for hero section */
    @media (max-width: 768px) {
        #rectangle {
            height: 45vh; /* Reduced height */
            min-height: 300px; /* Ensure it doesn't get too small */
        }
        #rectangle .central-image img#central-image {
            max-width: 260px; /* Slightly smaller image */
        }
    }
    @media (max-width: 480px) {
        #rectangle {
            height: 40vh; /* Further reduced height */
            min-height: 250px;
        }
        #rectangle .central-image img#central-image {
            max-width: 220px; /* Smaller image for small screens */
        }
    }
      /* Page Header for Contact Form */
      .page-header {
        text-align:center; 
        margin-top: 40px; /* Space after #rectangle */
        margin-bottom: 20px;
        padding: 0 20px;
        position: relative; 
        z-index: 1;
      }
      .page-header h1 {
        font-size: 2.2rem;
        color: var(--color-primary);
        margin-bottom: 0.5rem;
      }
       :root.light-theme .page-header h1 { color: var(--color-primary); }

      .page-header p {
        font-size: 1.1rem;
        max-width:800px; 
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
      }

      /* Contact Form Styles */
      .contact-container {
        position: relative;
        z-index: 1; 
        max-width: 800px;
        margin: 0 auto 80px; 
        background: var(--color-section-background);
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 6px 12px var(--color-shadow);
        animation: fadeIn 1s ease-in-out;
        transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
        text-align: center;
      }
      .contact-container h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: var(--color-primary);
        text-transform: uppercase;
      }
      .contact-container p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 1.8rem;
      }
      #contactForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center; 
      }
      #contactForm input,
      #contactForm textarea {
        width: 100%;
        max-width: 600px; 
        padding: 12px 15px;
        font-family: var(--font-primary);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        background-color: rgba(255,255,255,0.1); 
        color: var(--color-text); 
        font-size: 1rem;
        transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
        outline: none;
      }
      :root.light-theme #contactForm input,
      :root.light-theme #contactForm textarea {
        background-color: rgba(0,0,0,0.05); 
      }
      #contactForm input:focus,
      #contactForm textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 5px var(--color-primary);
      }
      #contactForm button {
        padding: 12px 25px;
        background-color: var(--color-cta-button);
        color: #fff; 
        font-size: 1rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color var(--transition-speed), transform var(--transition-speed);
        font-weight: 600;
      }
      #contactForm button:hover {
        background-color: var(--color-cta-button-hover);
        transform: scale(1.03);
      }

      footer {
        text-align: center;
        padding: 20px;
        background-color: var(--color-footer-background);
        color: var(--color-text);
        transition: background-color var(--transition-speed);
        box-shadow: 0 -2px 4px var(--color-shadow); 
        margin-top: 40px; 
        position: relative; 
        z-index: 1;
      }
      footer p { margin: 0; font-size: 1rem; } 
      footer .social-links { margin-bottom: 10px; } 
      footer .social-links a { margin: 0 8px; font-size: 1.2rem; color: var(--color-text); transition: color var(--transition-speed); } 
      footer .social-links a:hover { color: var(--color-primary); } 

      /* MODAL STYLES (matching new script IDs) */
      #myModal { /* Updated ID */
          display: none; 
          position: fixed; 
          z-index: 3000; 
          padding-top: 100px; 
          left: 0; 
          top: 0; 
          width: 100%; 
          height: 100%; 
          overflow: auto; 
          background-color: rgba(0,0,0,0.9); 
          transition: background-color var(--transition-speed); 
      }
      #myModal .modal-content#img01Modal { /* Updated ID */
          margin: auto; 
          display: block; 
          width: 80%; 
          max-width: 700px; 
          border-radius: 10px; 
          box-shadow: 0 4px 8px rgba(0,0,0,0.7); 
          transition: transform var(--transition-speed); 
      }
      #myModal #captionModal { /* Updated ID */
          margin: auto; 
          display: block; 
          width: 80%; 
          max-width: 700px; 
          text-align: center; 
          color: #ccc; 
          padding: 10px 0; 
          background-color: rgba(0, 0, 0, 0.6); 
          border-radius: 5px; 
          font-size: 1.1rem; 
          font-weight: 500; 
          transition: font-size var(--transition-speed); 
      }
      #myModal .close-modal-btn { /* Updated class selector */
          position: absolute;
          top: 15px;
          right: 35px;
          color: #f1f1f1;
          font-size: 40px;
          font-weight: bold;
          transition: 0.3s;
          cursor: pointer;
      }
      #myModal .close-modal-btn:hover,
      #myModal .close-modal-btn:focus {
          color: #bbb;
          text-decoration: none;
      }
      
      body::-webkit-scrollbar {
        width: 12px;
      }
      body::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 6px;
        border: 3px solid var(--color-background); 
        background-clip: padding-box;
      }
      body::-webkit-scrollbar-track {
        background: var(--color-background); 
      }

      @keyframes fadeIn { 
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }