:root {
  /* Light Mode (Default) */
  --themecolor: #212529;
}

@media (prefers-color-scheme: dark) {
  :root {
    --themecolor: var(--h1-color);
    --themesub: var(--color);
  }
}


@font-face {
  font-family: 'toranvic'; /* Choose a name for your font family */
  src: url('toranvic.woff2') format('woff2');
  font-weight: normal; /* Adjust as needed (e.g., bold, 700) */
  font-style: normal;  /* Adjust as needed (e.g., italic) */
  font-display: swap; /* Recommended for better user experience */
}

@font-face {
  font-family: 'sanskrit'; /* Choose a name for your font family */
  src: url('sanskrittoran.woff2') format('woff2');
  font-weight: normal; /* Adjust as needed (e.g., bold, 700) */
  font-style: normal;  /* Adjust as needed (e.g., italic) */
  font-display: swap; /* Recommended for better user experience */
}

/* Custom Font */
@font-face {
  font-family: 'toranvic';
  src: url('toranvic.woff2') format('woff2');
  font-display: swap;
}

.logo-wrapper {
    display: flex;
  justify-content: center;
  padding: 2rem 1rem;
    padding-top: 2rem;
  width: 100%;
  overflow: hidden;
  padding-top: 0px;
}

.powered {
    display: flex;
    flex-direction: column;
    /* This ensures that even on tiny screens, it tries to stick to the right */
    align-items: flex-end; 
    text-align: right;
    margin-bottom: 0px;
}

.main-title {
    font-size: clamp(2.5rem, 10vw, 5rem); /* Slightly smaller minimum for mobile */
    font-weight: 700;
    line-height: 1;
}

.tagline {
font-family: 'Poppins', sans-serif;
  font-size: clamp(0.75rem, 3vw, 1rem);
  font-weight: 500;
  color: var(--themecolor);
  white-space: nowrap;
  margin-top: -0.8rem;
  align-self: flex-end;
  margin-right: -3.6rem;
}

.alt {
    font-family: 'toranvic' !important;
    /* Scale the special letters proportionally */
    font-size: clamp(1.1rem, 5vw, 1.7rem); 
    font-weight: 300;
    vertical-align: middle;
}

/* Mobile First: Stacked (Vertical Grid style) */
.mission-bar {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.mission-item {
    font-family: 'sanskrit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: #abb438;
}

/* Laptop/Desktop: Horizontal (Flex style) */ 
@media (min-width: 400px) {
    .mission-bar {
        flex-direction: row; 
        justify-content: center;
        gap: 4rem; /* Wide spacing for laptops */
    }
}

.content-narrow {
    max-width: 710px; /* Keeps lines of text from getting too long */
    margin: 1rem auto;
    line-height: 2.2;
    padding-bottom: 0px;
    padding-left:10px;
    padding-right:10px;
    padding-top: 2rem;
}

.content-narrow h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--primary);
    display: inherit;
    margin-bottom: 1rem;
}

/* Container for the 5 cards */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    --block-spacing-vertical:0px;
    justify-items: center;
}

/* The Individual "Card" (No Border) */
.tool-item {
    background: transparent; /* Removes Pico's default card background */
    border: none;            /* Removes the border you don't want */
    padding: 0;              /* Minimalist spacing */
    box-shadow: none;        /* Ensures no shadow */
    text-align: left;
    width: 300px;
}

.tool-item img {
    width: 100%;
    height: 150px;           /* Consistent height for icons/images */
    object-fit: cover;       /* Keeps images from stretching */
    border-radius: 4px;      /* Slight softening of corners */
    margin-bottom: 1rem;
    filter: grayscale(0%); /* Optional: makes it look more philosophical/minimal */
    transition: filter 0.3s ease;
}

@media (hover: hover) {
    .tool-item img {
        filter: grayscale(100%);
    }

    .tool-item:hover img {
        filter: grayscale(0%);
    }
}

.tool-item h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
}

.tool-item p {
    font-size: 0.9rem;
    font-style: italic;      /* Good for quotes or short descriptions */
    color: var(--themesub);
    line-height: 1.4;
}

.section-title {
    text-align: left;
    margin-top: 3.3rem;
    letter-spacing: 0.1rem;
}

