/* journal.css
   Styles for the brilliantly basic journal page.
*/

/* --- Base & Typography --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.orange-first-letter::first-letter {
  color: #f97316;
  font-weight: 600;
}

h1::first-letter,
h2::first-letter,
h3::first-letter,
h4::first-letter {
  color: #f97316;
  font-weight: 600;
}


/* --- Header & Navigation --- */

/* Style for the hamburger icon lines */
#menu-toggle .icon-top,
#menu-toggle .icon-middle,
#menu-toggle .icon-bottom {
    transition: transform 0.3s ease-in-out;
}

/* Transform into an 'X' when the menu is open */
body.menu-open #menu-toggle path:nth-child(1) {
    transform: rotate(45deg) translate(6px, -6px);
}
body.menu-open #menu-toggle path:nth-child(2) {
    opacity: 0;
}
body.menu-open #menu-toggle path:nth-child(3) {
    transform: rotate(-45deg) translate(-5px, 5px);
}


/* --- Journal Grid --- */

.journal-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem; /* Subtle rounding */
    background-color: #FFFFFF;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.journal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.journal-card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.journal-card:hover .journal-card-image {
    transform: scale(1.05);
}

.journal-card-content {
    padding: 1.5rem;
}

.journal-card-date {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.journal-card-title {
    font-size: 1.25rem;
    font-weight: 500; /* A bit bolder for the title */
    line-height: 1.4;
    margin-top: 0.5rem;
    color: #1a1a1a;
}

.journal-card-caption {
    margin-top: 0.75rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

    /* Page-specific tiny helpers (kept minimal; main look in journal.css & Tailwind) */
    .floating-logo { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50; opacity: .9; }
    .floating-logo:hover { opacity: 1; }
    .prose p { margin-bottom: 1rem; }
    .active-entry { outline: 2px solid #f97316; outline-offset: 2px; }

/* cards */
.journal-card {
  flex: 0 0 70%;          /* card width relative to container */
  max-width: 70%;
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  scroll-snap-align: start;
}

/* active card highlight */
.journal-card.active-entry {
  outline: 3px solid #f97316;
}

/* container */
#journal-scroll-container {
  display: flex;
  gap: 1.5rem; /* spacing between cards */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2rem; /* adjust outer spacing */
}

/* hide scrollbar */
#journal-scroll-container::-webkit-scrollbar {
  display: none;
}
#journal-scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* PARTNERS STYLES */
/* Grid item and logo behavior */
.partners-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 18px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.partners-grid a:hover { transform: translateY(-2px); }

.partner-logo {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  transition: opacity 200ms ease;
}
.partners-grid a:hover .partner-logo { opacity: 1; }

/* Color treatment per background */
.partners-on-dark .partner-logo svg,
.partners-on-dark .partner-logo img {
  filter: invert(1) brightness(1.05) contrast(1.1);
}

.partners-on-light .partner-logo svg,
.partners-on-light .partner-logo img {
  filter: none;
}

/* Sensible max sizing */
.partners-grid .partner-logo { max-width: 220px; max-height: 96px; }

/* Fix: Override hamburger lines to be dark for the light background header (body.antialiased is a good selector anchor) */
.antialiased header .hamburger-line {
    background-color: #1a1a1a; /* Dark color for light header */
}