/* ==========================================================================
   GridHelpers.css
   A lightweight utility stylesheet for layouts and common UI styling.
   ========================================================================== */

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    font-size: 16px;
}

body
{
    margin: 0;
    font-family: serif;
    line-height: 1.5;
    background: var(--color-background);
    color: var(--color-text);
}

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root
{
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.50rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Palette: university presses, engineering manuals, Renaissance scholarship. */
    --color-background: #F7F4EE;  /* Warm parchment */
    --color-surface: #EFEBE1;     /* Parchment, slightly deeper for panels */
    --color-border: #D8D2C4;      /* Light stone */

    --color-text: #1C2430;        /* Deep ink */
    --color-text-muted: #52606D;  /* Slate gray */

    --color-accent: #163A5F;      /* Oxford blue */
    --color-accent-dark: #0F2A45; /* Oxford blue, darker for hover */
    --color-accent-light: #DCE4EC;/* Oxford blue, tinted for backgrounds */

    --color-highlight: #B08D57;   /* Antique brass */

    --color-success: #2d8a34;
    --color-warning: #d48d00;
    --color-danger: #b32727;
}

/* ==========================================================================
   CONTAINERS
   ========================================================================== */

.container
{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

.container-sm
{
    max-width: 640px;
}

.container-md
{
    max-width: 900px;
}

.container-lg
{
    max-width: 1200px;
}

.container-xl
{
    max-width: 1440px;
}

.container-fluid
{
    width: 100%;
}

/* ==========================================================================
   GRID
   ========================================================================== */

.grid
{
    display: grid;
    gap: 1rem;
}

.grid-no-gap
{
    gap: 0;
}

.grid-gap-sm
{
    gap: .5rem;
}

.grid-gap-md
{
    gap: 1rem;
}

.grid-gap-lg
{
    gap: 2rem;
}

/* ----- Columns ----- */

.cols-1  { grid-template-columns: repeat(1, 1fr); }
.cols-2  { grid-template-columns: repeat(2, 1fr); }
.cols-3  { grid-template-columns: repeat(3, 1fr); }
.cols-4  { grid-template-columns: repeat(4, 1fr); }
.cols-5  { grid-template-columns: repeat(5, 1fr); }
.cols-6  { grid-template-columns: repeat(6, 1fr); }
.cols-7  { grid-template-columns: repeat(7, 1fr); }
.cols-8  { grid-template-columns: repeat(8, 1fr); }
.cols-9  { grid-template-columns: repeat(9, 1fr); }
.cols-10 { grid-template-columns: repeat(10, 1fr); }
.cols-11 { grid-template-columns: repeat(11, 1fr); }
.cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Auto-fit */

.cols-auto
{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.cols-fill
{
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ==========================================================================
   GRID SPANS
   ========================================================================== */

.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

/* ==========================================================================
   FLEX ROW HELPERS
   ========================================================================== */

.row
{
    display: flex;
    flex-direction: row;
}

.column
{
    display: flex;
    flex-direction: column;
}

.wrap
{
    flex-wrap: wrap;
}

.nowrap
{
    flex-wrap: nowrap;
}

.gap-sm { gap: .5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }

.align-start  { align-items: flex-start; }
.align-center { align-items: center; }
.align-end    { align-items: flex-end; }
.align-stretch{ align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* ==========================================================================
   SPACING
   ========================================================================== */

/* ----- Margin: All Sides ----- */

.m-0 { margin: 0; }
.m-1 { margin: .25rem; }
.m-2 { margin: .5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 2rem; }
.m-5 { margin: 3rem; }

/* ----- Margin: Top ----- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

/* ----- Margin: Bottom ----- */

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* ----- Margin: Left ----- */

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: .25rem; }
.ml-2 { margin-left: .5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 2rem; }
.ml-5 { margin-left: 3rem; }

/* ----- Margin: Right ----- */

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: .25rem; }
.mr-2 { margin-right: .5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 2rem; }
.mr-5 { margin-right: 3rem; }

/* ----- Margin: Horizontal ----- */

.mh-0 { margin-left: 0; margin-right: 0; }
.mh-1 { margin-left: .25rem; margin-right: .25rem; }
.mh-2 { margin-left: .5rem; margin-right: .5rem; }
.mh-3 { margin-left: 1rem; margin-right: 1rem; }
.mh-4 { margin-left: 2rem; margin-right: 2rem; }
.mh-5 { margin-left: 3rem; margin-right: 3rem; }

/* ----- Margin: Vertical ----- */

.mv-0 { margin-top: 0; margin-bottom: 0; }
.mv-1 { margin-top: .25rem; margin-bottom: .25rem; }
.mv-2 { margin-top: .5rem; margin-bottom: .5rem; }
.mv-3 { margin-top: 1rem; margin-bottom: 1rem; }
.mv-4 { margin-top: 2rem; margin-bottom: 2rem; }
.mv-5 { margin-top: 3rem; margin-bottom: 3rem; }

/* ----- Margin Auto ----- */

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mh-auto { margin-left: auto; margin-right: auto; }
.m-auto  { margin: auto; }

/* ==========================================================================
   PADDING
   ========================================================================== */

/* ----- Padding: All Sides ----- */

.p-0 { padding: 0; }
.p-1 { padding: .25rem; }
.p-2 { padding: .5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 2rem; }
.p-5 { padding: 3rem; }

/* ----- Padding: Top ----- */

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: .25rem; }
.pt-2 { padding-top: .5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 3rem; }

/* ----- Padding: Bottom ----- */

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: .25rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 3rem; }

