/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* BASE */
body { 
  font-family: 'Inter', sans-serif; 
  background: #fff8f2; /* warmer off-white */
  color: #333; /* softer dark color */
  line-height: 1.6; 
}

/* HEADER */
.site-header { border-bottom:1px solid #f0e6df; }
.nav { max-width:1200px; margin:auto; padding:20px; display:flex; justify-content:space-between; align-items:center; }
.logo { font-family:'Playfair Display', serif; font-size:24px; text-decoration:none; color:#5b3921; } /* warm brown */
.nav-links a { margin-left:20px; text-decoration:none; color:#5b3921; font-size:14px; transition: color 0.2s; }
.nav-links a:hover { color:#ff7f50; } /* coral hover */


/* ===============================
   LUXURY HEADER
================================= */

.lux-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: relative;
}

/* Subtle gold accent line */
.lux-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(to right, transparent, #c6a75e, transparent);
}

.lux-nav {
  max-width: 1200px;
  margin: auto;
  padding: 28px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.lux-logo {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #111;
  transition: opacity 0.3s ease;
}

.lux-logo:hover {
  opacity: 0.7;
}

/* Navigation Links */
.lux-links a {
  margin-left: 35px;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #444;
  position: relative;
  transition: color 0.3s ease;
}

/* Gold underline animation */
.lux-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: #c6a75e;
  transition: width 0.3s ease;
}

.lux-links a:hover {
  color: #000;
}

.lux-links a:hover::after {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .lux-nav {
    flex-direction: column;
    gap: 20px;
  }

  .lux-links a {
    margin-left: 20px;
  }
}

/* HERO */
.hero {
  position: relative;
  text-align: center;
  padding: 150px 20px;
  color: #fff;
  background: url('../images/hero\ image.jpg') no-repeat center center/cover;
  background-position: center 70%;
}

.hero::after {
  content: '';
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

.hero h1, .hero p {
  position: relative;
  z-index: 2;
  font-family: 'Playfair Display', serif;
}


/* GRID */
.editorial-grid {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

/* Individual card */
.editorial-card {
  background: #fff7f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(255, 127, 80, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.editorial-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transition: transform 0.3s ease;
}

.editorial-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin: 15px;
  color: #5b3921; /* warm heading */
}

.editorial-card p {
  color: #6b4c3a; /* soft brownish text */
  font-size: 14px;
  margin: 0 15px 15px 15px;
}

.editorial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(255, 127, 80, 0.25);
  border-top: 4px solid #ff7f50; /* coral accent line */
}

.editorial-card:hover img {
  transform: scale(1.05);
}

/* Recipe Page */
.recipe-article { max-width:800px; margin:auto; padding:60px 20px; }
.recipe-article h1 { font-family:'Playfair Display', serif; font-size:42px; margin-bottom:20px; color:#5b3921; }
.recipe-article img { width:100%; margin:30px 0; border-radius:12px; }
.recipe-description { font-size:18px; margin-bottom:40px; color:#6b4c3a; }
.recipe-content { display:grid; grid-template-columns:1fr 2fr; gap:40px; margin-top:30px; }
.recipe-content h3 { font-family:'Playfair Display', serif; margin-bottom:10px; color:#5b3921; }
.recipe-content ul { list-style:none; }
.recipe-content li { margin-bottom:8px; font-size:15px; color:#4b3624; }

/* Byline */
.byline { font-size:14px; color:#a87f5f; margin-bottom:15px; font-style:italic; }

/* SUBMIT PAGE */
/* ===========================
   SUBMIT PAGE - LUXURY STYLE
============================ */

/* Page layout */
.submit-page {
  max-width: 700px;
  margin: 80px auto;
  padding: 60px 20px;
  background: #fff8f0; /* warm ivory background */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  font-family: 'Inter', sans-serif;
}

/* Header */
.submit-header {
  text-align: center;
  margin-bottom: 60px;
}

.submit-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  margin-bottom: 10px;
  color: #5a3e36; /* deep luxury brown */
}

.submit-header p {
  font-size: 18px;
  color: #7a5c50; /* warm mid-brown */
}

/* Form layout */
.recipe-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.form-section {
  display: flex;
  flex-direction: column;
}

.form-section label {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 16px;
  color: #5a3e36;
}

/* Inputs & Textareas */
.form-section input,
.form-section textarea {
  font-family: 'Inter', sans-serif;
  padding: 12px;
  font-size: 15px;
  border: none;
  border-bottom: 2px solid #d6c3b1;
  background: #fff8f0;
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-section input:focus,
.form-section textarea:focus {
  outline: none;
  border-bottom-color: #c69c6d; /* warm golden brown */
  box-shadow: 0 4px 12px rgba(198, 156, 109, 0.3);
}

/* Submit button */
.submit-btn {
  align-self: center;
  padding: 14px 50px;
  background: #c69c6d; /* gold accent */
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.submit-btn:hover {
  background: #b88a4d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Ingredients input */
#ingredients-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ingredient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f7e9de; /* warm light accent */
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  color: #5a3e36;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.ingredient-item button {
  background: #c69c6d;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  padding: 2px 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.ingredient-item button:hover {
  background: #b88a4d;
}

/* Add ingredient button */
#add-ingredient {
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 20px;
  background: #c69c6d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

#add-ingredient:hover {
  background: #b88a4d;
  transform: translateY(-2px);
}

/* Drag & Drop Image */
#drop-zone {
  border: 2px dashed #d6c3b1;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  background: #fff8f0;
  transition: background 0.2s, box-shadow 0.2s;
}

#drop-zone.dragover {
  background: #f7e9de;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

#drop-zone input {
  display: none;
}

#image-preview {
  margin-top: 20px;
  max-width: 100%;
  display: none;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

/* Instructions textarea larger */
.form-section textarea[name="instructions"] {
  min-height: 200px;
}


.delete-btn {
  margin-top: 20px;
  background: #b30000; /* deep red for luxury feel */
  color: #fff;
  border: none;
  padding: 10px 25px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.delete-btn:hover {
  background: #ff4c4c; /* softer red on hover */
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Ingredients Input */
#add-ingredient {
  display:inline-block;
  margin-top:10px;
  padding:8px 20px;
  background:#ff9b6b; /* warmer coral */
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background 0.2s, transform 0.2s;
}
#add-ingredient:hover { background:#ff7f50; transform:translateY(-2px); }

.ingredient-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff0e5; /* soft warm item background */
  padding:6px 12px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  color:#4b3624;
}
.ingredient-item button {
  background:#ff5c2a;
  color:#fff;
  border:none;
  border-radius:4px;
  font-weight:bold;
  padding:2px 6px;
  cursor:pointer;
  transition:background 0.2s;
}
.ingredient-item button:hover { background:#c74300; }

/* Drag & Drop */
#drop-zone {
  border: 2px dashed #ccc;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 8px;
}

#drop-zone.dragover {
  background: #f0f0f0;
}

#image-preview {
  margin-top: 20px;
  max-width: 100%;
  display: none;
  border-radius: 8px;
}

#add-ingredient {
  margin-top: 10px;
  padding: 8px 20px;
  background: #ff7f50;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.ingredient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fef3f0;
  padding: 6px 12px;
  border-radius: 6px;
  margin-top: 6px;
}

.ingredient-item button {
  background: #ff4c00;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
}

/* Hero scroll indicator */
.scroll-down { color:#fff; }

footer {
  text-align: center;
}

/* ===============================
   LUXURY CARIBBEAN FOOTER
================================= */

.lux-footer {
  background: linear-gradient(to bottom, #1a1a1a, #0f0f0f);
  color: #f5f1ea;
  padding: 80px 20px 30px;
  margin-top: 120px;
  position: relative;
}

/* Subtle gold top accent line */
.lux-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, #c6a75e, transparent);
}

.lux-footer-inner {
  max-width: 1200px;
  margin: auto;
}

/* Brand Section */
.lux-brand h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.lux-brand p {
  color: #b8a98a;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 60px;
}

/* Columns Layout */
.lux-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 60px;
}

/* Column Styling */
.lux-col h4 {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c6a75e; /* soft gold */
  margin-bottom: 20px;
}

.lux-col a {
  display: block;
  text-decoration: none;
  color: #d8d2c7;
  margin-bottom: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lux-col a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* Bottom Section */
.lux-bottom {
  margin-top: 70px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: #8f8f8f;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .lux-columns {
    gap: 40px;
  }

  .lux-brand p {
    margin-bottom: 40px;
  }
}

/* ===============================
   GENERIC PAGE STYLES
================================= */

.page-hero {
  text-align: center;
  padding: 100px 20px 60px;
}

.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  margin-bottom: 15px;
}

.page-hero p {
  color: #888;
  font-size: 18px;
}

.page-content {
  padding: 40px 20px 100px;
}

.content-narrow {
  max-width: 700px;
  margin: auto;
  line-height: 1.8;
}

.content-wide {
  max-width: 1100px;
  margin: auto;
}

/* ===============================
   LUX FORM
================================= */

.lux-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.form-group label {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 8px;
  display: block;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: none;
  border-bottom: 1px solid #ccc;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  background: transparent;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-bottom-color: #c6a75e;
}

.lux-btn {
  align-self: flex-start;
  padding: 12px 30px;
  background: #111;
  color: #fff;
  border: none;
  letter-spacing: 2px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lux-btn:hover {
  background: #c6a75e;
  color: #111;
}

/* ===============================
   LUX TABLE
================================= */

.lux-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
}

.lux-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c6a75e;
  padding-bottom: 15px;
}

.lux-table td {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.table-link {
  margin-right: 15px;
  text-decoration: none;
  color: #111;
}

.table-link:hover {
  color: #c6a75e;
}

.table-delete {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
}

.table-delete:hover {
  color: red;
}
.editorial-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  transition: transform 0.3s, box-shadow 0.3s, border-top 0.3s;
  display: flex;
  flex-direction: column;
}

.editorial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.2);
  border-top: 4px solid #c6a75e; /* gold accent */
}

