/*
 * =============================================
 * PORTFOLIO FOR CREATIVES – MAIN STYLESHEET
 * =============================================
 * Author: James Neufeld
 * Version: 2.1 | Last Updated: April 13, 2025
 * License: GNU General Public License v3.0 (GPL-3.0)
 * https://www.gnu.org/licenses/gpl-3.0.en.html
 * 
 * CONTENTS:                    DESIGN SYSTEM:
 * 1. Base Styles               - Comprehensive color & font theming 🎨
 * 2. Typography                - Mobile-first responsive architecture 📱
 * 3. Layout Components
 * 4. Page Templates
 * 5. Responsive Breakpoints
 * =============================================
 */

/* 
███████  ██████  ███    ██ ████████ ███████ 
██      ██    ██ ████   ██    ██    ██      
█████   ██    ██ ██ ██  ██    ██    ███████ 
██      ██    ██ ██  ██ ██    ██         ██ 
██       ██████  ██   ████    ██    ███████ 
*/

/* ------------------------------- */
/* 🌐 Google Fonts - Customize Your Site's Typography */
/* You can add your own fonts here, but be mindful of performance */
/* ------------------------------- */

/* TODO: Replace these Google Fonts with the ones you want to use on your site. */
/* Remember, the more fonts you load, the longer it can take for your page to load. */

/* space grotesk font */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

/*besley font */
@import url("https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&display=swap");
/* national parks font */
@import url("https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap");
/*

/* 
██ ███    ███ ██████   ██████  ██████  ████████      ██████ ███████ ███████ 
██ ████  ████ ██   ██ ██    ██ ██   ██    ██        ██      ██      ██      
██ ██ ████ ██ ██████  ██    ██ ██████     ██        ██      ███████ ███████ 
██ ██  ██  ██ ██      ██    ██ ██   ██    ██        ██           ██      ██ 
██ ██      ██ ██       ██████  ██   ██    ██         ██████ ███████ ███████ 
*/

/* ------------------------------- */
/* 🔗 Imported Stylesheets */
/* These are external CSS files that add extra effects to your site. */
/* ------------------------------- */

/* TODO: Delete any stylesheets you don't plan to use on your site. */

/* File for animation effects that make elements move (e.g., flying) */
@import url("make-something-fly.css");

/* File for animation effects that make elements blink */
@import url("make-something-blink.css");

/* File for adding a smooth animated gradient background */
@import url("animated-gradient.css");

/* File for adding a glitch animation to your 404 error page */
@import url("error.css");

/* File for adding text stroke (outline) effect */
@import url("text-stroke.css");

/* File for adding stroke shadow effect around text */
@import url("stroke-shadow.css");

/* File with extra experimental styles (e.g., fun animations or effects) */
@import url("experiments.css");

/* File for adding a scroll-to-top button or effect */
@import url("scroll-to-top.css");

/* File for adding accordion functionality to expand/collapse content sections */
@import url("accordian.css");

/* 
██    ██  █████  ██████  ██  █████  ██████  ██      ███████ ███████ 
██    ██ ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██      ██      
██    ██ ███████ ██████  ██ ███████ ██████  ██      █████   ███████ 
 ██  ██  ██   ██ ██   ██ ██ ██   ██ ██   ██ ██      ██           ██ 
  ████   ██   ██ ██   ██ ██ ██   ██ ██████  ███████ ███████ ███████ 
*/

/* ------------------------------- */
/* 🎨 Theme Design Variables */
/* Use CSS variables to quickly change your site's color scheme and typography */
/* ------------------------------- */

/* These design variables store important elements like colours and fonts.
   You can easily change the look and feel of your site by adjusting these values. */

/* TODO: Customize these variables to fit your design. You can add new ones or delete ones you don’t need. */

