/* FONT IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');

/* RESETS AND DEFAULTS */
*,
*::before,
*::after {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px red dotted; */
}

/* Optional: A few other useful global settings */
html {
    line-height: 1.5;
    /* A sensible default line height for readability */
    -webkit-font-smoothing: antialiased;
    /* Improves font rendering on WebKit/Blink browsers */
    -moz-osx-font-smoothing: grayscale;
    /* Improves font rendering on Firefox/macOS */
    height: 100%;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    max-height: 100%;
    /* Prevents images from overflowing their containers */
}

input,
button,
textarea,
select {
    font: inherit;
    /* Makes form elements inherit font properties */
}

/* Optional: For accessibility on focus */
:focus-visible {
    outline: 2px solid var(--focus-outline-color, blue);
    /* We'll define --focus-outline-color later */
    outline-offset: 2px;
}

:root {
    /* COLOUR PALETTE */
    --clr-primary: #384C5E;
    --clr-light: #F4F4F4;
    --clr-accent: #EFA00B;

    --clr-neutral-100: #f8f9fa;
    /* Example: Very light grey / off-white (for backgrounds) */
    --clr-neutral-300: #dee2e6;
    /* Example: Light grey (for borders) */
    --clr-neutral-500: #adb5bd;
    /* Example: Medium grey */
    --clr-neutral-700: #495057;
    /* Example: Dark grey (for less important text) */
    --clr-neutral-900: #212529;
    /* Example: Very dark grey / off-black (for main text) */

    --clr-white: #F4F4F4;
    --clr-black: #384C5E;

    /* Semantic Colors */
    --clr-success: #28a745;
    --clr-danger: #dc3545;
    --clr-warning: #ffc107;
    /* use my yellow for this? */

    /* Focus outline color */
    --focus-outline-color: var(--clr-primary);

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

    /* TYPOGRAPHY */
    --font-primary: 'Roboto', sans-serif;
    --font-headings: 'Roboto Serif', serif;

    --fs-base: 1rem;
    /* Approx 16px by default */

    --fs-xs: calc(var(--fs-base) * 0.75);
    /* Extra small */
    --fs-sm: calc(var(--fs-base) * 0.875);
    /* Small */
    --fs-md: var(--fs-base);
    /* Medium (same as base) */
    --fs-lg: calc(var(--fs-base) * 1.25);
    /* Large */
    --fs-xl: calc(var(--fs-base) * 1.5);
    /* Extra Large */
    --fs-xxl: calc(var(--fs-base) * 2);
    /* Double Extra Large */
    --fs-xxxl: calc(var(--fs-base) * 2.5);
    /* Triple Extra Large */

    /* Add more sizes as needed for your headings h1, h2, h3 etc. */
    --fs-h1: calc(var(--fs-base) * 2.5);
    /* Example for H1 */
    --fs-h2: calc(var(--fs-base) * 2);
    /* Example for H2 */
    --fs-h3: calc(var(--fs-base) * 1.75);
    /* Example for H3 */
    --fs-h4: calc(var(--fs-base) * 1.5);
    /* Example for H4 */
    --fs-h5: calc(var(--fs-base) * 1.25);
    /* Example for H5 */
    --fs-h6: calc(var(--fs-base) * 1);
    /* Example for H6 */

    /* Font weights - match the ones you imported from Google Fonts */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    /* If you imported these weights */
    --fw-black: 900;

    /* Other typography settings */
    --line-height-base: 1.5;
    --line-height-headings: 1.2;
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: var(--line-height-base);
    color: var(--clr-primary);
    background-color: var(--clr-light);
    min-height: 100%;
    /* Ensure body takes at least full viewport height */
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
    font-weight: var(--fw-bold);
    /* A common default weight for headings */
    line-height: var(--line-height-headings);
    color: var(--clr-primary);
    /* Using primary color for headings, or use a dark neutral */
    margin-top: 1.5em;
    /* Space above headings */
    margin-bottom: 0.5em;
    /* Space below headings */
}

/* You can then specify individual sizes if you didn't use --fs-h1 etc. in :root
   or if you want to override them for specific headings. */
h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
}

h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
}

h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-medium);
}

p {
    margin-bottom: 1em;
    /* Space after paragraphs. 1em is one times the current font size. */
    max-width: 90ch;
    /* Optional: For better readability, limit line length. 'ch' is character width unit. */
}

/* Ensure paragraphs that are the last child in their container don't add extra bottom margin */
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--clr-primary);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    /* :focus-visible is for keyboard navigation accessibility */
    color: var(--clr-accent);
    text-decoration: underline;
}

