/* ==========================================================================
   KEN UNIFIED STYLESHEET
   ========================================================================== */

/* ==========================================================================
   ROOT VARIABLES (from root.css)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=VT323&display=swap');

:root {
    --font-main: 'Inter', sans-serif;
    --font-accent: 'VT323', monospace;
    --color-bg-dither-1: #f0f0f0;
    --color-bg-dither-2: #e0e0e0;
    --color-surface: #ffffff;
    --color-text: #222222;
    --color-supplementary-text: rgb(102, 102, 102, 0.75);
    --color-border: #999999;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-highlight-teal: rgb(0, 128, 124);
    --color-bg-teal: rgba(0, 128, 124, 0.3);
    --color-highlight-pink: rgb(255, 0, 255);
    --color-bg-pink: rgba(255, 0, 255, 0.3);
    --color-highlight-gold: rgb(255, 191, 0);
    --color-bg-gold: rgba(255, 191, 0, 0.3);
    --color-dark-gold: rgb(204, 153, 0);
    --color-highlight-blue: rgb(0, 68, 170);
    --color-bg-blue: rgba(0, 68, 170, 0.3);
    --font-size-base: 18px;
    --font-size-h1: calc(var(--font-size-base) * 1.6 * 1.25);
    --font-size-h2: calc(var(--font-size-base) * 1.25);
    --font-size-h3: 1rem;
    --spacing-unit: 10px;
    --border-width: 1px;
    --border-radius: 3px;
}
@media (max-width: 600px) { 

    :root { --font-size-base: 16px; /*! flex-direction: column; */}

}

/* ==========================================================================
   GLOBAL STYLES & RESETS (from mac_theme.css)
   ========================================================================== */

body {
    font-family: var(--font-main);
    font-size: calc(var(--font-size-base) * 0.8);
    color: var(--color-text);
    line-height: calc(var(--font-size-base) * 1);
    background-color: var(--color-bg-dither-2);
    background-image: linear-gradient(45deg, var(--color-bg-dither-1) 25%, transparent 25%, transparent 75%, var(--color-bg-dither-1) 75%),
                      linear-gradient(45deg, var(--color-bg-dither-1) 25%, transparent 25%, transparent 75%, var(--color-bg-dither-1) 75%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: calc(var(--spacing-unit) * 1.6);
}
h1 { font-size: var(--font-size-h1); }
main > h1 { margin-top: 0; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

a {
    color: var(--color-highlight-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-highlight-pink);
    overflow-wrap: break-word; /* Ensure long links break */
    word-wrap: break-word; /* For older browsers */
    max-width: 100%; /* Prevent links from overflowing their container */ 
}
a:hover {
    background-color: var(--color-highlight-blue);
    color: var(--color-surface);
}
a.wikilink-new {
    color: var(--color-highlight-teal);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-highlight-gold);
}
/* ==========================================================================
   CORE RESPONSIVE LAYOUT
   ========================================================================== */

/* --- Mobile First --- */
header {
    width: 100%;
    box-sizing: border-box;
    display: flex; /* ADD THIS */
    flex-direction: column;
    justify-content: space-between; /* ADD THIS to push site name left, utility nav right */
    align-items: center; /* ADD THIS to vertically align items */
    padding: 0; /* ADD/ADJUST PADDING as needed */
    gap: var(--spacing-unit); 
}
header .header-utility-nav { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: var(--spacing-unit); 
}
/* Footer rule remains separate if it was */
footer {
    width: 100%;
    box-sizing: border-box;
}
footer p { margin: 0; padding: 0; }


/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* --- Main Page Container --- */
.site-grid-container {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 calc(var(--spacing-unit) / 2) calc(var(--spacing-unit) * 2) var(--color-shadow);
    padding: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 1);
    margin-bottom: calc(var(--spacing-unit) * 1);
    opacity: 0.9;
}

/* Site name */ 