:root {
  /* Typography */
  --font-family-body: "National Park", serif;
  --font-family-heading: "Besley", serif;
  --font-family-project-title: "Besley", serif;
  /* Core Colours */
  --color-1: #150502;
  --color-2: #24130d;
  --color-3: #402e28;
  --color-4: #57463f;
  --color-5: #74655d;
  --color-6: #8b7e73;
  --color-7: #a89c8d;
  --color-8: #c6baaa;
  --color-9: #e4d7c5;
  --color-10: #f9edd9;
  --color-light-green: #25a969;
  --color-mid-green: #17865b;
  --color-dark-green: #0d6a4c;

  /* font sizes */
  --font-1: 1rem;
  --font-2: 1.125rem;
  --font-3: 1.266rem;
  --font-4: 1.424rem;
  --font-5: 1.602rem;
  --font-6: 1.802rem;
  --font-7: 2.027rem;
  /* Assets */
  --image-noise-texture: url(/assets/temp/noise.svg);
  /* Animation Durations */
  --duration-fast: 0.15s; /* Quick interactions (hover states) */
  --duration-normal: 0.3s; /* Standard transitions (button clicks) */
  --duration-slow: 0.75s; /* Prominent animations (page transitions) */
  /* Rounded Corners */
  --radius-sm: 0.5rem; /* Small interactive elements */
  --radius-md: 1rem; /* Cards/containers */
  --radius-lg: 2rem; /* Large decorative elements */
  --radius-full: 50%; /* Circles/pills */
  /* Padding Scale */
  --padding-tiny: 0.5rem; /* Micro-spacing: icon padding, toggle switches */
  --padding-small: 1rem; /* Compact spacing: mobile buttons, form tags */
  --padding-medium: 2rem; /* Standard spacing: desktop buttons, card content */
  --padding-large: 3rem; /* Section spacing: content blocks, banner padding */
  --padding-jumbo: 4rem; /* Hero elements: full-width containers, page headers */
  --padding-ultra: 8rem; /* Full-bleed spacing: edge-to-edge layouts, super-sized headers */
  /* Flex Gap Scale */
  --gap-tiny: 0.5rem; /* Micro-gap: icon spacing, small button groups */
  --gap-small: 1rem; /* Compact gap: card elements, form fields */
  --gap-medium: 2rem; /* Standard gap: desktop card grids, section items */
  --gap-large: 3rem; /* Section gap: major content blocks, banner spacing */
  --gap-jumbo: 4rem; /* Hero gap: full-width containers, large card spacing */
  --gap-ultra: 8rem; /* Edge-to-edge spacing: mega sections, spacious layouts */
}

/* ======================
   #BASE STYLES
   ====================== */

/* 
███    ███  ██████  ██████  ██ ██      ███████     ███████ ██ ██████  ███████ ████████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██ ██   ██ ██         ██    
██ ████ ██ ██    ██ ██████  ██ ██      █████       █████   ██ ██████  ███████    ██    
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██ ██   ██      ██    ██    
██      ██  ██████  ██████  ██ ███████ ███████     ██      ██ ██   ██ ███████    ██    
*/

/* ------------------------------- */
/* 📱 Responsive Design for Small Devices (Portrait Phones) */
/* No media query needed for small devices like phones under 576px. This is the default in Bootstrap. */
/* ------------------------------- */

/* Add border-box sizing to make layout easier and enable smooth scrolling behavior */
html {
  box-sizing: border-box; /* Makes sure padding and borders don't add extra width to elements */
  scroll-behavior: smooth; /* Adds smooth scrolling between sections */
  /*cursor: url("../assets/temp/up-cursor.png"), auto !important; /* Custom cursor (change the URL below to use your own) */

  /* TODO: Replace the URL above to add a custom cursor. 
     If you want to use the default browser cursor, just delete this line. */
}

/* Ensure all elements, including pseudo-elements, follow border-box sizing */
*,
*:before,
*:after {
  box-sizing: inherit; /* Inherits the border-box setting from the html tag */
}

body {
  font-family: var(--font-family-body);
  color: var(--color-1);
  background: var(--color-10);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ------------------------------- */
/* 🖍️ Text Highlight Styles */
/* This changes the background color when you highlight text (like when you click and drag to select it) */
/* ------------------------------- */

::selection {
  background: var(
    --color-light-green
  ); /* Uses your custom color for highlighted text */
}

/* ---------------------------------------- */
/* 🖼️ Responsive Image Styles */
/* These styles make your images and icons look good on any screen size */
/* ---------------------------------------- */

/* Make all images and SVGs scale nicely */
img,
svg {
  max-width: 100%; /* Keeps the image from getting too big */
  height: auto; /* Keeps the image’s original proportions */
  vertical-align: top; /* Removes little gaps under images (from line-height) */
  object-fit: contain; /* Optional: Makes sure the whole image fits inside its box */
  /* Try 'cover' if you want it to fill the space, or remove this line if not needed */
}

/* ---------------------------------------- */
/* 🎨 Utility Classes for Styling Elements  */
/* Use these helper classes to quickly apply 
   common styles across your portfolio site */
/* ---------------------------------------- */

/* ------------------------ */
/* 📐 Layout & Spacing Tools */
/* ------------------------ */

/* Horizontally centers a block element (must have a defined width) */
.centered-block {
  margin: 0 auto;
}

/* Vertical layout – stacks items in a column (mobile-first) */
.flex-row {
  display: flex;
  flex-direction: column;
}

/* Puts the box on its own line and adds space underneath */
.margin-bottom {
  display: block; /* Makes it a block so it stacks nicely */
  margin-bottom: 1rem; /* Adds space below – helps with layout breathing room */
}

.width-third,
.width-two-thirds {
  width: 100%;
}

/* ---------------------- */
/* ✍️  Typography Helpers */
/* ---------------------- */

/* Optimal line length for readability (~60 characters) */
.max-text-width {
  max-width: 60ch;
}

/* Centers your text (great for headings or buttons) */
.centered-text {
  text-align: center;
}

/* ------------------------------ */
/* 🌀 Animation & Interaction Tools */
/* ------------------------------ */

/* Smooth transition when applying transformations – improves hover experience */
.rotate {
  transition: transform 0.2s ease-out;
}

/* Rotates the element slightly on hover – adds a playful effect */
.rotate:hover {
  transform: rotate(0.7deg);
}

/* ---------------------------------------- */
/* 🎥 Responsive Embedded Video Styles      */
/* These styles keep your videos looking sharp and correctly sized on any device */
/* ---------------------------------------- */

/* The container holds the video and maintains a 16:9 aspect ratio */
.project-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (because 9 ÷ 16 = 0.5625) */
  margin-bottom: 1rem;
}
/* The iframe is absolutely positioned to fill the container */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* 🔤 Global & Mobile Typography                                      */
/* Heading styles that scale nicely for mobile-first, responsive sites */
/* ------------------------------------------------------------------ */

