/* =========================================
   AshGray Inspired Theme - Main Stylesheet
   ========================================= */

/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Variables */
:root {
  /* Colors */
  --bg-color: #F8F7F4; /* Warm Cream */
  --surface-color: #FFFFFF;
  --text-main: #111111;
  --text-muted: #666666;
  
  --nav-bg: #EAE6DF; /* Beige/Tan for pill nav */
  --nav-item-active: #F8F7F4;
  
  --accent-button: #EAE6DF;
  --accent-button-hover: #D8D2C8;

  /* Spacing */
  --container-width: 1320px;
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 12px;
  --scoop-radius: 48px;

  /* Typography */
  --font-main: 'Outfit', sans-serif;
  
  /* Shadows */
  --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
  --bg-color: #121212;
  --surface-color: #1E1E1E;
  --text-main: #FFFFFF;
  --text-muted: #A0A0A0;
  --nav-bg: #2A2A2A;
  --nav-item-active: #121212;
  --accent-button: #2A2A2A;
  --accent-button-hover: #333333;
  --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.3);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 4rem;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

img {
  width: 100%;
  display: block;
}

/* Layout */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header & Nav */
.site-header {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-main-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main);
}

.brand-sub-text {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Pill Navigation */
.nav-pill-container {
  background: var(--nav-bg);
  padding: 0.4rem;
  border-radius: 100px;
  display: flex;
  gap: 0.25rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.nav-item {
  padding: 0.6rem 1.5rem;
  border-radius: 100px;
  font-weight: 500;
  color: var(--text-main);
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.nav-item.active {
  background-color: var(--nav-item-active);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.nav-item:hover:not(.active) {
  background-color: rgba(255,255,255,0.2);
}

.mobile-menu-btn {
    display: none;
}
.mobile-nav-overlay {
    display: none;
}

/* Blog Grid - Masonry-ish */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content; /* Ensure rows shrink to fit content */
  gap: 2rem;
}

/* Generic Card Styles with Scoop */
.blog-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden; /* Important for the image */
  background: var(--surface-color);
  height: 500px; /* Fixed height for uniformity in grid cells */
  transition: transform 0.3s ease;
  isolation: isolate; /* Create new stacking context */
}

.blog-card:hover {
  transform: translateY(-4px);
}

/* Link overlay to make entire card clickable except button area theoretically, 
   but practically just link everything and stop propagation on button if needed */
.card-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* The Image Area */
.card-image-wrapper {
  width: 100%;
  height: 100%;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

/* Text Content Overlay */
.card-content-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  width: 100%;
  max-width: 65%; /* Leave room for the scoop on the right */
  z-index: 20;
  pointer-events: none; /* Let clicks pass through */
}

.tags-wrapper {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag-pill {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  padding: 0.25rem 0.8rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-date-pill {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.8rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    position: absolute; 
    top: 2rem; 
    right: 2rem;
    z-index: 20;
}


.card-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: white;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.card-number {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.25rem;
  display: block;
}

/* Gradient Overlay for Text Readability */
.card-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
  z-index: 15;
  pointer-events: none;
}

/* The Scoop Magic */
/* We mask the bottom right corner of the CARD */
.blog-card {
  --scoop-size: 100px;
  mask-image: radial-gradient(circle at bottom right, transparent var(--scoop-size), black calc(var(--scoop-size) + 1px));
  -webkit-mask-image: radial-gradient(circle at bottom right, transparent var(--scoop-size), black calc(var(--scoop-size) + 1px));
  /* Fallback for safety? No, widely supported. */
}

/* The Floating Action Button that fills the scoop space */
/* Wait, if the card is masked, the button cannot be inside the card visually? 
   No, the button sits in the whitespace created by the mask. 
   So the button needs to be placed exactly where the hole is.
   Since the hole is part of the card's bounding box in grid, we can't easily put the button "outside" content wise if we want it to move with the card in flow.
   
   Actually, the easier way to do the Reference Image look is:
   The Card Container simply has a specialized shape.
   The "Button" is actually a separate element visually, OR
   we group [Card] and [Button] in a wrapper.
*/

.card-wrapper {
  position: relative;
  /* Grid placement happens here */
}

.card-action-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px; /* Bit smaller than scoop size to have gap */
  height: 80px;
  background: var(--accent-button);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5; /* Behind the card mask? No, separate */
  color: var(--text-main);
  font-size: 1.5rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.card-action-btn:hover {
  background-color: var(--accent-button-hover);
  transform: scale(1.05) rotate(-45deg);
}

/* Adjust grid spans */
.col-span-12 { grid-column: span 12; }
.col-span-8  { grid-column: span 8; }
.col-span-6  { grid-column: span 6; }
.col-span-4  { grid-column: span 4; }

/* Feature Card Specifics */
.feature-card {
  height: 600px;
}

.feature-card .blog-card {
  height: 100%;
}

/* Post Page Specifics */
.post-container {
    max-width: 800px;
    margin: 4rem auto;
}
.post-header-center {
    text-align: center;
    margin-bottom: 3rem;
}
.post-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.post-meta {
    color: var(--text-muted);
    font-size: 1.1rem;
}
.post-hero-image {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: 3rem;
}
.post-content {
    font-size: 1.2rem;
    line-height: 1.8;
}
.post-content p {
    margin-bottom: 1.5rem;
}

/* Code Blocks */
pre {
    background: rgba(0,0,0,0.05);
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    overflow-x: auto;
    max-width: 100%;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

code {
    font-family: monospace;
    font-size: 0.9em;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .col-span-8, .col-span-6, .col-span-4 {
    grid-column: span 1;
  }
  .col-span-12 {
      grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .col-span-12, .col-span-8, .col-span-6, .col-span-4 {
    grid-column: span 1;
  }
  .site-header {
      flex-direction: column;
      gap: 1.5rem;
  }
  .nav-pill-container {
      width: 100%;
      justify-content: center;
      overflow-x: auto;
  }
}

/* Theme Toggle simplified */
/* Theme Toggle simplified */
.theme-switch {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent; /* Changed from var(--nav-bg) */
  cursor: pointer;
  margin-left: 1rem;
  border: none;
  font-size: 1.2rem;
  color: var(--text-main);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.theme-switch:hover {
    opacity: 0.7;
    transform: rotate(15deg);
}

/* Section Headers */
.section-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-muted);
  margin: 1rem 0 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background-color: currentColor;
  opacity: 0.15;
}

/* Newsletter Section */
.newsletter-section {
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  padding: 5rem 2rem;
  text-align: center;
  margin: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
}

.newsletter-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-main);
}

.newsletter-desc {
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,0.1);
  background: var(--bg-color);
  font-family: var(--font-main);
  font-size: 1rem;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.newsletter-input:focus {
  border-color: var(--text-muted);
}

.newsletter-btn {
  padding: 0 2rem;
  background: var(--text-main);
  color: var(--bg-color);
  border: none;
  border-radius: 100px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.2s, opacity 0.2s;
}

.newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    position: relative;
    padding: 1.5rem 0;
  }

  /* Reset Logo Width and alignment */
  .brand-logo {
    width: auto;
    flex: 0 1 auto; /* Allow shrink but prefer auto */
    margin-right: auto; /* Push others to right */
    justify-content: flex-start;
  }
  
  /* Hide the clock icon on mobile */
  .brand-logo svg {
      display: none;
  }
  
  /* Ensure text doesn't wrap awkwardly */
  .brand-text-col {
      min-width: 0;
  }
  .brand-main-text {
      font-size: 1.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .brand-sub-text {
      font-size: 0.7rem;
      white-space: nowrap;
  }
  
  /* Hide the desktop nav pill */
  .nav-pill-container {
      display: none;
  }

  /* Reset Theme Switch Positioning */
  .theme-switch {
    position: static;
    transform: none;
    margin: 0;
    width: 40px;
    height: 40px;
    font-size: 1.2rem; /* Make icon slightly larger */
    background: transparent !important; /* Force transparent */
    box-shadow: none !important;
    border: none;
    color: var(--text-main); /* Icon takes text color (black on light, white on dark) */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hamburger Button */
  .mobile-menu-btn {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 36px;
      height: 36px;
      padding: 8px 8px 8px 0; /* Remove left padding */
      background: transparent;
      border: none;
      cursor: pointer;
      position: static;
      z-index: 10002; /* Extremely high z-index */
      margin-left: 0; 
      align-items: flex-end; /* Align lines to right */
      gap: 6px;
  }

  .mobile-menu-btn span {
      height: 2px;
      background: var(--text-main);
      transition: all 0.3s ease;
      transform-origin: center;
      border-radius: 2px;
  }
  
  .mobile-menu-btn span:nth-child(1) { width: 100%; }
  .mobile-menu-btn span:nth-child(2) { width: 70%; }
  .mobile-menu-btn span:nth-child(3) { width: 100%; }

  /* Hamburger Animation */
  .mobile-menu-btn.active span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
      width: 100%; /* Reset to full width for X */
  }
  .mobile-menu-btn.active span:nth-child(2) {
      opacity: 0;
      width: 0;
  }
  .mobile-menu-btn.active span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
      width: 100%;
  }

  /* Mobile Dropdown Menu (Side Drawer) */
  /* Mobile Dropdown Menu (Side Drawer) */
  .mobile-nav-overlay {
      position: fixed;
      top: 0;
      right: 0; /* Align to Right */
      left: auto;
      width: 85%; /* Partial Width */
      max-width: 300px;
      height: 100vh;
      background: var(--bg-color); /* Match blog theme bg */
      z-index: 20000; /* Higher than hamburger (10002) to fix Double X */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      transform: translateX(100%); /* Start off-screen right */
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 1; /* Always opaque */
      box-shadow: -10px 0 30px rgba(0,0,0,0.1); 
  }

  .mobile-nav-overlay.active {
      transform: translateX(0);
      opacity: 1;
  }

  .drawer-close-btn {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      width: 44px; /* Fixed width for alignment */
      height: 44px; /* Fixed height for alignment */
      background: transparent;
      border: none;
      color: var(--text-main);
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      z-index: 2; /* Ensure above overlay content */
  }

  /* Mobile Drawer Theme Toggle - Positioned Left of X */
  .mobile-drawer-toggle {
      position: absolute;
      top: 1.5rem;
      right: calc(1.5rem + 44px); /* Exact calculation: right margin + width of close btn */
      width: 44px; /* Same fixed width */
      height: 44px; /* Same fixed height */
      margin: 0 !important; /* Override inline styles */
      background: transparent;
      border: none;
      color: var(--text-main);
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: none !important; /* Remove ANY animation */
      transform: none !important; /* Ensure no scale transforms affecting position */
  }

  .mobile-nav-item {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--text-main);
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      text-decoration: none;
  }
  
  .mobile-nav-overlay.active .mobile-nav-item {
      opacity: 1;
      transform: translateX(0);
  }
  
  /* Stagger animation delay */
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(2) { transition-delay: 0.1s; } /* Adjust for close btn */
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(3) { transition-delay: 0.2s; }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(4) { transition-delay: 0.3s; }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(5) { transition-delay: 0.4s; }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(6) { transition-delay: 0.5s; }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(7) { transition-delay: 0.6s; }

  /* Hide Header Theme Switch on Mobile */
  @media (max-width: 768px) {
      .header-actions .theme-switch {
          display: none;
      }
  }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(2) { transition-delay: 0.2s; }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(3) { transition-delay: 0.3s; }
  .mobile-nav-overlay.active .mobile-nav-item:nth-child(4) { transition-delay: 0.4s; }


  .feature-card {
      height: auto;
      aspect-ratio: 4/5;
  }
  
  .feature-card .blog-card {
      height: 100%;
  }

  .newsletter-section {
    padding: 3rem 1.5rem;
  }
  
  .newsletter-title {
      font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-btn {
    padding: 1rem;
  }
}