.site-name a {
    /* Override default link color and border for this specific effect */
    color: transparent; /* Make the base text transparent so only shadows show */
    text-decoration: none; /* Remove any underline */
    border-bottom: none; /* Remove any dotted border */
    font-weight: 900; 
    text-transform: uppercase;
    /* Ensure text is on one line and large enough for the effect */
    white-space: nowrap; /* Prevent the text from wrapping */
    display: inline-block; /* Allows text-shadow to behave predictably */
    font-size: var(--font-size-h1); /* Use your defined H1 font size for prominence */
    line-height: 1; /* Keep line height tight to prevent extra spacing */

    /* Apply multiple text shadows for the staggered printing effect */
    text-shadow:
        2px -2px 0 rgba(0, 128, 124, 0.4),   /* Teal - offset slightly down-right */
        2px 2px 0 rgba(255, 0, 255, 0.3),  /* Pink - offset slightly left */
        -2px -1px 0 rgba(255, 191, 0, 0.4);   /* Gold - offset slightly down */
    /* The '0' after the x and y offsets is the blur-radius, keeping the shadows crisp */
}

/* Adjust hover effect for the site name to maintain the visual style */
.site-name a:hover {
    background-color: transparent; /* Prevent default background on hover */
    color: transparent; /* Keep text transparent on hover */
    border-bottom: none; /* Ensure no border on hover */
    
    /* Optionally, make shadows slightly more opaque or shift them on hover */
    text-shadow:
        0px 0px 0 rgba(0, 128, 124, 1),   /* Teal - fully opaque */
        0px 0px 0 rgba(255, 0, 255, 1),  /* Pink - fully opaque */
        0px 0px 0 rgba(255, 191, 0, 1);   /* Gold - fully opaque */
}


/* --- Flash Messages (from messages.css) --- */
.flash-messages {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 100%;
    max-width: 350px;
    z-index: 1050;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.flash-messages li {
    position: relative;
    font-family: var(--font-mono);
    padding: 1rem 2.5rem 1rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px dotted;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out;
}
.flash-messages .success { background-color: var(--color-bg-teal); border-color: var(--color-highlight-teal); color: var(--color-highlight-teal); }
.flash-messages .error   { background-color: var(--color-bg-gold); border-color: var(--color-highlight-gold); color: var(--color-dark-gold); }
.flash-messages .info    { background-color: var(--color-bg-blue); border-color: var(--color-highlight-blue); color: var(--color-highlight-blue); }

.flash-dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: bold;
    color: inherit;
    opacity: 0.4;
    cursor: pointer;
    padding: 0;
}
.flash-dismiss:hover { opacity: 0.8; }


/* --- Cluster lists -- */ 

.cluster-list { 
    list-style-type: "- "; 
    margin: 0; 
    padding-left: calc(var(--spacing-unit) * 1.6); 
}




/* --- Compact Snippet Box --- */
.snippet-list {
    display: grid;
    grid-template-columns: 1fr; /* Single column snippets by default */
    gap: 0.625rem;
}
.snippet-box {
    height: 200px;
    display: flex;
    position: relative;
    background-color: var(--color-surface);
    background-size: cover;
    background-position: center;
    border: var(--border-width) solid #ddd;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
}
.snippet-box:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.15); }

.snippet-box-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.625em;
    position: relative;
    z-index: 2;
}
.snippet-box h3, .snippet-box p {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}
.snippet-box h3 a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: none;
    font-size: 1.05em;
    /*! white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}
.snippet-box h3 a:hover {
    background-color: transparent;
    color: var(--color-highlight-pink);
}
.snippet-box .snippet-text {
    font-size: 0.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.snippet-meta, .snippet-slugline {
    margin-top: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    padding-top: 0.625em;
    border-top: 1px solid #eee;
}
.snippet-slugline {
    justify-content: left;
    border-top: none;
    margin-top: 0;
    margin-bottom: auto;
    padding-top: 0;
    padding-bottom: 0; 
}
.snippet-slugline p:first-child::after { content: " /  "; padding-right: 0.2em; }  
.snippet-slugline p:last-child::after { content: ""; padding-right: 0.2em; }  
                                         
.snippet-box[style*="background-image"] .snippet-meta { border-top: 1px solid rgba(255, 255, 255, 0.2); }

.snippet-box[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.snippet-box[style*="background-image"] h3 a,
.snippet-box[style*="background-image"] p {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    border-bottom: none;
}
.snippet-box.has-gradient-bg h3 a,
.snippet-box.has-gradient-bg p {
    color: var(--color-text);
    text-shadow: none;
}
.gradient-1 { background: linear-gradient(45deg, var(--color-bg-teal), var(--color-bg-blue)); }
.gradient-2 { background: linear-gradient(135deg, var(--color-bg-pink), var(--color-bg-gold)); }
.gradient-3 { background: linear-gradient(45deg, var(--color-bg-gold), var(--color-bg-teal)); }
.gradient-4 { background: linear-gradient(135deg, var(--color-bg-blue), var(--color-bg-pink)); }


/* ==========================================================================
   REFERENCE LIST (PANDOC)
   ========================================================================== */