/* 
████████ ██    ██ ██████   ██████   ██████  ██████   █████  ██████  ██   ██ ██    ██ 
   ██     ██  ██  ██   ██ ██    ██ ██       ██   ██ ██   ██ ██   ██ ██   ██  ██  ██  
   ██      ████   ██████  ██    ██ ██   ███ ██████  ███████ ██████  ███████   ████   
   ██       ██    ██      ██    ██ ██    ██ ██   ██ ██   ██ ██      ██   ██    ██    
   ██       ██    ██       ██████   ██████  ██   ██ ██   ██ ██      ██   ██    ██    
*/

/* Heading Styles (h1 - h6) */

h1 {
  font-size: var(--font-7);
  font-family: var(--font-family-heading);
  line-height: 1.1;
  margin-bottom: 1rem;
  font-weight: 800;
  color: var(--color-3);
}

h2 {
  font-size: var(--font-6);
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--color-3);
}

h3 {
  font-size: var(--font-5);
  margin-bottom: 1rem;
  line-height: 1.2;
}

h4 {
  font-size: var(--font-4);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h5 {
  font-size: var(--font-3);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h6 {
  font-size: var(--font-1);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--color-6);
}

/* ------------------------------------------------------------------ */
/* 📝 Paragraph and Text Styles                                       */
/* Base text styles for body copy, bold, italic, and fine print       */
/* ------------------------------------------------------------------ */

p {
  font-size: var(--font-1);
  line-height: 1.3;
  margin-bottom: 1rem;
  color: var(--color-4);
}

strong {
  font-weight: 700; /* Makes text bold */
}

em {
  font-style: italic; /* Adds emphasis with italic style */
}

sup {
  font-size: 0.6em; /* smaller than the surrounding text */
  vertical-align: super; /* ensures it sits above the baseline */
  font-weight: normal; /* optional: adjust weight */
}

/* ------------------------------------------------------------------ */
/* 🎨 Custom Class Styles for Headlines, Projects, and Highlights     */
/* Use these utility classes to style key text elements across pages  */
/* ------------------------------------------------------------------ */

/* Main hero headline — usually sits in the intro section */
.hero-headline {
  max-width: 40ch; /* Optimal line length for readability (~40 characters) */
  text-wrap: balance; /* Prevents awkward line breaks (like elegant typography) */
  margin-inline: auto; /* Horizontally centers the text in its container */
}

/* 🧱 Full-width headings — useful in layouts that span edge-to-edge */
.h1-full-width,
.h2-full-width {
  width: 100%;
  padding: var(--padding-small);
}

.page-contents p {
  max-width: 30rem;
}

/*

██   ██ ██    ██ ██████  ███████ ██████  ██      ██ ███    ██ ██   ██ ███████ 
██   ██  ██  ██  ██   ██ ██      ██   ██ ██      ██ ████   ██ ██  ██  ██      
███████   ████   ██████  █████   ██████  ██      ██ ██ ██  ██ █████   ███████ 
██   ██    ██    ██      ██      ██   ██ ██      ██ ██  ██ ██ ██  ██       ██ 
██   ██    ██    ██      ███████ ██   ██ ███████ ██ ██   ████ ██   ██ ███████ 

*/

/* -------------------------------------------------------------------------- */
/* 🔗 Hyperlink Styles — LVHFA                                                */
/* LVHFA = Link, Visited, Hover, Focus, Active                                */
/* These are the five main states a hyperlink can be in                       */
/* -------------------------------------------------------------------------- */

/* Unvisited link */
a:link {
  color: var(--color-dark-green);
}

/* Visited link — after a user clicks and returns */
a:visited {
  color: var(--color-dark-green);
}

/* Hover — when a user hovers their mouse over the link */
a:hover {
  color: var(--color-light-green);
}

/* Focus — when a link is focused (keyboard navigation) */
:focus {
  outline: 5px solid var(--color-light-green);
}

/* Active — when the link is actively being clicked or tapped */
a:active {
  color: var(--color-dark-green);
  /* Useful for mobile tap interactions */
}

/* -------------------------------------------------------------------------- */
/* 🧭 Previous & Next Project Navigation Arrows                               */
/* These styles are for the left and right arrows used to move between       */
/* individual project pages in your portfolio. Includes stroke effect styles.*/
/* -------------------------------------------------------------------------- */

/* Default and visited state for navigation arrows */

.navigation-arrow:link,
.navigation-arrow:visited {
  color: var(--color-dark-green);
}

/* Hover and active (clicked) states — makes arrows feel interactive */
.navigation-arrow:active,
.navigation-arrow:hover {
  color: var(--color-light-green);
}

/*

 ██████  ██████  ███    ███ ██████   ██████  ███    ██ ███████ ███    ██ ████████ ███████ 
██      ██    ██ ████  ████ ██   ██ ██    ██ ████   ██ ██      ████   ██    ██    ██      
██      ██    ██ ██ ████ ██ ██████  ██    ██ ██ ██  ██ █████   ██ ██  ██    ██    ███████ 
██      ██    ██ ██  ██  ██ ██      ██    ██ ██  ██ ██ ██      ██  ██ ██    ██         ██ 
 ██████  ██████  ██      ██ ██       ██████  ██   ████ ███████ ██   ████    ██    ███████ 
                                                                                          
*/

/* -------------------------------------------------------------------------- */
/* 🔧 Full-Width Section Components                                             */
/* These components create flexible, full-screen sections for your portfolio   */
/* Perfect for highlighting key information and projects                      */
/* -------------------------------------------------------------------------- */

.full-width-section {
  width: 100%;
  min-height: 80vh; /* Takes up most of the screen height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-9); /* Background color for full-width sections */
  margin-bottom: 1rem;
}

.full-width-headline-wrapper {
  width: 100%;
  min-height: 60vh; /* Ensures the headline takes up a good portion of the screen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-small);
  text-align: center; /* Keeps the text centered */
}

.section-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-small);
  margin-bottom: 1rem;
}
.section-item {
  padding: var(--padding-small);
  margin: 1rem;
}

