/* ============ CSS Variables & Base ============ */
:root{
    /* brand */
    --brand-accent:#f1aa3b;      /* gold/orange */
    --brand-dark:#444841;        /* deep gray-green */
    --brand-text:#55463f;        /* body text */
    --brand-beige:#f5edd8;       /* card bg */
    --brand-beige-2:#ebdfc4;     /* translucent layer base */
    --brand-border:#a68861;      /* card border */
    --brand-shadow:rgba(49,32,18,.6);
    --brand-pop:rgba(236,71,1,.6);
  
    /* layout */
    --radius-lg:20px;
    --radius-sm:6px;
    --gap-lg:40px;
    --gap-md:25px;
    --gap-sm:10px;
  
    /* grids */
    --grid-columns: 2fr 1fr 1fr 1fr 1fr 1fr; /* nutrition table */
  }
  
  html, body{height:100%;}
  
  /* Typography */
  body, p, pre, label, input, select, textarea, button{
    font-family:'Raleway', sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    color:var(--brand-text);
  }
  
  h1,h2,h3,h4{font-family:'Orbitron',sans-serif; font-weight:400; line-height:1.2; margin:0;}
  
  h1{ color:var(--brand-accent); font-size:clamp(1.6rem, 2.8vw, 3.5rem); letter-spacing:.1rem; }
  
  h2{ font-size:2rem; color:rgb(236,155,4); text-shadow:0 0 1px rgba(236,155,4,.9), 1px 1px 7px rgba(166,136,97,.5); text-align:center; }
  
  h3{ font-size:1.2rem; text-align:center; color:rgb(207,88,52); text-shadow:0 0 1px rgba(236,155,4,.9), 1px 1px 3px rgba(166,136,97,.5); }
  
  h4{ color:var(--brand-text); text-shadow:0 0 1px rgba(207,88,52,.9), 1px 1px 3px rgba(166,136,97,.5); }
  
  /* Links */
  a{ color:var(--brand-accent); text-decoration:none; padding:10px; }
  a:focus{ outline:none; border:0; }
  
  /* Focus utility */
  :focus{ outline:2px solid var(--brand-accent); outline-offset:2px; }
  
  /* ============ Global Layout & Background ============ */
  body{
    margin:0; padding:0; position:relative; overflow:hidden; height:100vh;
  }
  
  .background{
    position:absolute; inset:0; z-index:-2; margin:0; height:100vh; width:100%;
    background-image:image-set(
      url("/static/img/retro_future_wallpaper_for_cooking_space.95a4b5daedc6.avif") type('image/avif'),
      url("/static/img/retro_future_wallpaper_for_cooking_space.a09552df89e6.webp") type('image/webp'),
      url("/static/img/retro_future_wallpaper_for_cooking_space.22f8dd7aad5c.jpg") type('image/jpeg')
    );
    background-size:cover; background-position:center;
  }
  
  .body_container{ position:relative; display:flex; justify-content:center; margin:0; padding:0; overflow:auto; height:100vh; }
  
  .content_wrapper{ height:auto; padding-top:8vw; display:flex; flex-direction:column; justify-content:space-between; }
  
  .transparent_layer{
    background-color:rgba(235,223,196,.316);
    border:1px solid rgba(235,223,196,.223);
    border-radius:var(--radius-lg);
    position:relative; width:100%; align-self:center;
    display:flex; justify-content:center;
  }
  
  footer{ display:flex; justify-content:center; width:100%; }
  footer p{ margin-bottom:0; }
  
  /* ============ Top Nav ============ */
  nav{
    position:absolute; top:0; left:20px; right:20px; z-index:5;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 18px 8px; background-color:rgba(67,72,63,.547);
    color:var(--brand-accent); border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg);
    min-block-size:50px; height:fit-content; margin:0;
  }
  
  nav h1{ padding:0; margin:0 0 5px; text-wrap:nowrap; cursor:pointer; line-height:1; }
  .slogan{ font-size:1.2rem; color:#b2a687; margin:0; font-style:italic; }
  
  nav>ul{ display:flex; margin:0; padding:0; list-style:none; border-style:none; }
  nav ul li{ margin-right:10px; display:flex; align-items:center; justify-content:center; text-wrap:nowrap; }
  nav>ul li::after{ content:'|'; margin-left:10px; }
  nav>ul li:last-child::after{ content:''; }
  
  nav a:hover{ text-shadow:3px 3px 7px rgba(166,136,97,.9), -3px 2px 5px rgba(166,136,97,.9); }
  nav a:focus{ box-shadow:0 0 6px rgba(241,170,59,.6); border-radius:var(--radius-lg); }
  
  /* Support link + external icon */
  .support-nav{ color:var(--brand-accent); border:0; text-decoration:none; }
  .external-icon{ width:18px; height:18px; margin-left:4px; vertical-align:-2px; opacity:.8; }
  .support-nav:hover .external-icon{ box-shadow:0 0 8px rgba(241,170,59,.4), 0 0 8px rgba(241,170,59,.7); opacity:.95; }
  
  /* Mobile menu button */
  .menu_toggle{ display:none; position:absolute; top:0; right:0; font-size:1.5em; background:none; border:none; color:var(--brand-accent); cursor:pointer; padding:10px; margin:3px; box-shadow:none; }
  .menu_toggle:hover{ border-radius:5px; box-shadow:3px 3px 4px rgba(241,170,59,.47), -3px -3px 4px rgba(241,170,59,.47), 3px -3px 4px rgba(241,170,59,.47), -3px 3px 4px rgba(241,170,59,.47); }
  
  /* Collapsible nav list on small screens */
  .nav_links{ /* desktop: handled by default list styles */ }
  
  /* ============ Form Controls (shared) ============ */
  label{ font-family:'Raleway', sans-serif; }
  
  select{
    font-size:1rem; appearance:none; -webkit-appearance:none;
    background:#f9f9f9 url("/static/img/keyboard_arrow_down_24dp_4F5F58.da1f304adb0a.svg") no-repeat right 10px center;
    background-size:24px 24px; padding:8px; border:1px solid var(--brand-border); border-radius:5px; color:var(--brand-text);
  }
  option{ color:var(--brand-text); font-size:1rem; padding:8px; }
  
  input, textarea{ border:1px solid var(--brand-border); border-radius:5px; background-color:#f9f9f9; padding:8px; font-size:1rem; }
  textarea{ resize:none; }
  ::placeholder{ color:rgba(85,70,63,.425); font-style:italic; }
  
  /* Buttons */
  button, input[type="button"], input[type="submit"], input[type="reset"]{
    background-color:#f4d8ae; color:var(--brand-text); border:1px solid var(--brand-accent);
    padding:10px 20px; font-size:1rem; font-weight:700; border-radius:5px; cursor:pointer; min-width:120px; margin-bottom:15px;
    box-shadow:0 4px 6px rgba(91,58,58,.363); transition:box-shadow .3s ease, transform .15s ease;
  }
  button:hover, input[type="submit"]:hover, input[type="reset"]:hover{
    background-color:#efc684; color:var(--brand-dark); box-shadow:0 6px 12px rgba(20,20,20,.456);
  }
  button:active, input[type="submit"]:active, input[type="reset"]:active{ 
    box-shadow:0 2px 4px rgba(0,0,0,.1); 
    transform:translateY(2px); 
}
  
  /* Disabled state for async submit */
  .button_group button[disabled]{ opacity:.7; cursor:wait; }
  
  .required_field{ text-wrap:nowrap; }
  .required_field::after{ content:"*"; margin-left:5px; color:#be1e2d; font-family:'Orbitron',sans-serif; }
  
  .field_error{ color:#c0392b; font-size:.8rem; margin:0; padding:0; }
  
  /* ============ Home: Recipe Collection Grid ============ */
  .recipe_collection_grid, .individual_recipe_grid{
    display:grid; justify-content:center; padding:0; margin:var(--gap-lg); width:fit-content;
  }
  
  .recipe_collection_grid{ grid-template-columns:repeat(3, 400px); grid-auto-rows:auto; gap:25px; }
  
  .recipe_card{
    display:flex; flex-direction:column; background-color:var(--brand-beige); border:1px solid var(--brand-border);
    border-radius:var(--radius-lg); width:fit-content; height:100%;
  }
  .recipe_card h3{ padding:20px; display:flex; align-items:center; justify-content:center; }
  .recipe_collection_grid .recipe_image_wrapper{ display:flex; justify-content:space-around; height:auto; }
  .recipe_card img{
    width:300px; padding:3px; box-shadow:0 0 45px rgba(236,118,1,.6); filter:drop-shadow(0 4px 6px rgba(13,40,78,.563));
    background:linear-gradient(45deg, rgba(244,139,2,.2), rgba(250,47,1,.2));
    transition:transform 1.1s ease-in-out, box-shadow 1.1s ease-in-out, filter 1.1s ease-in-out;
  }
  .recipe_card img:hover{ transform:scale(1.05); box-shadow:0 0 45px var(--brand-pop); filter:drop-shadow(0 8px 2px rgba(13,40,78,.563)); background:linear-gradient(45deg, rgba(255,145,2,.5), rgba(250,47,1,.5)); cursor:pointer; }
  
  /* .recipe_image_wrapper>img{ width:100%; height:auto; border-radius:var(--radius-lg); background:linear-gradient(45deg, rgba(244,139,2,.2), rgba(250,47,1,.2)); will-change:filter; transform:translateZ(0); }
   */

  .recipe_image_wrapper img{
    width:100%;
    height:auto;
    border-radius:var(--radius-lg);
    background:linear-gradient(45deg, rgba(244,139,2,.2), rgba(250,47,1,.2));
    will-change:filter;
    transform:translateZ(0);
  }


  .card_footer{ font-size:14px; padding:20px 30px; color:rgb(107,94,61); display:flex; align-items:center; justify-content:center; text-align:center; }


/* Placeholder recipe image styling */
.placeholder-img {
  opacity: 0.3; /* makes it semi-transparent */
}

  
  
  /* ============ Recipe Detail ============ */
  .individual_recipe_grid{
    grid-template-columns:repeat(2, 400px); grid-template-rows:auto auto 1fr auto; gap:15px; row-gap:0;
    background-color:var(--brand-beige); border:1px solid var(--brand-border); border-radius:var(--radius-lg); padding:40px;
  }
  .individual_recipe_grid h3{ grid-column:1; grid-row:1; }
  .individual_recipe_grid .recipe_image_wrapper{ grid-column:2; grid-row:1 / span 3; }
  .individual_recipe_grid p{ font-style:italic; text-align:left; margin:0; padding:20px 0; align-self:start; grid-column:1; grid-row:2; }
  .individual_recipe_grid .ingredients{ margin:0; grid-column:1; grid-row:3; }
  .individual_recipe_grid .cooking_directions{ margin:0; height:100%; width:100%; grid-column:1 / span 2; grid-row:4; }
  
  pre{ white-space-collapse:preserve-breaks; line-break:auto; text-wrap:wrap; width:fit-content; margin:0; }
  
  .individual_recipe_grid img{ width:100%; max-width:400px; padding:1px; color:rgb(207,88,52); font-weight:bold; background:linear-gradient(45deg, rgba(244,139,2,.2), rgba(250,47,1,.2)); box-shadow:0 0 45px var(--brand-pop); filter:drop-shadow(0 8px 2px rgba(13,40,78,.563)); }
  
  /* Support line on recipe */
  .support-recipe{ margin-top:28px; text-align:left; font-size:.95rem; color:var(--brand-dark); }
  .support-link{ font-weight:600; text-decoration:none; text-wrap:nowrap; padding:2px 0 2px 4px; }
  .support-link:hover{ text-decoration:underline; }
  
  /* ============ Nutrition Facts ============ */
  .nutrition_facts{
    display:grid; justify-content:center; margin:var(--gap-lg); width:fit-content; background-color:var(--brand-beige); border:1px solid var(--brand-border); border-radius:var(--radius-lg); padding:30px 50px 50px;
  }
  
  .nutrition_facts_grid_new{
    display:grid; 
    grid-auto-rows:auto; 
    gap:1px; 
    background-color:#d6c6aa; 
    border:1px solid #bc9e75; 
    border-radius:var(--radius-lg);
    box-shadow:0 10px 45px rgba(236,118,1,.4); 
    filter:drop-shadow(0 4px 6px rgba(16,64,130,.563)); 
    overflow:hidden; 
    margin-top:25px;
  }
  
  .nutrition_facts_grid_new>.header{ display:grid; grid-template-columns:var(--grid-columns); background-color:var(--brand-beige); text-align:center; }
  .nutrition_facts_grid_new .recipe { 
    display:grid; 
    grid-template-columns:var(--grid-columns); 
    background-color:var(--brand-beige); 
    text-align:center; 
    color: #55463f;
    }
  
  .nutrition_facts_grid_new .header h4, .nutrition_facts_grid_new .recipe div{ 
    padding:10px;
}
  .nutrition_facts_grid_new .header h4:first-child{ text-wrap:nowrap; }
  .nutrition_facts_grid_new .recipe div:first-child{ text-align:left; }
  
  .nutrition_facts_grid_new .recipe:hover {
    background-color:var(--brand-beige);
    color: #d95214; 
    cursor:pointer;
  }
  
  
  /* ============ About & Contact – Wallpaper Panel ============ */
  .wallpaper_primer{
    justify-content:center; padding:0; margin:var(--gap-lg); background-color:var(--brand-beige); border:1px solid var(--brand-border); border-radius:var(--radius-lg); width:auto;
  }
  
  .wallpaper_layer{
    position:relative; margin:0; width:1000px; padding:0; background:rgba(245,237,216,.461); box-shadow:0 4px 10px rgba(249,1,1,.1); border-radius:var(--radius-lg); z-index:1; overflow:hidden;
  }
  .wallpaper_layer::before{
    content:''; position:absolute; inset:0; background-image:image-set(
      url("/static/img/wallpaper.134d5b337ca0.avif") type('image/avif'),
      url("/static/img/wallpaper.98fdb7f7ee44.webp") type('image/webp'),
      url("/static/img/wallpaper.b34bdd9b4f15.jpg") type('image/jpeg')
    );
    background-size:cover; background-position:center; opacity:.4; z-index:-1; filter:blur(2px);
  }
  
  .aboutpage_text, .contact_container{
    background-color:var(--brand-beige); margin:0 auto; min-width:300px; max-width:500px; width:fit-content; height:100%; box-shadow:0 0 45px var(--brand-shadow);
  }
  
  /* About */
  .aboutpage_text{ padding:35px 50px 50px; }
  .aboutpage_text h3{ letter-spacing:1px; margin-bottom:20px; }
  .aboutpage_text p{ text-align:justify; margin-bottom:20px; }
  .button_container{ margin-top:35px; text-align:center; }
  
  /* Contact */
  .contact_container{ padding:35px 50px 0; }
  
  .contact_fields_grid_new{
    display:grid; gap:0; background:#d6c6aa; border:none; overflow:hidden; /* consider adjusting */
  }
  .contact_fields_grid_new>div{ background:var(--brand-beige); text-align:left; padding:25px 3px 2px; place-content:center; }
  
  /* Rows 1–2 */
  .contact_fields_grid_new>div:nth-of-type(1),
  .contact_fields_grid_new>div:nth-of-type(2){ display:flex; flex-flow:row; border-bottom:1px solid #d6c6aa; }
  .contact_fields_grid_new>div:nth-of-type(1)>input,
  .contact_fields_grid_new>div:nth-of-type(2)>input{ width:100%; margin-left:10px; }
  .contact_fields_grid_new>div:nth-of-type(1)>label,
  .contact_fields_grid_new>div:nth-of-type(2)>label{ margin:0; height:100%; place-content:center; }
  
  /* Rows 3–4 */
  .contact_fields_grid_new>div:nth-of-type(3),
  .contact_fields_grid_new>div:nth-of-type(4){ display:flex; flex-flow:column; }
  .contact_fields_grid_new>div:nth-of-type(3)>label,
  .contact_fields_grid_new>div:nth-of-type(4)>label{ padding-bottom:10px; }
  .contact_fields_grid_new>div:nth-of-type(4){ border-bottom:1px solid #d6c6aa; }
  
  /* Row 5: button */
  .contact_fields_grid_new>div:nth-of-type(5){ display:flex; flex-flow:column; text-align:center; padding-top:35px; }
  
  /* Field base for Django widgets (scoped) */
  .co-input, .co-textarea,
  .contact_fields_grid_new input,
  .contact_fields_grid_new textarea{
    width:100%; box-sizing:border-box; padding:10px 12px; font:inherit; border:none; background-color:transparent;
  }
  .contact_fields_grid_new textarea{ border:1px solid #d6c6aa; border-radius:var(--radius-sm); }
  .co-textarea{ resize:none; min-height:120px; }
  .co-input:focus, .co-textarea:focus{ outline:none; box-shadow:0 0 0 3px rgba(241,170,59,.25); }
  
  /* Autofill neutralizer */
  .contact_fields_grid_new input:-webkit-autofill,
  .contact_fields_grid_new textarea:-webkit-autofill{
    -webkit-text-fill-color:#333; caret-color:#333; box-shadow:0 0 0 1000px transparent inset !important; transition:background-color 99999s ease-out;
  }
  
  /* Success banner (Django messages) */
  .messages .message.success{ color:rgb(236,155,4); text-shadow:0 0 1px rgba(236,155,4,.9), 1px 1px 7px rgba(166,136,97,.5); padding:10px 14px; margin:12px 0 6px; text-align:center; font-size:1.2rem; }
  
  .intro_text{ text-align:center; font-size:1.2rem; margin-bottom:10px; color:var(--brand-dark); text-shadow:0 0 1px rgba(236,155,4,.9), 1px 1px 7px rgba(166,136,97,.5); }
  .contact_info{ text-align:center; margin:30px 0 5px; }
  .contact_info a:hover{ text-decoration:underline; }
  
  /* ============ Responsive ============ */
  @media (max-width:1370px){
    .recipe_collection_grid{ gap:10px; margin:10px; }
  }
  
  @media (max-width:1200px){
    .recipe_collection_grid{ grid-template-columns:repeat(2, 350px); }
    .wallpaper_primer{ margin:20px; }
  }
  
  @media (max-width:1140px){
    .content_wrapper{ padding-top:94px; }
  
    .nav_links{ display:none; flex-direction:column; position:absolute; top:100%; right:0; box-shadow:2px 4px 26px rgba(8,5,0,.9); background-color:rgba(67,72,63,.747); border:1px solid rgba(235,223,196,.223); border-radius:var(--radius-lg); width:fit-content; text-align:center; padding:10px; z-index:100; }
    .nav_links li::after{ content:''; }
    .nav_links.show{ display:flex; }
    .menu_toggle{ display:block; }
  }
  
  @media (max-width:1000px){
    .individual_recipe_grid{ grid-template-columns:auto; gap:15px; padding:40px; margin:var(--gap-lg); }
    .nutrition_facts{ padding:10px; margin:10px; }
    .wallpaper_layer{ width:800px; }
  }
  
  @media (max-width:768px){
    .individual_recipe_grid{ padding:10px; }
    .aboutpage_text p{ font-size:.9rem; }
  
    .nutrition_facts_grid_new>.header{ display:none; }
    .nutrition_facts_grid_new .recipe{ grid-template-columns:auto; padding:10px 0; }
    .nutrition_facts_grid_new .recipe .name{ text-align:center; font-weight:700; }
    .nutrition_facts_grid_new .recipe .serving{ display:none; }
    .nutrition_facts_grid_new .recipe .calories::before{ content:'Calories: '; }
    .nutrition_facts_grid_new .recipe .protein::before{ content:'Protein: '; }
    .nutrition_facts_grid_new .recipe .fat::before{ content:'Fat: '; }
    .nutrition_facts_grid_new .recipe .carbohydrates::before{ content:'Carbohydrates: '; }
  }
  
  @media (max-width:660px){
    .recipe_collection_grid{ grid-template-columns:repeat(1, 350px); }
    .wallpaper_primer{ margin:10px; }
    .wallpaper_layer{ width:fit-content; }
    .contact_container{ padding:15px 5px 0; }
    .aboutpage_text{ padding:15px 10px 50px; }
    h1{ font-size:1.6rem; }
    h2{ font-size:1.5rem; }
  }
  
  @media (max-width:400px){ nav{ left:0; right:0; } }
  
  @media (max-width:345px){
    .recipe_collection_grid{ grid-template-columns:repeat(1, 150px); justify-self:center; }
    .recipe_card h3{ padding:0; }
    .card_footer{ padding:0; }
    .recipe_card img{ width:100px; height:auto; }
    .individual_recipe_grid{ margin:10px; }
  }

  /* iOS/Safari scroll fix for Nutrition grid */
@media (max-width: 768px) {
    /* Remove filter/box-shadow + clipping on the grid wrapper */
    .nutrition_facts_grid_new {
      transform: translateZ(0);       /* standard */
      -webkit-transform: translateZ(0); /* legacy Safari */

      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
  
    /* The row “cards” — avoid forcing new layers or hover effects on mobile */
    .nutrition_facts_grid_new .recipe {
      background: var(--brand-beige);  /* keep solid background */
    }
  
    /* Nix the hover glow on touch devices */
    .nutrition_facts_grid_new .recipe:hover {
      background: var(--brand-beige) !important;
      box-shadow: none !important;
      filter: none !important;
    }
  }
  
  /* Smooth native momentum scrolling for the scrolling container on iOS */
  .body_container {
    -webkit-overflow-scrolling: touch;
  }