/* Basic styles for index.php layout */



body {

    font-family: Arial, Helvetica, sans-serif;

    background-color: #f8f8f8;

    margin: 0;

    padding: 0;

    color: #222;

    text-align: center;

}



main {

    max-width: 1200px;

    margin: 30px auto;

    padding: 24px;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.07);

    min-height: 100vh; /* Ensures main extends to bottom of viewport */

}



h1 {

    font-size: 2em;

    margin-bottom: 16px;

    color: #333;

}



p {

    font-size: 1.1em;

    line-height: 1.6;

}



/* Grid layout for main content */

.maingrid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-template-rows: repeat(5, 1fr);

    gap: 8px;

    width: 1200px;

    margin: 40px auto;

}

    

.story1 {

    grid-row: span 2 / span 2;

}



.story2 {

    grid-row: span 2 / span 2;

}



.story3 {

    grid-row: span 2 / span 2;

    grid-column-start: 1;

    grid-row-start: 3;

}



.story4 {

    grid-row: span 2 / span 2;

    grid-column-start: 2;

    grid-row-start: 3;

}



.storynav {

    grid-column: span 2 / span 2;

    grid-column-start: 1;

    grid-row-start: 5;

}



.headlinenav {

    grid-column: span 2 / span 2;

    grid-column-start: 3;

    grid-row-start: 1;

}



.headline1 {

    grid-column: span 2 / span 2;

    grid-row: span 2 / span 2;

    grid-column-start: 3;

    grid-row-start: 2;

}



.headline2 {

    grid-column: span 2 / span 2;

    grid-row: span 2 / span 2;

    grid-column-start: 3;

    grid-row-start: 4;

}

/* Custom sidebar styles */

.sidebar {

    grid-row: span 5 / span 5;

    grid-column: 5 / 6;      /* Place sidebar in the last column */

    width: 220px;

    background: #eaeaea;

    border-radius: 8px;

    box-shadow: 0 1px 4px rgba(0,0,0,0.05);

    padding: 16px;

    margin: 0;               /* Remove extra margin */

}



.sidebar-cell {

    grid-column-start: 5;

    grid-row-start: 2;

    background: #fff;

    border: 1px solid #ccc;

    border-radius: 4px;

    margin-bottom: 16px;

    padding: 12px;

    box-sizing: border-box;

}



/* Optional: Clear floats after main content */

.clearfix::after {

    content: "";

    display: table;

    clear: both;

}