/* 

██     ██  ██████  ██████  ██   ██     ██████   █████   ██████  ███████ 
██     ██ ██    ██ ██   ██ ██  ██      ██   ██ ██   ██ ██       ██      
██  █  ██ ██    ██ ██████  █████       ██████  ███████ ██   ███ █████   
██ ███ ██ ██    ██ ██   ██ ██  ██      ██      ██   ██ ██    ██ ██      
 ███ ███   ██████  ██   ██ ██   ██     ██      ██   ██  ██████  ███████ 

*/

/* -------------------------------------------------------------------------- */
/* 🔲 Work Page Layout Components                                               */
/* These styles create the layout for your work portfolio and project pages    */
/* The goal is to showcase your projects and provide a responsive, clean UI  */
/* -------------------------------------------------------------------------- */

.logo-header {
  width: 6rem;
  padding-bottom: var(--padding-small);
  align-self: center;
  width: fit-content;
}

/* Work wrapper (takes up available space) */
.main-work-section {
  flex: 1;
}

/* Padding around work grid and project page */
.project-wrapper,
.work-sidebar-wrapper {
  padding: var(
    --padding-small
  ); /* Padding to keep content from touching edges */
}

/* Work Sidebar on Mobile */
.work-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: var(--padding-tiny);
  padding-bottom: var(--padding-large);
}

.work-links {
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--padding-tiny);
  padding-top: var(--padding-medium);
  display: flex;
  flex-direction: row;
}

/* Main Work Area with Sidebar on Mobile */
.page-contents {
  width: 100%;
}

/* Defining the work page grid */
.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Creates a responsive grid */
  grid-gap: 1rem; /* Space between grid items */
  /* The auto-fit and minmax() function help ensure responsiveness across screen sizes */
}