ul,
ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
    /* Indentation for bullet points/numbers */
}

li {
    margin-bottom: 0.25em;
    /* Small space between list items */
    max-width: 90ch;
}

.container {
    width: 100%;
    /* Start with full width for smaller screens */
    max-width: 1140px;
    /* Your desired maximum width. Common values: 960px, 1140px, 1280px, 1320px */
    margin: 0 auto;
    padding: 0 15px;
}

/* HEADER */
.site-header {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0.5em;
    /* Make it span the full viewport width */
    z-index: 1000;
    /* Ensure it stays on top of other content */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.site-header * {
    max-height: 15dvh;
}

.main-nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style-type: none;
    margin: 0 auto;
    max-width: 800px;
}

.main-nav ul li a {
    margin-top: 0.5em;
    /* Remove extra top margin for navbar headings */
    font-size: var(--fs-h3);
    font-family: var(--font-headings);
    font-weight: var(--fw-medium);
    text-decoration: underline;
}

.main-nav ul li a:hover {
    text-decoration: none;
}
/* FOOTER */
.site-footer {
    padding: 1em 0;
    /* Space below the content within the footer */
    margin-top: auto;
    /* Helps push footer to bottom if content is short (with flexbox on body later) */
}

.site-footer p {
    margin: 0;
    text-align: center;
    margin: 0 auto;
}

/* MAIN CONTENT AREA */
.main-content {
    /* Or whatever class/ID you have for your main content wrapper */
    padding-top: 4em;
    /* Adjust this value! */
    flex-grow: 1;
}

section {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* INDEX page */
#hero-image {
    max-height: 40vh;
    max-width: 100%;
}

/* PROJECTS and POST pages */
/* CARDS */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    width: 100%;
    gap: 1em;
    padding-top: 10px;
    justify-items: center;
}

.hidden-link {
    text-decoration: none;
    color: inherit;
}

.hidden-link:hover {
    color: inherit;
    text-decoration: none;
}

.card {
    background-color: var(--clr-light);
    border: 1px solid var(--clr-neutral-300);
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: var(--box-shadow-style);
    overflow: hidden;
    /* Important if image is directly child and you want its corners rounded with card */
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 400px;
    min-width: 200px;
    min-height: 300px;
    /* Make card fill the grid cell height, useful for consistent alignment */
    transition: transform 0.3s, z-index 0s 0s;
    position: relative;
}

.card:hover {
    transform: scale(1.1);
    z-index: 10;
}

.card-image-container {
    position: relative;
    /* Needed for the aspect ratio trick */
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--clr-neutral-100);
    /* Placeholder bg while image loads or if no image */
    overflow: hidden;
}

.card-image {
    display: block;
    width: 100%;
    height: 100%;
    /* Will be controlled by aspect ratio container */
    object-fit: cover;
    /* Ensures image covers the area, cropping if necessary, without distorting */
    /* Other options: 'contain', 'fill', 'scale-down' */
}

.card-content {
    padding: 5px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Allows content to fill remaining space if cards have varying text length */
}

.card-title {
    text-align: center;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 8px 0;
    list-style: none;
    margin: 0;
}

.card-tag {
    background-color: var(--clr-primary);
    color: var(--clr-light);
    font-size: var(--fs-xs);
    padding: 4px 6px;
    border-radius: 8px;
    text-transform: capitalize;
}

/* PROJECT and POST pages */
.main-image-container {
    aspect-ratio: 16 / 9;
    max-height: 50dvh;
    margin-bottom: 10px;
}

.main-image-container img {
    object-fit: cover;
    border-radius: 10px;
}

.related-posts-container {
    text-align: left;
    width: 100%;
}

.related-project-container {
    text-align: left;
    width: 100%;
}

/* LINKS */
.links-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.project-links {
    list-style: none;
    display: flex;
    font-size: 2em;
    flex-direction: row;
    justify-content: center; /* This will now work correctly */
    align-items: center;     /* Good practice to add for vertical centering */
    margin: 10px 0;          /* Remove horizontal auto margin, it's not needed here */
    padding: 0;              /* Reset default ul padding */
    gap: 20px;               /* This adds 20px of space BETWEEN each icon */
}

.project-links li {
    color: var(--icon);
    transition: color 0.4s;
    /* REMOVE the padding and margin from here */
    /* They are now handled by the parent's 'gap' property */
    /* margin: 0 auto; <-- REMOVED */
    /* padding: 0 10px 0 10px; <-- REMOVED */

    /* The following lines are optional but good practice */
    display: flex;
    align-items: center;
    justify-content: center;
}
i:hover {
    color: var(--icon-hover);
}