/* Custom styles for the website */

/* Global font: Lora with increased base size */
:root[data-theme],
html,
body {
  font-family: "Lora", serif;
  font-size: 18px;
  font-weight: 400;
}

/* Apply Lora to all text elements */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
li,
td,
th,
.prose,
.prose p,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.btn,
.menu,
.navbar,
.footer,
label,
input,
textarea,
select {
  font-family: "Lora", serif;
}

/* Override DaisyUI theme colors */
:root[data-theme] {
  --a: 49 59 94; /* accent base color changed to #313B5E */
  --ac: 49 59 94; /* accent content color changed to #313B5E */
  --in: 49 59 94; /* info base color changed to #313B5E */
  --inc: 49 59 94; /* info content color changed to #313B5E */
  --color-accent: #313b5e; /* override accent color for strong/code/em text */
}

/* NEW DESIGN: Uniform background color (warm beige/cream like whole grain paper) */
:root[data-theme],
html,
body {
  background-color: #f5f1e8 !important; /* Warm beige/cream color */
}

.drawer-content,
.drawer-content > .grid {
  background-color: #f5f1e8 !important;
}

/* Hero Banner Styles */
.hero-banner {
  position: relative;
  width: 100%;
  height: 60vh; /* 60% of viewport height */
  min-height: 400px;
  max-height: 700px;
  background-image: url("/background_web.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dark overlay on banner for better text readability */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3); /* Subtle dark overlay */
}

/* Hero text container */
.hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  padding: 2rem;
}

/* Hero title styling */
.hero-title {
  font-size: 4rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  font-family: "Lora", serif;
}

/* Hero date styling */
.hero-date {
  font-size: 2rem;
  font-weight: 400;
  margin-top: 1rem;
  font-family: "Lora", serif;
  font-style: italic;
}