/* Individual Work Grid Item */
.work-page-grid-item,
.overlay-container {
  width: 100%;
  height: auto;
  position: relative; /* Needed to position the overlay */
}
/* Masonry Overlay Text */
.overlay-container:hover .overlay {
  opacity: 1;
}

/* Project container for background and padding */
.project-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-9); /* Set project background color */
  outline: 2px solid var(--color-3);
  /* padding: var(--padding-medium); */
  transition: 0.1s;
}
.plain-link {
  text-decoration: none;
}

.project-container:hover {
  outline: 4px solid var(--color-4);
  transition: 0.2s;
}
.project-container:focus {
  outline: 4px solid var(--color-light-green);
  transition: 0.2s;
}

/* Hover effect on work page grid items */
.work-page-grid-item:hover .overlay {
  visibility: visible; /* Make overlay visible on hover */
  opacity: 1; /* Set opacity on hover */
}

.project-details {
  padding: var(--padding-small);
  padding-top: var(--padding-tiny);

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.project-details h6,
.project-details h1,
.project-details p {
  margin-bottom: var(--padding-tiny);
}
.project-details p {
  font-size: var(--font-2);
}

/*

███████ ██ ██████  ███████ ██████   █████  ██████  
██      ██ ██   ██ ██      ██   ██ ██   ██ ██   ██ 
███████ ██ ██   ██ █████   ██████  ███████ ██████  
     ██ ██ ██   ██ ██      ██   ██ ██   ██ ██   ██ 
███████ ██ ██████  ███████ ██████  ██   ██ ██   ██ 
                                                   
                                                   
*/

/* -------------------------------------------------------------------------- */
/* 🗂️ Sidebar Navigation Styles                                                 */
/* This section contains styles for the sidebar navigation on the portfolio    */
/* website. The aim is to create a simple and clean sidebar for better access. */
/* -------------------------------------------------------------------------- */

/* Sidebar navigation list styles */

.sidebar-nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--padding-small);
}

.sidebar-nav-list li {
  display: flex;
  position: relative;
  width: stretch;
  left: 0rem;
  transition: 0.1s ease-out;
}

.sidebar-nav-list li:hover {
  position: relative;
  left: 0.3rem;
  transition: 0.1s ease-out;
}

/* Individual navigation item styles */
.sidebar-nav-item {
  flex: auto;
  padding: var(--padding-small);
  background-color: var(--color-9);
  outline: 2px solid var(--color-6);
  text-align: center;
  text-decoration: none;
}
/* Individual navigation item styles */
.sidebar-nav-item.selected {
  background-color: var(--color-10);
  outline: 2px solid var(--color-8);
}
a.sidebar-nav-item.selected {
  color: var(--color-4);
}

/* Individual navigation item styles */
.sidebar-nav-item:hover {
  background-color: var(--color-10);
}
/* Individual navigation item styles */
.sidebar-nav-item:focus {
  outline: 5px solid var(--color-light-green);
}

.nav-branding-logo {
  width: 13rem;
}

/* ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE
ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE
ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE
ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE
ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE ARCHIVE */

.archive-links {
  display: flex;
  flex-direction: column;
  gap: var(--padding-medium);
}
.archive-links a {
  font-size: var(--font-3);
}

/* 

 █████  ██████   ██████  ██    ██ ████████ 
██   ██ ██   ██ ██    ██ ██    ██    ██    
███████ ██████  ██    ██ ██    ██    ██    
██   ██ ██   ██ ██    ██ ██    ██    ██    
██   ██ ██████   ██████   ██████     ██    
                                           
*/

/* -------------------------------------------------------------------------- */
/* 📚 About Page Grid Styles                                                   */
/* These styles structure the layout of the "About" page using a grid system.  */
/* The grid has 3 main sections: an image, text, and footer.                   */
/* -------------------------------------------------------------------------- */

/* Grid container for the About section */
.about-grid {
  display: grid; /* Set to grid layout */
  grid-template-columns: 1fr; /* Single column layout for mobile and smaller screens */
  grid-gap: 3rem; /* Space between grid items */
  background: var(--color-9); /* Background color for the section */
  padding: var(--padding-medium); /* Padding around the grid */
  flex: 1; /* Flex-grow to take up available space */
}

/* Image section in the About page grid */
.about-grid-image {
  grid-column: 1 / 2; /* Image spans the first column */
  grid-row: 1 / 2; /* Image spans the first row */
  transform: rotate(-2deg);
}

/* Text section in the About page grid */
.about-grid-text {
  grid-column: 1 / 2; /* Text spans the first column */
  grid-row: 2 / 3; /* Text spans the second row */
}