/* Top section layout */
.footer-top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 1rem;
}

.sitemap ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-quote {
    max-width: 350px;
    font-style: italic;
    text-align: left;
}

/* Center Logo & Copyright */
.footer-center {
    text-align: center;
    margin-bottom: 1rem;
}


.copyright {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Legal Links Horizontal */
.footer-legal {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    opacity: 0.8;
}

/* Responsive Logic */
@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .footer-quote {
        text-align: right;
    }
    
    .footer-legal {
        gap: 5rem;
    }
}

/* Remove Pico's default grey background on click/focus */
.sitemap nav ul li a:focus,
.sitemap nav ul li a:active,
.sitemap nav ul li a:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.sitemap nav ul li {
    background: transparent !important;
    border: none !important;
}

.sitemap nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    flex-direction: column; /* Forces vertical stacking */
}

.sitemap nav li {
    padding: 0;
    margin: 0;
}

.sitemap nav a {
    display: block;        /* This is the "Block" magic */
    padding: 0.5rem 0;    /* Adds vertical space for easier clicking */
    text-decoration: none;
    color: inherit;       /* Keeps your minimalist color scheme */
    transition: padding-left 0.3s ease; /* Subtle hover effect */
}

/* Optional: Slight "nudge" on hover to show it's interactive */
.sitemap nav a:hover {
text-decoration: underline;
}

/* Remove blue color and underlines from footer links */
.sitemap nav a, 
.footer-legal a, 
.tool-link {
    color: inherit !important;}

/* Optional: Define a subtle hover state so users know it's a link */
.sitemap nav a:hover, 
.footer-legal a:hover {
    color: var(--primary) !important; /* Uses your theme's highlight color */
}

/* The Toranvichara Link Style - No Box Version */
.tv-link {
    color: inherit !important;
    text-decoration: none;
    background: transparent !important; /* Removes default background */
    transition: 0.3s ease;
}

/* Laptop/Desktop Only: Underline on Hover */
@media (hover: hover) {
    .tv-link:hover {
        text-decoration: underline !important;
        background-color: transparent !important; /* Safety reset */
    }
}

/* Kills the Blue/Grey Box when clicked or tapped */
.tv-link:focus, 
.tv-link:active {
    color: inherit !important;
    background-color: transparent !important; /* This removes the box in your photo */
    background: none !important;
    box-shadow: none !important; /* Removes the Pico glow/outline */
    outline: none !important;
}

/* Ensure the tool cards don't look like "links" until hovered */
.tool-item a.tv-link {
    text-decoration: none !important;
    color: inherit !important; /* Keeps your natural text color */
    display: block;
}

.tool-item a.tv-link:hover h3 {
    text-decoration: underline; /* Subtle feedback */
}

.tool-item a.tv-link:hover p {
    text-decoration: none; /* Subtle feedback */
}

.ledger-list {
    margin-top: 2rem;
    text-align:center;
    /* Removed border-top from here to prevent it showing when empty */
}

.ledger-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* This adds the top border ONLY when there is an actual item */
.ledger-item:first-child {
    border-top: 1px solid rgba(0,0,0,0.1);
}

.ledger-content {
    flex: 1;
}

.ledger-title {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}

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

.ledger-title a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.ledger-subtitle {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 6px 0 0 0;
    line-height: 1.4;
}

/* Updated Date Typography */
.ledger-date {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
    margin-left: 24px;
    white-space: nowrap;
    font-feature-settings: "tnum"; 
}

/* Empty State adjustment: Ensure it looks clean without the line */
.empty-state {
font-size: 0.95rem;
  font-style: italic;
  opacity: 0.5;
  padding: 0rem 0;
  line-height: 1.6;
  margin: 0px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .ledger-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .ledger-date {
        margin-left: 0;
        margin-top: 12px;
        letter-spacing: 0.08em;
    }
}
.view-more-container {
    margin-top: 1rem;
    text-align: right; /* Aligns with your "No Box" left-aligned style */
}

.view-more-link {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: inherit;
    opacity: 0.6;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.view-more-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Subtle arrow movement on hover */
.view-more-link:hover {
    gap: 8px; /* Slightly moves the arrow */
}