/* Responsive hero text */
@media (max-width: 768px) {
  .hero-banner {
    height: 50vh;
    min-height: 300px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-date {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-date {
    font-size: 1.2rem;
  }
}

/* Main content area - clean background with subtle shadow */
.drawer-content main > div {
  background-color: #f5f1e8;
  padding: 2rem;
}

/* Footer styling - match the background */
.drawer-content footer.bg-base-200 {
  background-color: #e8e3d8 !important; /* Slightly darker shade */
}

.drawer-content .bg-base-200 {
  background-color: #e8e3d8 !important;
}

/* Keep sidebar and drawer menu with solid background */
.drawer-content .relative.col-start-1.bg-base-200,
.drawer-side .bg-base-200 {
  background-color: rgb(var(--b2) / var(--tw-bg-opacity)) !important;
}

/* Navbar styling - larger font size and semi-bold */
.navbar .menu a,
.navbar .btn-ghost {
  font-size: 1.15rem;
  font-weight: 500;
}

/* Site title in navbar - even larger */
.navbar-start .btn-ghost {
  font-size: 1.5rem;
  font-weight: 500;
}

/* Mobile drawer menu items - also larger and semi-bold */
.drawer-side .menu a,
.drawer-side .menu button,
.drawer-side .menu summary {
  font-size: 1.1rem;
  font-weight: 500;
}

/* Emphasized text - slightly larger */
em {
  font-size: 1.15em;
  font-weight: 400;
}

/* ====================================
   MODERN SECTION PAGE DESIGN
   ==================================== */

/* Base content section - centered by default */
.content-section {
  padding: 4rem 0;
  margin: 0 auto;
  position: relative;
  max-width: 100%;
}

/* First section - no top padding */
.content-section:nth-child(1) {
  padding-top: 0;
}

/* Alternating backgrounds for sections without images */
.content-section:nth-child(even):not(.section-with-image) {
  background-color: #e8e3d8; /* Slightly darker warm beige */
  margin: 0 -2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.content-section:nth-child(odd):not(.section-with-image) {
  background-color: transparent; /* Original cream */
}

/* Section with image - side-by-side layout */
.content-section.section-with-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  padding: 4rem 0;
  margin: 0;
  max-width: 100%;
  position: relative;
}

/* Image on the left - only the image extends beyond left edge */
.content-section.section-with-image.image-left {
  grid-template-areas: "image content";
}

.content-section.section-with-image.image-left .section-image {
  grid-area: image;
  margin-left: -6rem; /* Image extends to the left */
  width: calc(100% + 6rem); /* Compensate width */
}

.content-section.section-with-image.image-left .section-text {
  grid-area: content;
}

/* Image on the right - only the image extends beyond right edge */
.content-section.section-with-image.image-right {
  grid-template-areas: "content image";
}

.content-section.section-with-image.image-right .section-image {
  grid-area: image;
  margin-right: -6rem; /* Image extends to the right */
  width: calc(100% + 6rem); /* Compensate width */
}

.content-section.section-with-image.image-right .section-text {
  grid-area: content;
}

/* Section image styling */
.section-image {
  height: 100%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section text container */
.section-text {
  padding: 0 2rem;
}

/* Responsive: stack on mobile */
@media (max-width: 1024px) {
  .content-section.section-with-image {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "content" !important;
    gap: 2rem;
  }

  .content-section.section-with-image.image-left .section-image,
  .content-section.section-with-image.image-right .section-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .section-image {
    min-height: 300px;
  }

  .section-text {
    padding: 0 1rem;
  }
}

/* Decorative HR dividers - transform markdown --- into beautiful separators */
.prose hr {
  border: none;
  height: auto;
  text-align: center;
  margin: 4rem 0;
  position: relative;
  overflow: visible;
  background: transparent !important;
}

.prose hr::before {
  content: "❦"; /* Ornamental fleuron */
  display: inline-block;
  font-size: 2rem;
  color: #313b5e;
  position: relative;
  background-color: #f5f1e8;
  padding: 0 2rem;
  z-index: 2;
}

.prose hr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #313b5e 20%,
    #313b5e 80%,
    transparent
  );
  z-index: 1;
}

/* Special styling for HR sections - no background, transparent */
.content-section.hr-section {
  background: transparent !important;
  padding: 2rem 0;
  margin: 0;
}

/* Typography enhancements for section pages */
.prose h1,
.prose-h1 {
  font-size: 3rem;
  font-weight: 600;
  color: #313b5e;
  margin-bottom: 2rem;
  margin-top: 1rem;
  line-height: 1.2;
}

.prose h2 {
  font-size: 2.2rem;
  font-weight: 600;
  color: #313b5e;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e8e3d8;
  padding-bottom: 0.5rem;
}

.prose h3 {
  font-size: 1.6rem;
  font-weight: 500;
  color: #313b5e;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose h4 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #313b5e;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

/* Enhanced paragraph spacing */
.prose p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Lists with better spacing */
.prose ul,
.prose ol {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.prose li {
  margin-bottom: 0.5rem;
}

/* Blockquote as pull quote/highlight */
.prose blockquote {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 300;
  color: #313b5e;
  border-left: 4px solid #313b5e;
  padding-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 3rem 0;
  background-color: rgba(49, 59, 94, 0.03);
}

/* Tables - elegant styling */
.prose table {
  margin: 2rem 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.prose thead {
  background-color: #313b5e;
  color: white;
}

.prose th {
  padding: 1rem;
  font-weight: 600;
  text-align: left;
}

.prose td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e8e3d8;
}

.prose tbody tr:hover {
  background-color: rgba(49, 59, 94, 0.03);
}

/* Strong text - accent color */
.prose strong {
  color: #313b5e;
  font-weight: 600;
}

/* Links - elegant underline */
.prose a {
  color: #313b5e;
  text-decoration: none;
  border-bottom: 1px solid #313b5e;
  transition: all 0.2s ease;
}

.prose a:hover {
  color: #4a5a8e;
  border-bottom-color: #4a5a8e;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-section:not(.section-with-image) {
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .prose h1,
  .prose-h1 {
    font-size: 2.2rem;
  }

  .prose h2 {
    font-size: 1.8rem;
  }

  .prose h3 {
    font-size: 1.4rem;
  }

  .prose blockquote {
    font-size: 1.2rem;
    padding-left: 1rem;
  }

  .section-image {
    min-height: 250px;
  }
}