/* 

███████  ██████   ██████  ████████ ███████ ██████  
██      ██    ██ ██    ██    ██    ██      ██   ██ 
█████   ██    ██ ██    ██    ██    █████   ██████  
██      ██    ██ ██    ██    ██    ██      ██   ██ 
██       ██████   ██████     ██    ███████ ██   ██ 
                                                   
*/

/* -------------------------------------------------------------------------- */
/* 📱 MOBILE FOOTER LAYOUT                                                    */
/* Designed with mobile-first approach using CSS Grid                          */
/* -------------------------------------------------------------------------- */

.footer-global {
  display: grid;
  grid-template-columns: 1fr; /* Single column layout */
  grid-gap: 3rem; /* Consistent spacing between sections */
  min-height: auto; /* Allows footer to expand based on content, no fixed height */
  background: var(--color-bg-footer); /* Using CSS variable for theming */
  padding: var(--padding-small); /* Internal spacing */

  /* Note: Using 'fr' units ensures proper scaling across devices */
}

/* -------------------------------------------------------------------------- */
/* 🧩 FOOTER SECTION PLACEMENT                                                */
/* Each component stacks vertically in mobile view                             */
/* -------------------------------------------------------------------------- */

.footer-tagline {
  grid-column: 1 / 2; /* Full width (single column) */
  grid-row: 1 / 2;
}
.footer-highlights {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.footer-contact-social {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
/* -------------------------------------------------------------------------- */
/* 🌊 FULL-WIDTH BOTTOM SECTION                                               */
/* Typically used for copyright/legal information                             */
/* -------------------------------------------------------------------------- */
.footer-full-width {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  text-align: center; /* Center copyright text */
  align-self: end; /* Push to bottom */
}

/* ------------------------------- */
/* 📜 Reusable footer list styles */
/* ------------------------------- */
.footer-list {
  margin-bottom: 2rem;
}
.footer-awards-list {
  margin-bottom: 2rem;
}
.footer-works-list {
  margin-bottom: 2rem;
}
.footer-socials-list {
  margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------- */
/* 📏 Footer Item Spacing                                                     */
/* -------------------------------------------------------------------------- */

/* Apply this class to ALL list items (awards, works, social, bullets) */
.footer-item {
  line-height: 1.2; /* Consistent line height for footer items to improve spacing */
  margin-bottom: 0.25rem;
}

/* ------------------------------- */
/* ▪️ Bullet List Style */
/* Square bullets with compact spacing */
/* ------------------------------- */

.footer-bullet-list {
  list-style-type: square;
  list-style-position: inside;
  margin-bottom: 1rem;
}

.footer-bullet-list .footer-item {
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
  text-indent: -0.5rem; /* Pulls text back toward bullet */
}

/* -------------------------------------------------------------------------- */
/* 🌐 MINIMAL FOOTER (ALTERNATIVE VERSION)                                    */
/* A simpler alternative to the CSS Grid footer - ideal for beginners          */
/* -------------------------------------------------------------------------- */

.footer-global-wrapper {
  padding: var(--padding-small);
}

/* 

██████  ██████   ██████       ██ ███████  ██████ ████████     ██████   █████   ██████  ███████ 
██   ██ ██   ██ ██    ██      ██ ██      ██         ██        ██   ██ ██   ██ ██       ██      
██████  ██████  ██    ██      ██ █████   ██         ██        ██████  ███████ ██   ███ █████   
██      ██   ██ ██    ██ ██   ██ ██      ██         ██        ██      ██   ██ ██    ██ ██      
██      ██   ██  ██████   █████  ███████  ██████    ██        ██      ██   ██  ██████  ███████ 
                                                                                               
*/

/* ---------------------------------------------------------------------------------- */
/* Project Page Layout - This section contains the layout for project pages,         */
/* including the project image, description, sidebar, and navigation arrows.         */
/* ---------------------------------------------------------------------------------- */

/* Wrapper for the main project section and sidebar */
.project-wrapper,
.work-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Full-width wrapper for the project section */
.project-wrapper-full-width {
  width: 100%;
  padding: var(--padding-small);
}

/* Container for the project content with full-width display */
.project-full-width {
  width: 100%;
  margin-bottom: 2rem;
}

/* Sidebar Styles */
.project-aside {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.back-link {
  display: flex;
  gap: var(--padding-tiny);
  align-items: center;
  max-width: fit-content;
  margin-bottom: var(--padding-small);
}

.project-navigation {
  font-size: var(--font-2);
  line-height: 1.2;
}

.project-page-title {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  padding-bottom: var(--padding-small);
}
.project-page-title h1 {
  font-size: 2.2rem;
  margin-bottom: var(--padding-tiny);
}

/* Container for project images with center alignment */
.project-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 1rem; /* Space below the image */
}

/* Container for project description */
.project-description-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: var(--padding-small);
  padding-left: 0;
  width: 100%;
  margin-bottom: 1rem; /* Space below the description */
}
.project-description-container a::before {
  content: url("/assets/images/star-solid-full.svg");
  display: inline-block;
  position: relative;
  top: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.3rem;
}
.project-description-container a {
  font-size: var(--font-3);
  margin-bottom: var(--padding-small);
  margin-top: var(--padding-small);
}

/* Column styles for one-column, two-column and four-column layouts (mobile-first) */
.col-1,
.col-2,
.col-4 {
  width: 100%;
  /* padding: var(--padding-small); */
}

/* Project image styling */
.project-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.super-skinny-image img {
  width: 50%;
}
/* Project details section */
.project-details {
  width: 100%;
  padding: var(--padding-small);
  padding-top: var(--padding-tiny);
  padding-bottom: var(--padding-tiny);
}

/* Previous/Next Arrow Styles */

.project-navigation {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

/* Styling for left and right arrows */
.arrow-left,
.arrow-right {
  width: 50%;
}
.arrow-right {
  text-align: right;
}

.arrow {
  padding: 0;
}

#lightbox {
  display: flex;
  flex-direction: column;

  .lb-dataContainer {
    order: 0;
    margin-bottom: 10px;
  }

  .lb-outerContainer {
    order: 1;
  }
}

/*

██████  ██       ██████   ██████      ██ ██████  ███████ ███████ ██    ██ ███    ███ ███████ 
██   ██ ██      ██    ██ ██          ██  ██   ██ ██      ██      ██    ██ ████  ████ ██      
██████  ██      ██    ██ ██   ███   ██   ██████  █████   ███████ ██    ██ ██ ████ ██ █████   
██   ██ ██      ██    ██ ██    ██  ██    ██   ██ ██           ██ ██    ██ ██  ██  ██ ██      
██████  ███████  ██████   ██████  ██     ██   ██ ███████ ███████  ██████  ██      ██ ███████ 
                                                                                             
*/

/* Blog and Resume page styles */

.text-section {
  width: 100%;
  padding: var(--padding-small);
}
.list-item {
  line-height: 1.3;
  list-style-type: disc;
  margin-left: 1.2rem;
}

/*
███████ ██████  ██████   ██████  ██████  
██      ██   ██ ██   ██ ██    ██ ██   ██ 
█████   ██████  ██████  ██    ██ ██████  
██      ██   ██ ██   ██ ██    ██ ██   ██ 
███████ ██   ██ ██   ██  ██████  ██   ██ 
*/

/* TODO: Customize your 404 Error Page */

/* A great 404 page is a chance to leave a memorable impression when visitors land on a page that doesn't exist. Consider customizing this page to be more engaging, humorous, or on-brand with your site. Check out error.css for the gradient and glitch effect. */

.error-headline-wrapper {
  width: 85%;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--padding-small);
  text-align: center;
  margin: 0 auto;
}

.error-page-animation {
  width: 25rem;
}

.huge-title {
  font-size: 10rem;
}

/*

███████ ██   ██ ███████ ████████  ██████ ██   ██ ██████   ██████   ██████  ██   ██ 
██    ██  ██  ██      ██   █   ██   ██ ██   ██ ██  ██ ██   ██ ██  ██  
███████ █████   █████      ██    ██      ███████ ██████  ██    ██ ██    ██ █████   
     ██ ██  ██  ██    ██    ██       ██  ██ ██  ██ ██    ██ ██    ██ ██  ██  
███████ ██   ██ ███████    ██     ██████ ██   ██ ██████   ██████  ██████  ██   ██ 

*/

/* Sketchbook Page Styles */

.sketchbook-page {
  display: grid;
  place-items: center;
}

/*

███    ███ ███████ ██████  ██  █████       ██████  ██    ██ ███████ ██████  ██ ███████ ███████ 
████  ████ ██      ██   ██ ██ ██   ██     ██    ██ ██    ██ ██      ██   ██ ██ ██      ██      
██ ████ ██ █████   ██   ██ ██ ███████     ██    ██ ██    ██ █████   ██████  ██ █████   ███████ 
██  ██  ██ ██      ██   ██ ██ ██   ██     ██ ▄▄ ██ ██    ██ ██      ██   ██ ██ ██           ██ 
██      ██ ███████ ██████  ██ ██   ██      ██████   ██████  ███████ ██   ██ ██ ███████ ███████ 

*/

/* Media Queries for Layout Adjustments */

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  /* TODO: Adjust  layout for tablets */
}