.editorial-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.3s;
}

.editorial-card:hover img {
  transform: scale(1.05);
}

.editorial-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 15px;
}

.editorial-card p {
  color: #555;
  font-size: 14px;
  margin: 0 15px 15px 15px;
}

/* ===============================
   RECIPE DETAIL PAGE HERO
================================= */
.recipe-hero {
  position: relative;
  background-size: cover;
  background-position: center center; /* adjust to show bottom/top */
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.35);
  z-index:1;
}

.hero-text {
  position: relative;
  z-index:2;
}

.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  margin-bottom: 10px;
}

.hero-text .byline {
  font-size: 16px;
  font-style: italic;
  color: #f0e6d2;
}

/* ===============================
   RECIPE CONTENT
================================= */
.recipe-content {
  max-width: 900px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
}

.ingredients h3,
.instructions h3 {
  font-family: 'Playfair Display', serif;
  margin-bottom: 15px;
}

.ingredient-list {
  list-style: none;
  padding-left: 0;
}

.ingredient-list li {
  background: #fefaf4;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
}

.instructions p {
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
  .recipe-content {
    grid-template-columns: 1fr;
  }

  .recipe-hero {
    height: 350px;
  }

  .hero-text h1 {
    font-size: 36px;
  }
}
/* Grid layout for recipes */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