/*
  Styles the bibliography section generated by Pandoc.
*/
.references {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: calc(var(--spacing-unit) * 3);
    padding-top: calc(var(--spacing-unit) * 1.6);
    border-top: 1px dotted var(--color-border);
}

.references h2 {
    font-size: var(--font-size-h3); /* Make the "References" title a bit smaller */
    margin-bottom: var(--spacing-unit);
}

/* This creates the hanging indent for each reference entry.
  The first line is pulled left by text-indent, and the entire block
  is pushed right by padding-left, aligning subsequent lines correctly.
*/
.references .csl-entry {
    text-indent: -2em;
    padding-left: 2em;
    margin-bottom: var(--spacing-unit); /* Adds space below each entry */
}


/* ==========================================================================
   BASIC TABLE STYLES
   ========================================================================== */
/*
  Styles for standard <table> elements within the main content area.
*/
.content table {
    width: 100%;
    margin: calc(var(--spacing-unit) * 2) 0;
    border-collapse: collapse; /* Ensures borders are clean and single-lined */
    font-size: 0.9em;
    table-layout: fixed; /* Force fixed table layout */
}

.content th,
.content td {
    padding: var(--spacing-unit);
    /* As requested: top and left alignment */
    text-align: left;
    vertical-align: top;
    /* A subtle border for readability, consistent with other site elements */
    border-bottom: 1px dotted var(--color-border);
    width: auto; /* Allow auto-sizing, or specify percentages for control */
    overflow-wrap: break-word; /* Ensure long words break */
    word-break: break-word; /* For older browsers and better cross-browser support */
}

.content th {
    font-weight: bold;
    background-color: var(--color-bg-dither-1);
    /* A stronger border to separate the header from the body */
    border-bottom: 2px solid var(--color-border);
}

/* Optional: Removes the border from the last row for a cleaner finish */
.content tr:last-child td {
    border-bottom: none;
}
@media (max-width: 899px) {
  .content table {
    display: block;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* Provides smoother scrolling on iOS devices */
  }
}



.standfirst {
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--color-supplementary-text);
    padding-bottom: calc(var(--spacing-unit) * 1.6);
    border-bottom: 1px dotted var(--color-border);
    margin-bottom: 0;
}
.page-metadata, .page-actions, .page-doctype {
    color: var(--color-supplementary-text);
    font-size: 0.9rem;
    list-style: none;
    padding: calc(var(--spacing-unit) * 1.6) 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dotted var(--color-border);
}
.page-doctype {
    border-bottom: none;
    padding: 0;
    padding-bottom: var(--spacing-unit);
}
.page-doctype a {
    color: inherit;
    border-bottom: none; 
}

.page-metadata p, .page-actions p, .page-doctype p { margin: 0; color: var(--color-supplementary-text); }
.page-metadata li, .page-actions li { margin-right: calc(var(--spacing-unit) * 1/1.6); }

