/*
          Page background image
          - image file should live at: images/background.jpg (relative to this HTML file)
          - `background-attachment: fixed` keeps the image stationary; remove for better mobile support
        */
        body {
          background-image: url('images/background.jpg');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-attachment: fixed;
          /* text color for page content */
          color: #111;
          margin: 0;
          font-family: sans-serif;
        }

        /* Top & Bottom Navigation Bars */
        .nav-bar {
          width: 80%;   /* bar width (centered by margin:auto) */
          margin: 20px auto;   /* vertical spacing and horizontal centering */
          background: #ffd7e6;      /* Soft pink */
          padding: 12px;
          border-radius: 10px;      
          text-align: center;
          border: 2px solid #6a0dad; 
          /* Use flex to keep everything perfectly centered and leveled */
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 30px;    /* This handles the space between items perfectly */
        }

        .nav-bar a, .drop-btn {
          color: #6a0dad;      /* purple link color */
          text-decoration: none;
          font-weight: 700;
          margin: 0;        /* space between links */
          display: inline-block;
          line-height: 1; /* Forces the height to be based strictly on the text size */
        }

        /* Container for the dropdown */
        .dropdown {
          position: relative; /* This keeps the menu positioned correctly under the link */
          display: flex;       /* Changed to flex */
          align-items: center; /* Keeps 'Recipes' leveled */
          margin: 0;   
        }
        
        /* Removes the margin from the 'Recipes' link specifically */
        .dropdown > a {
          margin: 0 !important; /* Keeps the spacing consistent with Home/About Me */
        }

        /* Style for the hidden menu */
        .dropdown-content {
          display: none; /* Hidden by default */
          position: absolute;
          top: 100%;            /* CRITICAL: Starts the menu exactly where the link ends */
          left: 50%;
          transform: translateX(-50%);
          background-color: #ffd7e6; /* Pink background */
          min-width: 160px;
          box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
          z-index: 100;
          border: 2px solid #6a0dad;
          border-radius: 8px;
          padding: 5px 0;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
          color: #6a0dad !important; /* Force purple text */
          padding: 10px 15px;
          text-decoration: none;
          display: block; /* Makes them stack vertically */
          text-align: left;
          margin: 0 !important; /* Reset the 15px margin from the main nav */
          font-weight: bold;
        }

        /* Hover effect for dropdown links */
        .dropdown-content a:hover {
          background-color: #f8bbd0; /* Lighter pink on hover */
        }

        /* Show the menu when hovering over the "Recipes" container */
        .dropdown:hover .dropdown-content {
          display: block;
        }

        /* The Middle Layout (Two Columns) */
        .main-container {
          display: flex;
          width: 90%;
          max-width: 1200px;
          margin: 0 auto;
          gap: 20px;         /* Space between the two boxes */
          align-items: flex-start; /* Keeps boxes from stretching unevenly */
        }

        /* Column Styling */
        .column-a {
          flex: 1;        /* Left side: Recipes */
        }
        .column-b {
          flex: 1.5;      /* Right side: About (slightly wider) */
        }

        /* Box Styling (The content-wrap) .content-wrap` is a helper you can wrap around text blocks to improve readability (adds a semi-opaque white backdrop). Use it on sections that need contrast against the background. */
        .content-wrap { 
          background: rgba(255,255,255,0.8); 
          padding: 20px; 
          border-radius: 10px;
          border: 2px solid #6a0dad;
          height: 100%;   /* Optional: makes boxes look uniform */
        }

        /* --- NEW WINDOW CONTAINER STYLES --- */        
        .content-window-a {
          width: 80%;
          max-width: 800px;
          margin: 40px auto;
          background: rgba(255, 255, 255, 0.9);
          border: 3px solid #6a0dad;
          border-radius: 12px;
          overflow: hidden; /* Clips header to rounded corners */
          box-shadow: 8px 8px 0px rgba(106, 13, 173, 0.2);
        }

        .content-window-b {
          width: 90%;
          max-width: 1000px;
          margin: 40px auto;
          background: rgba(255, 255, 255, 0.9);
          border: 3px solid #6a0dad;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 8px 8px 0px rgba(106, 13, 173, 0.2);
        }

        .window-header {          
          background: #6a0dad;
          color: #ffd7e6;
          padding: 10px;
          text-align: center;
          font-weight: bold;
          letter-spacing: 1px;
        }

        .window-body {
          padding: 30px;
          line-height: 1.6;
        }

        /* Recipe Grid */
        .recipe-grid {
          display: grid;
        /* This creates 3 columns that stack on mobile */
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
          padding: 30px;
        }

        .recipe-card {
          text-align: center;
          text-decoration: none;
          color: #6a0dad;
          font-weight: bold;
          transition: transform 0.2s;
        }

        .recipe-card:hover {
          transform: scale(1.05); /* Slight zoom on hover */
        } 

        .recipe-card img {
          width: 100%;
          height: 200px;
          object-fit: cover; /* Keeps images from stretching */
          border: 3px solid #6a0dad;
          border-radius: 8px;
          margin-bottom: 10px;
          background: #ffd7e6; /* Placeholder color */
        }

        /* Heading Styles */
        h1, h2, h3 { 
          text-align: center;
          color: #6a0dad; 
          margin-top: 0; 
        }

        /* Responsive: Stack columns on small screens */
        @media (max-width: 800px) {
          .main-container { 
            flex-direction: column; 
          }
          .nav-bar { 
            width: 95%; 
          }
        }

        /* --- New Recipe Page Styles --- */

        .recipe-hero-img img {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            border: 3px solid #6a0dad;
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .recipe-intro {
            text-align: center;
            font-style: italic;
            color: #444;
            padding: 0 20px;
        }

        .purple-line {
            border: 0;
            height: 2px;
            background: #6a0dad;
            opacity: 0.2;
            margin: 30px 0;
        }

        /* Creating the two columns for Ingredients and Steps */
        .recipe-grid-layout {
            display: flex;
            gap: 40px;
            flex-wrap: wrap; /* Stacks them on mobile */
        }

        .ingredients-box {
            flex: 1;
            min-width: 250px;
            background: rgba(255, 215, 230, 0.3); /* Soft pink tint */
            padding: 20px;
            border-radius: 10px;
        }

        .steps-box {
            flex: 2;
            min-width: 300px;
        }

        /* Style the lists */
        .ingredients-box ul, .steps-box ol {
            line-height: 1.8;
        }

        .ingredients-box li {
            list-style-type: "💖 "; /* Cute heart bullet points */
            margin-bottom: 10px;
        }

        .steps-box ol li {
            margin-bottom: 15px;
            padding-left: 10px;
        }

        /* Heading colors for inside the recipe */
        .ingredients-box h3, .steps-box h3 {
            border-bottom: 2px solid #6a0dad;
            display: inline-block;
            padding-bottom: 5px;
            margin-bottom: 20px;
        }

        /* --- SOURCE LINK --- */
        .recipe-source {
            margin-top: 10px;
            font-size: 0.9em;
        }
        .recipe-source a {
            color: #6a0dad;
            text-decoration: underline;
        }

        /* --- Comment Bubble --- */
        .comment-section {
            width: 100%;
            max-width: 650px;
            margin: 40px auto; /* Centers the whole bubble */
            background: #fff;
            padding: 30px;
            border: 3px solid #ffd7e6;
            border-radius: 40px;
            box-shadow: 10px 10px 0px rgba(106, 13, 173, 0.05);
            text-align: center;
        }

        .comment-section h3 {
            color: #6a0dad;
            font-size: 1.4rem;
            margin-bottom: 20px;
            text-decoration: underline solid #ff69b4; /* Solid Pink Line */
            text-underline-offset: 8px;
        }

        /* --- Input Area --- */
        /* Styling for both Name and Comment boxes */
        .comment-input {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #ffd7e6;
            border-radius: 25px; /* Rounded bubble look */
            font-family: inherit;
            font-size: 1rem;
            background-color: #fff;
            box-sizing: border-box;
            margin-bottom: 15px; /* Space between the two bubbles */
            outline: none;
            transition: all 0.3s ease;
        }

        .comment-input:focus {
            border-color: #6a0dad;
            box-shadow: 0 0 10px rgba(106, 13, 173, 0.1);
        }

        /* Specifics for the shorter Name box */
        .name-box {
            height: 50px;
        }

        /* Specifics for the larger Comment box */
        .text-box {
            height: 120px;
            resize: none; /* Keeps the bubble shape permanent */
        }

        /* Keeps the button aligned nicely below the bubbles */
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        /* --- Centered Heart Rating --- */
        .heart-rating {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            gap: 5px;
            margin-bottom: 20px;
        }

        .heart-rating input { display: none; }

        .heart-rating label {
            font-size: 35px;
            color: #ccc;
            cursor: pointer;
        }

        .heart-rating label:before { content: '❤'; }

        .heart-rating input:checked ~ label,
        .heart-rating label:hover,
        .heart-rating label:hover ~ label {
            color: #ff69b4;
        }
        /* --- Pretty Comment Button --- */
        .button-container {
            display: flex;
            justify-content: flex-end; /* Pushes button to the right */
            margin-top: 15px;
        }

        .pretty-comment-btn {
            background-color: #6a0dad;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

        .pretty-comment-btn:hover {
            background-color: #ff69b4;
            transform: translateY(-2px);
        }

        /* --- Recipe Link Colors --- */

        /* 1. Unvisited recipe links (Pink) */
        main ul li a:link {
            color: #ff69b4; /* Hot Pink */
            text-decoration: none; /* Optional: removes underline */
            font-weight: bold;
        }

        /* 2. Visited recipe links (Purple) */
        main ul li a:visited {
            color: #6a0dad; /* Purple */
        }

        /* 3. Hover effect (Optional: makes it pop when you point at it) */
        main ul li a:hover {
            color: #d63384; /* Slightly darker pink */
            text-decoration: underline;
        }

        main ul {
          list-style: none; /* Remove default bullets */
        }

        main li::before {
            content: "❤";      /* The heart symbol */
            color: #ff69b4;    /* Hot Pink */
            font-weight: bold;
            display: inline-block; 
            width: 1.5em;      /* Space between heart and text */
        }

        /* --- Conversion Section --- */
        .converter-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15px 0;
            padding: 10px;
            border-bottom: 1px solid #ff69b4;
        }

        .converter-row label {
            width: 100px;
            font-size: 0.9rem;
            color: #6a0dad;
            font-weight: bold;
        }

        .converter-row input {
            width: 70px;
            padding: 8px;
            border: 2px solid #ff69b4;
            border-radius: 10px;
            text-align: center;
        }

        .arrow {
            color: #ff69b4;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .converter-row input {
            width: 85px; /* Slightly wider to fit the text */
            padding: 8px;
            border: 2px solid #ff69b4;
            border-radius: 10px;
            text-align: center;
            font-size: 0.8rem; /* Keeps the placeholder text from looking too big */
        }

        /* Optional: Make the placeholder text pink! */
        input::placeholder {
            color: #ff69b4;
            opacity: 0.7;
        }

        /* Toggle Container */
        .toggle-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            font-weight: bold;
            color: #6a0dad;
        }

        /* The Switch */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input { opacity: 0; width: 0; height: 0; }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #ffd7e6;
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px; width: 16px;
            left: 4px; bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider { background-color: #ff69b4; }
        input:checked + .slider:before { transform: translateX(26px); }

        /* Special layout for the Error Page */
        .error-page {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh; /* Takes up full screen height */
          margin: 0;
          background-image: url('images/background.jpg'); /* Keep your theme! */
          background-size: cover;
        }

        .error-container {
          width: 90%;
          max-width: 500px;
          background: rgba(255, 255, 255, 0.95);
          border: 3px solid #6a0dad;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 10px 10px 0px rgba(106, 13, 173, 0.2);
          text-align: center;
        }

        .error-container h1 {
          font-size: 2rem;
          margin-bottom: 10px;
        }

        .error-container p {
          color: #555;
          font-size: 1.1rem;
        }

        /* Better handling for very small phones */
        @media (max-width: 450px) {
        .nav-bar {
        gap: 15px; /* Shrink the gap */
        font-size: 0.9rem; /* Make text a tiny bit smaller */
        padding: 10px;
          }
        }

        /* --- mobile adjustments --- */
        @media (max-width: 600px) {
        /* 1. Fix the Comment Bubble */
        .comment-section {
            width: 95%;      /* Give it more room on the sides */
            padding: 20px;   /* Reduce padding so the box doesn't feel cramped */
            margin: 20px auto;
        }

        /* 2. Fix the Conversion Chart */
        .converter-row {
            flex-direction: column; /* Stack Label -> Input -> Arrow -> Output */
            gap: 8px;
            padding: 15px 5px;
        }

        .converter-row label {
            width: 100%;       /* Let the label take full width */
            text-align: center;
            margin-bottom: 5px;
        }

        .converter-row input {
            width: 80%;        /* Make inputs larger touch targets for fingers */
            max-width: 150px;
        }

        .arrow {
            transform: rotate(90deg); /* Turn arrow to point DOWN since we stacked the boxes */
            margin: 5px 0;
        }
        }

        /* Fix squished content windows on mobile */
.content-window-a, 
.content-window-b {
  width: 95% !important; /* Use almost the whole screen width */
  margin: 20px auto;     /* Reduce top/bottom margin */
}

.window-body {
  padding: 15px;         /* Reduce inner padding so text has more room */
  word-wrap: break-word; /* Prevents long links or words from breaking the layout */
}

/* Also fix the two-column layout if it's still tight */
.main-container {
  width: 95%;
  gap: 10px;
}