/*
  This file can be used for custom CSS that is not easily achievable with Tailwind utility classes,
  or for defining custom components using Tailwind's @layer directive.

  For a pure Tailwind CSS project using the CDN, this file might be minimal or not used extensively
  if all styling is done via utility classes in HTML.

  If you set up Tailwind CSS with a build process (e.g., using PostCSS and the Tailwind CLI),
  you would typically have an input CSS file (e.g., `src/input.css`) where you use Tailwind directives
  like @tailwind base;, @tailwind components;, and @tailwind utilities;.
*/

body {
  font-family: 'Inter', sans-serif; /* Example: Using a Google Font, ensure it's linked in HTML if not web-safe */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Example of a custom utility or component style if needed */
/*
.btn-custom {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
*/

/* You can define custom color variables here if you prefer, though Tailwind's config is the primary place */
:root {
  --brand-primary: #4A90E2; /* Matches primary in Tailwind config */
  --brand-secondary: #50E3C2; /* Matches secondary in Tailwind config */
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  position: relative; /* For positioning pseudo-elements */
}

/* Vertical grid lines */
html::before, 
html::after {
  content: '';
  position: fixed; /* Fixed position to span the entire viewport height */
  top: 0;
  bottom: 0;
  width: 1px; /* Border width */
  background-color: #eaeaea; /* --accents-2 from Vercel/Tailwind config */
  z-index: 1000; /* Ensure they are above most content but below modals/popups if any */
}

html::before {
  left: 24px; /* Adjust this value based on desired page margin/padding */
}

html::after {
  right: 24px; /* Adjust this value based on desired page margin/padding */
}

/* Inner vertical grid lines for the main content area */
.max-w-content {
  position: relative;
}

.max-w-content::before,
.max-w-content::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #eaeaea; /* --accents-2 from Vercel/Tailwind config */
  z-index: 10; /* Lower z-index than fixed outer lines, but above section backgrounds if needed */
}

.max-w-content::before {
  left: 0;
}

.max-w-content::after {
  right: 0;
}

/* Ensure body content doesn't overlap with these fixed lines if html has no padding */
/* body {
  padding-left: 25px; Add 1px more than the line's left offset 
  padding-right: 25px; Add 1px more than the line's right offset 
} */

/* Adjust main content max-width if using body padding for lines */
/* 
.max-w-content, .max-w-header {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; // Or your desired content padding 
  padding-right: 1rem; // Or your desired content padding
}
*/

/* If you want the lines to be part of the scrollable document and not fixed, 
   you would apply them to a wrapper div inside the body instead of html element. */