button {
    font-family: var(--font-main);
    font-weight: bold;
    background-color: #f0f0f0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
button:hover {
    background-color: var(--color-highlight-gold);
    border-color: var(--color-text);
}

.main-image-container {
    width: 100%;
    margin: 1em auto 1.5em auto;
}
.main-image-container img {
    width: 100%;
    height: auto;
    display: block;
}
.main-image-container figcaption {
    font-size: 0.8em;
    color: var(--color-supplementary-text);
}
.main-image-container .caption { 
    display: inline; 
}
.main-image-container .image-credits { list-style-type: none; display: inline; margin: 0; padding: 0;}
.main-image-container .image-credits::before { content: "("}
.main-image-container .image-credits::after { content: ")"}
.main-image-container .image-credits li { display: inline; list-style-type: none; }
.main-image-container .image-credits li:not(:first-child)::before { content: ", "; }

.media-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.media-item {
    width: 200px;
    max-width: 200px;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.media-item img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
    .main-image-container.portrait,
    .main-image-container.square {
        width: 48%;
        float: right;
        margin-left: 1.5em;
        margin-top: 0.5em;
    }
    .content::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* ==========================================================================
   KEN ADMIN & FUNCTIONAL PAGE STYLES
   ========================================================================== */

/* ==========================================================================
   1. FORMS (Create Page, Search)
   ========================================================================== */
form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}
input[type="text"],
input[type="search"] {
    font-family: var(--font-main);
    font-size: 1.2rem;
    padding: var(--spacing-unit);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    color: var(--color-text);
}
input[type="text"]:focus,
input[type="search"]:focus {
    outline: 2px solid var(--color-highlight-blue);
    border-color: var(--color-highlight-blue);
}
.search-form {
    flex-direction: row;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.search-form .search-input {
    flex-grow: 1;
}
.search-form .search-button {
    padding: var(--spacing-unit);
    background-color: var(--color-highlight-blue);
    color: var(--color-surface);
    border: none;
}
.search-form .search-button:hover {
    background-color: var(--color-text);
}

/* ==========================================================================
   LISTS (Search Results, History, Namespace)
   ========================================================================== */
.results-list,
.revisions,
.namespace-listing ul {
    list-style: none;
    padding: 0;
    margin-top: calc(var(--spacing-unit) * 2);
}
.results-list li,
.revisions li,
.namespace-listing li {
    padding: var(--spacing-unit) 0;
    border-bottom: 1px solid var(--color-bg-dither-1);
}
.results-list .result-title {
    font-size: 1.2em;
    font-weight: bold;
}
.results-list .result-url {
    font-size: 0.9em;
    color: var(--color-supplementary-text);
    margin-bottom: 0.5em;
}
.results-list .result-score {
    font-size: 0.8em;
    font-family: var(--font-accent);
    color: var(--color-highlight-teal);
}
.revisions .revision-byline {
    margin-left: 1.5em;
    font-size: 0.9em;
    color: var(--color-supplementary-text);
}
.namespace-listing {
    margin-top: calc(var(--spacing-unit) * 2);
}
.namespace-listing ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    gap: calc(var(--spacing-unit) * 2);
}
.namespace-listing a {
    font-family: var(--font-accent);
    font-size: 1.1rem;
}

/* ==========================================================================
   PAGE EDITOR (page_edit.html)
   ========================================================================== */
/* ... existing editor styles ... */
form textarea[name="raw_content"] {
    width: 100%;
    min-height: 60vh;
    font-family: var(--font-accent);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    box-sizing: border-box;
}
.edit-actions {
    display: flex;
    gap: var(--spacing-unit);
    margin-top: var(--spacing-unit);
}
.delete-form {
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--color-border);
}
.button-primary { background-color: var(--color-highlight-blue); color: white; }
.button-secondary { background-color: #ccc; color: var(--color-text); }
.button-danger { background-color: #c00; color: white; }

/* ==========================================================================
   SYSTEM & ERROR PAGES
   ========================================================================== */
/* ... existing error page styles ... */
.error-container {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4) var(--spacing-unit);
    margin-top: calc(var(--spacing-unit) * 2);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}
.error-container h1 {
    color: #c00;
}
.error-container .actions {
    list-style: none;
    padding: 0;
    margin-top: calc(var(--spacing-unit) * 2);
}
.error-container .error-code {
    margin-top: calc(var(--spacing-unit) * 2);
    font-family: var(--font-accent);
    color: var(--color-supplementary-text);
}



/* ==========================================================================
   SEQUENCE NAVIGATION
   ========================================================================== */
/*
  Styles the <nav> container for prev/next/up links at the bottom of a page.
  This layout is based on the .page-actions element for consistency.
*/

.sequence-nav {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; REMOVED to allow margin: auto to work */
    align-items: center;
    padding: var(--spacing-unit) 0;
    margin-top: calc(var(--spacing-unit) * 2);
    border-top: 1px dotted var(--color-border);
    font-size: 0.9em;
}

.sequence-nav .nav-link {
    border-bottom: 1px dotted var(--color-highlight-blue);
    padding: calc(var(--spacing-unit) / 2);
    margin: 5px; /* Added margin for spacing between links */
    text-decoration: none;
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.sequence-nav .nav-link.prev {
    margin-right: auto;
}

.sequence-nav .nav-link.next {
    margin-left: auto;
}

@media (max-width: 768px) {
    .sequence-nav {
        justify-content: center;
    }
    .sequence-nav .nav-link {
        width: calc(50% - 10px);
        text-align: center;
    }
    .sequence-nav .nav-link.prev,
    .sequence-nav .nav-link.next {
        margin-left: 5px;
        margin-right: 5px;
    }
}


/* Site nav */

.header-utility-nav .site-actions {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Make list items inline */
    gap: var(--spacing-unit); /* Space between individual list items */
    align-items: center; /* Vertically align items */
}

.header-utility-nav .site-actions li {
    margin: 0; /* Remove default li margins */
    padding: 0; /* Remove default li padding */
}

.header-utility-nav .nav-search-form {
    display: flex; /* Keep it flex for input/button alignment */
    flex-direction: row;
    border: 1px solid var(--color-border); /* Use theme border */
    border-radius: var(--border-radius); /* Use theme border-radius */
    overflow: hidden;
    background-color: var(--color-surface); /* Match header background or choose a contrasting color */
    margin: 0; /* Remove any default margins */
}

.header-utility-nav .nav-search-input {
    border: none;
    padding: 5px 8px; /* Adjust padding for inline fit */
    font-size: 0.9em; /* Keep font size reasonable */
    background: transparent; /* Ensure it doesn't have a conflicting background */
}

.header-utility-nav button.nav-search-button {
    background-color: var(--color-bg-dither-1); /* Use a subtle background */
    border: none;
    padding: 5px 8px; /* Adjust padding */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.header-utility-nav .nav-search-button:hover {
    background-color: var(--color-bg-dither-2);
}
.header-utility-nav .nav-search-button svg {
    fill: var(--color-text); /* Ensure icon color is visible */
}


.header-utility-nav {
    display: flex; /* Show on desktop */
    align-items: flex-start;
    gap: calc(var(--spacing-unit) * 1.5); /* Space between nav list and search form */
}

/* Mobile: Hide the site name in the main header, show the one in the sidebar */
.site-grid-container > header .site-name {
    display: block;
    padding-right: var(--spacing-unit);
}



.cluster-visualization img { 

    margin: 0;
    border: var(--border-width) dotted var(--color-supplementary-text);
    border-radius: var(--border-radius);
}




/* ==========================================================================
   Grid Area Definitions
   ========================================================================== */

/*
 * Mapping of HTML elements to CSS Grid Areas:
 *
 * <header> (direct child of .site-grid-container): site-header
 * <main>: main-content
 * <aside class="site-sidebar"> (Column 1 - Site Actions/Nav): site-nav
 * <aside class="page-relationships"> (Column 3 - Page Info): page-info-col
 * <aside class="recent-activity"> (Column 4 - Recent Activity): recent-activity-col
 * <aside class="topic-clusters"> (Column 5 - Clusters of Pages): clusters-col
 * <footer> (direct child of .site-grid-container): site-footer
 */

/* Assign grid areas to existing HTML elements */
.site-grid-container > header {
    grid-area: site-header;
}

main {
    grid-area: main-content;
}

.page-relationships {
    grid-area: page-info-col;
}

.recent-activity {
    grid-area: recent-activity-col;
}

.topic-clusters {
    grid-area: clusters-col;
}

.site-grid-container > footer {
    grid-area: site-footer;
}

/* ==========================================================================
   Mobile-First Default Layout (Single Column) - Applies to all pages
   < min-width: 800px
   ========================================================================== */

.site-grid-container {
    display: grid;
    /* Define a single column for stacking all content */
    grid-template-columns: 1fr;
    /* Define rows for each major section, allowing them to stack.
       Order: Header, Nav, Main Content, Page Info, Recent Activity, Clusters, Footer. */
    grid-template-rows: auto auto 1fr auto auto auto auto;
    grid-template-areas:
        "site-header"
        "main-content"
        "page-info-col"
        "recent-activity-col"
        "clusters-col"
        "site-footer";
    min-height: 100vh; /* Ensures the container takes at least full viewport height */
    gap: 1rem; 
}

/* Main content area on small screens: 100% width, centered, with max-width */
main {
    width: 100%; /* Ensures it fills available space up to max-width */
    max-width: 44em; /* Comfortable reading column */
    margin: 0 auto 0 0; /* Centers the main content horizontally */
}
a {
    overflow-wrap: anywhere; /* Ensure long links break */
    word-wrap: anywhere·; /* For older browsers */
    max-width: 100%; /* Prevent links from overflowing their container */ 
}


/* Hide page-info, recent-activity, and clusters by default on mobile for admin/edit pages */
/* This ensures they don't appear even if the body class isn't immediately applied or for safety */
body.template-edit .page-relationships,
body.template-edit .recent-activity,
body.template-edit .topic-clusters,
body.template-admin .page-relationships,
body.template-admin .recent-activity,
body.template-admin .topic-clusters {
    display: none;
}


/* ==========================================================================
   Mobile Viewport Adjustments - max-width: 499px
   ========================================================================== */

@media (max-width: 499px) {
    /* Adjustments for the search form within the header utility navigation */

    .header-utility-nav .nav-search-form {
        /* Reduce overall width if it's too wide, e.g., to 90% of its container *
        width: 50%; */
        /* Or set a max-width to prevent it from getting too large on slightly wider narrow screens */
        max-width: 100px; /* Example: Adjust this value as needed */
        margin: 0 auto; /* Center the form if its width is less than 100% */
    }

    .header-utility-nav .nav-search-input {
        padding: 4px 6px; /* Reduce padding for a smaller input field */
        font-size: 0.8em; /* Make the font size slightly smaller */
    }

    .header-utility-nav .nav-search-button {
        padding: 4px 8px; /* Reduce padding for a smaller button */
    }

    .header-utility-nav .nav-search-button svg {
        width: 16px; /* Smaller icon */
        height: 16px; /* Smaller icon */
    }
}

@media (min-width: 635px) { 
    header {
    width: 100%;
    box-sizing: border-box;
    display: flex; /* ADD THIS */
    flex-direction: row;
    justify-content: space-between; /* ADD THIS to push site name left, utility nav right */
    align-items: center; /* ADD THIS to vertically align items */
    padding: 0; /* ADD/ADJUST PADDING as needed */
    gap: var(--spacing-unit); 
    }
    header .header-utility-nav { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: var(--spacing-unit); 
    }
}


/* ==========================================================================
   Medium Viewports - min-width: 800px
   ========================================================================== */

@media (min-width: 800px) {
    /* Reset main content margin and centering for grid alignment */
    main {
        margin: 0 auto 0 0;
        justify-self: center; /* Center main content within its grid column */
    }


    /* Admin and Editing Interface Pages (2 columns) */
    body.template-edit .site-grid-container,
    body.template-admin .site-grid-container {
        grid-template-columns: 1fr; /* Main (wider) */
        grid-template-rows: auto 1fr auto; /* Header, Content Area, Footer */
        grid-template-areas:
            "site-header"
            "main-content"
            "site-footer";
        /* Explicitly hide other aside columns for these page types */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: none;
        }
    }

    /* Home and Content Pages (default for 800-1200px) */
    body.template-home .site-grid-container,
    body:not(.template-home):not(.template-edit):not(.template-admin) .site-grid-container {
        /* Define 4 columns: Nav (150px), Main Content (flexible), Page Info/Recent (300px), Clusters (300px) */
        grid-template-columns: 300px 300px 1fr;
        /* Define rows for Header, Main Content Area, Stacked Asides, Footer */
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "site-header         site-header         site-header" /* Header spans all 4 columns */
            "main-content        main-content        ." /* Nav and Main content area */
            "page-info-col       recent-activity-col ." /* Page Info/Recent (stacked) and Clusters */
            "clusters-col        .                   ." /* Recent activity below page info */
            "site-footer         site-footer         site-footer"; /* Footer spans all 4 columns */

        /* Ensure these are visible for home/content pages */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: block; /* Override any mobile `display: none` */
        }
    }


}


/* ==========================================================================
   Large Viewports - min-width: 950px
   ========================================================================== */

@media (min-width: 950px) {
    /* Admin/Editing Pages Layout (no change from 800px, but re-stated for clarity) */
    body.template-edit .site-grid-container,
    body.template-admin .site-grid-container {
        grid-template-columns: 1fr 1fr; /* Nav | Main (wider) */
        grid-template-areas:
            "site-header site-header"
            "main-content main-content"
            "site-footer site-footer";
        /* Ensure other asides remain hidden */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: none;
        }
    }

    /* Home and Content Pages Layout (3 columns + clusters below main) */
    body.template-home .site-grid-container,
    body:not(.template-home):not(.template-edit):not(.template-admin) .site-grid-container {
        /* Define 3 columns: Nav (150px), Main Content (flexible), Page Info/Recent (300px) */
        grid-template-columns: 1fr 1fr 300px;
        /* Define rows for Header, Main content + Page Info/Recent, Clusters, Footer */
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "site-header       site-header    site-header" /* Header spans all 3 columns */
            "main-content      main-content   page-info-col" /* Nav, Main, Page Info/Recent */
            "main-content      main-content   recent-activity-col" /* Clusters below main, Recent activity below page info */
            "clusters-col      .   ." /* Clusters below main, Recent activity below page info */
            "site-footer       site-footer    site-footer"; /* Footer spans all 3 columns */

        /* Ensure all relevant asides are visible */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: block;
        }
    }
}