/* Large devices (desktops, 992px and up) */

/* Switch from mobile to desktop navigation */

@media (min-width: 992px) {
  /* TODO: Add or adjust styles here for large devices. */

  .flex-row {
    flex-direction: row; /* Changes to row layout on larger screens */
  }

  .width-third {
    width: 33.333%;
  }
  .width-two-thirds {
    width: 66.666%;
  }

  h1 {
    font-size: var(--font-7);
  }

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

  h3 {
    font-size: var(--font-5);
  }

  .h1-full-width,
  .h2-full-width {
    width: 70%;
    padding: var(--padding-small);
  }

  .logo-header {
    width: fit-content;
  }

  .sidebar-nav-list {
    flex-direction: column;
  }
  .sidebar-nav-item {
    text-align: left;
  }

  .work-links {
    padding-left: var(--padding-small);
    padding-right: var(--padding-small);
  }

  /* Grayscale filter with full-colour on hover and tap */

  .work-page-grid-item a.grayscale img {
    filter: grayscale(100);
  }

  .work-page-grid-item > a.grayscale:active img,
  .work-page-grid-item > a.grayscale:hover img {
    filter: grayscale(0);
  }

  /* Padding around work grid and project page */
  .project-wrapper,
  .work-sidebar-wrapper {
    padding: var(--padding-medium);
  }

  /* Project Page Flex Direction on Large Devices */
  .project-wrapper,
  .work-sidebar-wrapper {
    flex-direction: row;
  }

  /* Project Full Width Styles */

  .project-wrapper-full-width {
    padding: var(--padding-small);
  }

  /* Main Project Image Area on Large Devices */

  .project-page-title {
    flex-direction: row;
    gap: 2rem;
  }
  .project-page-title h1 {
    font-size: 3rem;
  }

  .back-link {
    margin-bottom: var(--padding-medium);
  }

  .project-image-container,
  .project-description-container {
    flex-direction: column;
  }
  .skinny-image {
    width: 60%;
  }
  .super-skinny-image img {
    width: 30%;
  }

  .section-container {
    width: 80%; /* Adjust this width for larger screens if needed */
    flex-direction: row;
  }

  /* Column styles for two-column and four-column layouts (desktop) */
  .col-2 {
    width: 50%;
  }
  .col-4 {
    width: 25%;
  }

  .project-navigation {
    justify-content: flex-start;
  }

  .arrow {
    padding-right: 1rem;
  }

  /* About Page Grid for Large Devices */

  .about-grid {
    padding: var(--padding-jumbo);
    grid-template-columns: 2fr 3fr;
  }

  .about-grid-image {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .about-grid-text {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  /* ------------------------------- */
  /* 🖥️ FOOTER GRID - DESKTOP LAYOUT */
  /* ------------------------------- */

  .footer-global {
    padding-top: var(--padding-jumbo);
    padding-right: var(--padding-jumbo);
    padding-bottom: 0;
    padding-left: var(--padding-jumbo);
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  }

  /* Column 1: Tagline/Message */
  .footer-tagline {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* Column 2: Awards & Works */
  .footer-highlights {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }

  /* Column 3: Contact & Social */
  .footer-contact-social {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }

  /* ------------------------------- */
  /* 📏 FULL-WIDTH BOTTOM SECTION */
  /* ------------------------------- */
  .footer-full-width {
    grid-row: 2 / 3;
    grid-column: 1 / 4; /* Spans all three columns */
    text-align: center;
    align-self: end; /* Aligns content to bottom */
  }

  /* Work Sidebar on Large Devices */
  .work-sidebar {
    width: 30rem;
    height: 93vh;
    position: -webkit-sticky;
    position: sticky;
    top: var(--padding-medium);
    padding: 0 var(--padding-medium) 0 0;
    bottom: 0;
  }

  /* Main Work Area on Large Devices */
  .page-contents {
    /* width: 75%; */
  }
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  /* TODO: Add styles here for X-large devices. */

  /* .grid {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  } */
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* TODO: Add styles here for XX-large devices. */

  /* .grid {
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  } */
}

/*

███████ ██ ███    ██
██    ██ ████   ██
█████   ██ ██ ██  ██
██    ██ ██  ██ ██
██      ██ ██   ████
                                              
That’s a wrap, class! 🧑‍🎓✨

*/

/* 🎉 You made it to the end! */
/* This is a great place to celebrate your progress, add Easter eggs, or leave notes for your future self. */
/* Happy coding, and don’t forget to take breaks, stay hydrated, and share your work proudly. 💻✨🎨 */