/* ----- Padding: Left ----- */

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: .25rem; }
.pl-2 { padding-left: .5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 2rem; }
.pl-5 { padding-left: 3rem; }

/* ----- Padding: Right ----- */

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: .25rem; }
.pr-2 { padding-right: .5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 2rem; }
.pr-5 { padding-right: 3rem; }

/* ----- Padding: Horizontal ----- */

.ph-0 { padding-left: 0; padding-right: 0; }
.ph-1 { padding-left: .25rem; padding-right: .25rem; }
.ph-2 { padding-left: .5rem; padding-right: .5rem; }
.ph-3 { padding-left: 1rem; padding-right: 1rem; }
.ph-4 { padding-left: 2rem; padding-right: 2rem; }
.ph-5 { padding-left: 3rem; padding-right: 3rem; }

/* ----- Padding: Vertical ----- */

.pv-0 { padding-top: 0; padding-bottom: 0; }
.pv-1 { padding-top: .25rem; padding-bottom: .25rem; }
.pv-2 { padding-top: .5rem; padding-bottom: .5rem; }
.pv-3 { padding-top: 1rem; padding-bottom: 1rem; }
.pv-4 { padding-top: 2rem; padding-bottom: 2rem; }
.pv-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.text-xs { font-size:.75rem; }
.text-sm { font-size:.875rem; }
.text-md { font-size:1rem; }
.text-lg { font-size:1.25rem; }
.text-xl { font-size:1.5rem; }
.text-2xl { font-size:2rem; }

.text-light  { font-weight:300; }
.text-normal { font-weight:400; }
.text-medium { font-weight:500; }
.text-bold   { font-weight:700; }

.text-left   { text-align:left; }
.text-center { text-align:center; }
.text-right  { text-align:right; }

.text-muted
{
    color: var(--color-text-muted);
}

.text-accent
{
    color: var(--color-accent);
}

.text-success
{
    color: var(--color-success);
}

.text-warning
{
    color: var(--color-warning);
}

.text-danger
{
    color: var(--color-danger);
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a,
.link
{
    color: var(--color-accent);
    text-decoration: none;
}

a:hover,
.link:hover
{
    text-decoration: underline;
}

.link-muted
{
    color: var(--color-text-muted);
}

.link-button
{
    display: inline-block;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn
{
    display: inline-block;
    padding: .6rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    transition: .15s;
}

.btn:hover
{
    opacity: .92;
}

.btn-primary
{
    background: var(--color-accent);
    color: white;
}

.btn-primary:hover
{
    background: var(--color-accent-dark);
}

.btn-secondary
{
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline
{
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-danger
{
    background: var(--color-danger);
    color: white;
}

/* ==========================================================================
   LISTS
   ========================================================================== */

.list
{
    padding-left: 1.25rem;
}

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

.list-inline
{
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   COLORS
   ========================================================================== */

.bg-white
{
    background: white;
}

.bg-light
{
    background: var(--color-surface);
}

.bg-dark
{
    background: #303030;
    color: white;
}

.bg-accent
{
    background: var(--color-accent);
    color: white;
}

.bg-success
{
    background: var(--color-success);
    color: white;
}

.bg-warning
{
    background: var(--color-warning);
    color: white;
}

.bg-danger
{
    background: var(--color-danger);
    color: white;
}

.fg-white
{
    color: white;
}

.fg-dark
{
    color: var(--color-text);
}

.fg-muted
{
    color: var(--color-text-muted);
}

.accent
{
    color: var(--color-accent);
}

.text-highlight
{
    color: var(--color-highlight);
}

.bg-highlight
{
    background: var(--color-highlight);
    color: white;
}

.border
{
    border: 1px solid var(--color-border);
}

.border-accent
{
    border: 1px solid var(--color-accent);
}

.border-highlight
{
    border: 1px solid var(--color-highlight);
}

.border-b
{
    border-bottom: 1px solid var(--color-border);
}

.border-b-accent
{
    border-bottom: 2px solid var(--color-accent);
}

.border-b-highlight
{
    border-bottom: 2px solid var(--color-highlight);
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card
{
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.card-flat
{
    border: none;
    box-shadow: none;
}

.card-elevated
{
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ==========================================================================
   RADIUS
   ========================================================================== */

.round-sm { border-radius: var(--radius-sm); }
.round-md { border-radius: var(--radius-md); }
.round-lg { border-radius: var(--radius-lg); }
.round-full { border-radius: 9999px; }

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.hidden
{
    display: none !important;
}

.block
{
    display: block;
}

.inline
{
    display: inline;
}

.inline-block
{
    display: inline-block;
}

/* ==========================================================================
   WIDTH
   ========================================================================== */

.w-25 { width:25%; }
.w-50 { width:50%; }
.w-75 { width:75%; }
.w-100 { width:100%; }

.h-100
{
    height: 100%;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	font-family: serif;
}