/* Individual recipe card */
.recipe-card {
  background: #fff9f3; /* warm, inviting tone */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}

.recipe-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
}

/* Recipe image */
.recipe-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.3s;
}

.recipe-card:hover img {
  transform: scale(1.05);
}

.recipe-card .no-image {
  width: 100%;
  height: 220px;
  background: #f0e6e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-style: italic;
}

.recipe-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin: 15px;
}

.recipe-card .byline {
  font-size: 14px;
  color: #555;
  margin: 0 15px 15px 15px;
  font-style: italic;
}

/* Buttons container */
.card-buttons {
  display: flex;
  justify-content: space-around;
  margin: 15px;
}

/* Edit button */
.edit-btn {
  background: #007f5f; /* Caribbean green accent */
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.edit-btn:hover {
  background: #00b386;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Delete button */
.delete-btn {
  background: #b30000;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.delete-btn:hover {
  background: #ff4c4c;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.lux-search-form {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.lux-search-input {
  padding: 6px 12px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #c6a75e;
  outline: none;
  font-size: 13px;
}

.lux-search-input:focus {
  border-color: #ff7f50;
}

.lux-search-form .lux-btn {
  border-radius: 0 6px 6px 0;
  padding: 6px 14px;
  font-size: 13px;
  margin-left: -1px;
}