/* ==========================================================================
   Large Viewports - min-width: 1250 px
   ========================================================================== */
@media (min-width: 1250px) {
    /* Admin/Editing Pages Layout (no change from 800px, but re-stated for clarity) */
    body.template-edit .site-grid-container,
    body.template-admin .site-grid-container {
        grid-template-columns: 1fr 1fr; /* Nav | Main (wider) */
        grid-template-areas:
            "site-header site-header"
            "main-content main-content"
            "site-footer site-footer";
        /* Ensure other asides remain hidden */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: none;
        }
    }

    /* Home and Content Pages Layout (3 columns + clusters below main) */
    body.template-home .site-grid-container,
    body:not(.template-home):not(.template-edit):not(.template-admin) .site-grid-container {
        /* Define 3 columns: Nav (150px), Main Content (flexible), Page Info/Recent (300px) */
        grid-template-columns: 325px 1fr 300px 300px;
        /* Define rows for Header, Main content + Page Info/Recent, Clusters, Footer */
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "site-header       site-header    site-header    site-header" /* Header spans all 3 columns */
            "main-content      main-content   page-info-col  recent-activity-col" /* Nav, Main, Page Info/Recent */
            "clusters-col      .  .  .  " /* Clusters below main, Recent activity below page info */
            "site-footer       site-footer    site-footer    site-footer"; /* Footer spans all 3 columns */

        /* Ensure all relevant asides are visible */
        .page-relationships,
        .recent-activity,
        .topic-clusters { 
            display: block;
        }
    }
}



