/* base.css
    classless minimal css base
    v1.0 beta
*/
/* Import the variables from var.css */
@import url('var.css');
/* Modern CSS Reset */
*,
*::before,
*::after { margin: 0 0 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }
button { background: none; border: none; cursor: pointer; }
a { text-decoration: none; color: inherit; }
address,
area,
article,
aside,
audio,
blockquote,
datalist,
details,
dl,
fieldset,
figure,
form,
input,
iframe,
meter,
ol,
optgroup,
option,
output,
p,
pre,
progress,
ruby,
section,
table,
textarea,
video { /* Margins for most elements */
	margin-bottom: 1rem; }
.flex-wrapper { display: flex; flex-wrap: wrap; margin: 0 calc(calc(var(--gap) /2) * -1); row-gap: var(--rgap); }
[class^="c-"] { flex: 1 0 auto; padding: 0 calc(var(--gap) / 2); }
.c-1 { flex: 0 0 calc(100% / 12); }
.c-2 { flex: 0 0 calc(100% / 6); }
.c-3 { flex: 0 0 calc(100% / 4); }
.c-4 { flex: 0 0 calc(100% / 3); }
.c-5 { flex: 0 0 calc(100% / 12 * 5); }
.c-6 { flex: 0 0 calc(100% / 2); }
.c-7 { flex: 0 0 calc((100% / 12 * 7)); }
.c-8 { flex: 0 0 calc((100% / 12 * 8)); }
.c-9 { flex: 0 0 calc((100% / 12 * 9)); }
.c-10 { flex: 0 0 calc((100% / 12 * 10)); }
.c-11 { flex: 0 0 calc((100% / 12 * 11)); }
.c-12 { flex: 0 0 calc(100%); }
/* [class^="c-"] > div { background-color: var(--color-primary); padding: var(--base-padding); } */
/* 12-Column Grid Layout */
.grid-wrapper { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
/* Grid Columns (g1-g12) */
.g-1 { grid-column: span 1; }
.g-2 { grid-column: span 2; }
.g-3 { grid-column: span 3; }
.g-4 { grid-column: span 4; }
.g-5 { grid-column: span 5; }
.g-6 { grid-column: span 6; }
.g-7 { grid-column: span 7; }
.g-8 { grid-column: span 8; }
.g-9 { grid-column: span 9; }
.g-10 { grid-column: span 10; }
.g-11 { grid-column: span 11; }
.g-12 { grid-column: span 12; }
[class^="g-"] > div { background-color: var(--color-secondary); padding: var(--base-padding); height: 100%; }
/* Generate reusable classes for row spanning */
.r-1 { grid-row: span 1; /* Span 1 row */ }
.r-2 { grid-row: span 2; /* Span 2 rows */ }
.r-3 { grid-row: span 3; /* Span 3 rows */ }
body { font-family: var(--font-primary); font-size: clamp(var(--min-font-size), 1.5vw, var(--base-font-size)); line-height: clamp(1.4, 2vw, 1.6); /* Responsive line height */
    background-color: var(--color-background); color: var(--color-text); display: flex; flex-direction: column; min-height: 100vh; }
blockquote p { margin-bottom: 0; }
img, video { height: auto; max-width: 100%; }
/* Tables */
table { text-align: justify; width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
td, th { padding: 0.5em; border-bottom: 1px solid var(--color-light); }

label { cursor: pointer; /* Pointer cursor on hover */
    min-width: 10%; }
/* Button Styling */
button { background-color: var(--color-primary); /* Primary background color */
    color: var(--color-light); /* Text color */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */ }
/* Button Hover Effect */
button:hover { background-color: var(--color-primary-dark); /* Darker shade on hover */ }
/* Responsive Typography using clamp() */
h1 { font-size: clamp(var(--min-h1-font-size), 4vw, var(--h1-font-size)); }
h2 { font-size: clamp(var(--min-h2-font-size), 3.5vw, var(--h2-font-size)); }
h3 { font-size: clamp(var(--min-h3-font-size), 3vw, var(--h3-font-size)); }
h4 { font-size: clamp(var(--min-h4-font-size), 2.5vw, var(--h4-font-size)); }
h5 { font-size: clamp(var(--min-h5-font-size), 2vw, var(--h5-font-size)); }
/* Header, Main, and Footer Layout */
header, main, footer { width: 100%; }
header { height: var(--header-height); background-color: var(--color-header); display: flex; align-items: center; box-shadow: var(--box-shadow); }
nav { display: flex; justify-content: space-between; align-items: center; }
.menu { list-style-type: none; display: flex; position: relative; }
.menu > li { position: relative; }
.menu a { text-decoration: none; padding: 15px 20px; color: #333; display: block; }

main { flex: 1; /* Makes the main content take up the available space */
    display: flex; flex-direction: column; }
footer { background-color: var(--color-primary); color: #fff; text-align: center; padding: clamp(12px, 1.5vw, 20px); /* Responsive footer padding */
    margin-top: auto; /* Pushes the footer to the bottom */ }
/* wrapper Class */
.wrapper { max-width: calc(var(--wrapper-max-width) + calc(var(--wrapper-padding) * 2)); width: 100%; margin: 0 auto; padding: 0 var(--wrapper-padding); }
.wrapper-full { max-width: var(--wrapper-fluid); width: 100%; margin: 0 auto; padding: 0 var(--wrapper-padding); }
/* Navigation Menu Styles */
header .logo a { color: #fff; font-weight: bold; }
.menu { list-style: none; display: flex; gap: clamp(1rem, 2vw, 2rem); /* Responsive gap between menu items */
    margin-left: auto; }
.menu a { text-decoration: none; color: #fff; transition: color 0.3s ease; }
.menu a:hover { color: var(--color-secondary); }

.overlay { opacity: clamp(0.5, 1vw, 1); /* Responsive opacity */ }
/* Section Spacing */
section { padding: var(--section-spacing) 0; /* Add top and bottom spacing */ }
caption,legend{overflow:hidden; position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; clip:rect(0,0,0,0);}