/* ==========================================================================
   Extra-Large Viewports - min-width: 1550px
   ========================================================================== */

@media (min-width: 1550px) {

    .site-grid-container {
        max-width: 1600px;  
        margin: auto;
    }
    /* Admin/Editing Pages Layout (no change from 800px, but re-stated for clarity) */
    body.template-edit .site-grid-container,
    body.template-admin .site-grid-container {
        grid-template-columns: 1fr; /* Nav | Main (wider) */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "site-header"
            "main-content"
            "site-footer";
        /* Ensure other asides remain hidden */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: none;
        }
    }

    /* Home and Content Pages Layout (5 columns) */
    body.template-home .site-grid-container,
    body:not(.template-home):not(.template-edit):not(.template-admin) .site-grid-container {
        /* Define 5 columns: Nav (150px), Main (flexible), Page Info (300px), Recent Activity (300px), Clusters (300px) */
        grid-template-columns: 1fr 300px 300px 300px auto;
        /* Define rows for Header, Content Area, Footer */
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "site-header site-header  site-header         site-header         site-header" /* Header spans all 5 columns */
            "main-content page-info-col recent-activity-col clusters-col . " /* All content areas in one row */
            "site-footer site-footer  site-footer         site-footer         site-footer"; /* Footer spans all 5 columns */

        /* Ensure all relevant asides are visible */
        .page-relationships,
        .recent-activity,
        .topic-clusters {
            display: block;
        }
    }
}