/*
===============================================================================
VISAREADY WEBSITE STYLES
===============================================================================

This CSS file controls the visual appearance of the VisaReady website.
CSS works by selecting HTML elements and applying styling rules to them.

GLOBAL SETTINGS:
- Change --container-max-width to make the entire site wider/narrower
- Change font-family to use different fonts throughout the site
- Most spacing uses 'rem' units (1rem = 16px by default)

QUICK REFERENCE FOR COMMON CHANGES:
1. Make entire site wider/narrower:
	Change --container-max-width in :root

2. Change site colors:
	Modify color variables in :root section

3. Adjust spacing between sections:
	Change padding/margin in .content-section

4. Adjust card layout:
	Modify variables in .content-section-container

5. Change background colors:
	Use .bg-* utility classes in HTML

6. Modify responsive breakpoints:
	Edit @media queries in mobile responsiveness section

===============================================================================
*/

/* Custom font definition - loads the Lato font from a file */
@font-face {
	font-family: 'LatoNoLig';
	src: url('fonts/Lato-NO-LIGATURES.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*
===============================================================================
GLOBAL VARIABLES - CHANGE THESE TO CONTROL THE ENTIRE SITE
===============================================================================
*/
:root {
	/* MAIN CONTAINER WIDTH - Controls how wide the entire website content is */
	--container-max-width: 1400px; /* Increase this to make site wider, decrease to make narrower */

	/* GLOBAL COLORS - Change these to rebrand the entire site */
	--primary-red: #dc143c;     /* Main red color used for buttons and highlights */
	--primary-green: #2e7d32;   /* Green color used for success elements */
	--primary-blue: #1976d2;    /* Blue color used for info elements */
	--text-dark: #333;          /* Main text color */
	--text-medium: #555;        /* Secondary text color */
	--text-light: #666;         /* Light text color */
	--background-light: #f5f5f5; /* Light background color */

	/* BACKGROUND COLORS - Light, complementary backgrounds */
	--bg-white: white;
	--bg-gray: #f5f5f5;   /* Same as existing background-light */
	--bg-blue: #f0f8ff;   /* Very light blue */
	--bg-green: #f0fff0;  /* Very light green */
	--bg-red: #fff5f5;    /* Very light pink/red */
	--bg-yellow: #fffef0; /* Very light cream/yellow */
	--bg-warm: #fafafa;         /* Warm off-white */
	--bg-cool: #f8f9fa;         /* Cool off-white */
}

/*
===============================================================================
BACKGROUND STYLES
===============================================================================
*/

.bg-white { background: var(--bg-white); }
.bg-gray { background: var(--bg-gray); }
.bg-blue { background: var(--bg-blue); }
.bg-green { background: var(--bg-green); }
.bg-red { background: var(--bg-red); }
.bg-yellow { background: var(--bg-yellow); }
.bg-warm { background: var(--bg-warm); }
.bg-cool { background: var(--bg-cool); }

/*
===============================================================================
FORM ELEMENT STYLES - INPUTS, SELECTS, TEXTAREAS
===============================================================================
*/
select {
	overflow-y: visible;
	max-height: none;
}


/*
===============================================================================
BOX STYLES - Colored boxes for messages and alerts
===============================================================================
*/
.box-red-light {
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
	padding: 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}

.box-yellow-light {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	color: #856404;
	padding: 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}

.box-green-light {
	background: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
	padding: 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}

/*
===============================================================================
GLOBAL TEXT STYLES
===============================================================================
*/

/* New vw-based text sizing system - largest to smallest */
/* Each class represents the vw value used in the preferred value of clamp() */
/* Sizing and spacing only - no formatting */

.text-5vw {
	font-size: max(3rem, 5vw);
	line-height: 1.4;
	margin-top: clamp(-0.51rem, -1.25vw, -0.76rem);
	margin-bottom: clamp(-0.41rem, -1.25vw, -0.62rem);
}

.text-4_75vw {
	font-size: max(3rem, 4.75vw);
	line-height: 1.4;
	margin-top: clamp(-0.48rem, -1.19vw, -0.722rem);
	margin-bottom: clamp(-0.39rem, -1.19vw, -0.59rem);
}

.text-4_5vw {
	font-size: max(3rem, 4.5vw);
	line-height: 1.4;
	margin-top: clamp(-0.46rem, -1.13vw, -0.684rem);
	margin-bottom: clamp(-0.37rem, -1.13vw, -0.56rem);
}

.text-4_25vw {
	font-size: max(3rem, 4.25vw);
	line-height: 1.4;
	margin-top: clamp(-0.43rem, -1.06vw, -0.646rem);
	margin-bottom: clamp(-0.35rem, -1.06vw, -0.529rem);
}

.text-4vw {
	font-size: max(3rem, 4vw);
	line-height: 1.4;
	margin-top: clamp(-0.41rem, -1vw, -0.608rem);
	margin-bottom: clamp(-0.33rem, -1vw, -0.498rem);
}

.text-3_75vw {
	font-size: max(3rem, 3.75vw);
	line-height: 1.4;
	margin-top: clamp(-0.38rem, -0.94vw, -0.57rem);
	margin-bottom: clamp(-0.31rem, -0.94vw, -0.467rem);
}

.text-3_5vw {
	font-size: max(3rem, 3.5vw);
	line-height: 1.4;
	margin-top: clamp(-0.35rem, -0.88vw, -0.532rem);
	margin-bottom: clamp(-0.29rem, -0.88vw, -0.436rem);
}

.text-3_25vw {
	font-size: max(3rem, 3.25vw);
	line-height: 1.4;
	margin-top: clamp(-0.43rem, -0.81vw, -0.633rem);
	margin-bottom: clamp(-0.37rem, -0.81vw, -0.55rem);
}

.text-3vw {
	font-size: max(3rem, 3vw);
	line-height: 1.4;
	margin-top: clamp(-0.38rem, -0.75vw, -0.569rem);
	margin-bottom: clamp(-0.31rem, -0.75vw, -0.466rem);
}

.text-2_75vw {
	font-size: max(2.75rem, 2.75vw);
	line-height: 1.4;
	margin-top: clamp(-0.34rem, -0.69vw, -0.513rem);
	margin-bottom: clamp(-0.28rem, -0.69vw, -0.42rem);
}

.text-2_5vw {
	font-size: max(2.5rem, 2.5vw);
	line-height: 1.4;
	margin-top: clamp(-0.35rem, -0.63vw, -0.507rem);
	margin-bottom: clamp(-0.29rem, -0.63vw, -0.413rem);
}

.text-2_25vw {
	font-size: max(2.25rem, 2.25vw);
	line-height: 1.4;
	margin-top: clamp(-0.3rem, -0.56vw, -0.443rem);
	margin-bottom: clamp(-0.27rem, -0.56vw, -0.4rem);
}

.text-2vw {
	font-size: max(2rem, 2vw);
	line-height: 1.4;
	margin-top: clamp(-0.25rem, -0.5vw, -0.4rem);
	margin-bottom: clamp(-0.22rem, -0.5vw, -0.35rem);
}

.text-1_75vw {
	font-size: max(1.75rem, 1.75vw);
	line-height: 1.4;
	margin-top: clamp(-0.24rem, -0.44vw, -0.367rem);
	margin-bottom: clamp(-0.22rem, -0.44vw, -0.33rem);
}

.text-1_5vw {
	font-size: max(1.5rem, 1.5vw);
	line-height: 1.4;
	margin-top: clamp(-0.24rem, -0.38vw, -0.354rem);
	margin-bottom: clamp(-0.21rem, -0.38vw, -0.32rem);
}

.text-1_25vw {
	font-size: max(1.25rem, 1.25vw);
	line-height: 1.4;
	margin-top: clamp(-0.21rem, -0.31vw, -0.316rem);
	margin-bottom: clamp(-0.17rem, -0.31vw, -0.259rem);
}

.text-1_125vw {
	font-size: max(1.125rem, 1.125vw);
	line-height: 1.4;
	margin-top: clamp(-0.20rem, -0.28vw, -0.300rem);
	margin-bottom: clamp(-0.175rem, -0.28vw, -0.267rem);
}

.text-1vw {
	font-size: max(1rem, 1vw);
	line-height: 1.4;
	margin-top: clamp(-0.19rem, -0.25vw, -0.285rem);
	margin-bottom: clamp(-0.18rem, -0.25vw, -0.274rem);
}


/* Utility classes for text alignment */
.text-center {
	text-align: center;
}

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

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

/* Color modifiers */
.text-primary {
	color: var(--primary-red);
}

.text-info {
	color: var(--primary-blue);
}

/* Weight modifiers */
.text-bold {
	font-weight: bold;
}

.text-underline {
	text-decoration: underline;
	text-decoration-thickness: .02vw;
	text-underline-offset: .04vw;       /* Space between text and underline */
}

.text-green {
	color: var(--primary-green);
}

.text-red {
	color: var(--primary-red);
}

.text-normal {
	font-weight: normal;
}

/*
===============================================================================
LINK COLOR PRESERVATION - Ensures links keep browser default colors
===============================================================================
*/

/* Override text classes to preserve default link colors - using !important for specificity */
a.text-5vw,
a.text-4_75vw,
a.text-4_5vw,
a.text-4_25vw,
a.text-4vw,
a.text-3_75vw,
a.text-3_5vw,
a.text-3_25vw,
a.text-3vw,
a.text-2_75vw,
a.text-2_5vw,
a.text-2_25vw,
a.text-2vw,
a.text-1_75vw,
a.text-1_5vw,
a.text-1_25vw,
a.text-1vw {
	color: revert !important; /* Forces browser default link colors */
}

/*
===============================================================================
RESET STYLES - Makes all browsers behave consistently
===============================================================================
*/

/* Remove default margins from text elements */
h1, h2, h3, h4, h5, h6, p, ul, ol {
	margin: 0;
	line-height: 1.4;
	text-box-trim: both; /* New CSS property - limited browser support */
}

.spacer-_25 {
	display: block;
	height: clamp(0.125rem, 0.25vh, 0.25rem);
	width: clamp(0.125rem, 0.25vw, 0.25rem);
	margin: 0;
}

.spacer-_5 {
	display: block;
	height: clamp(0.25rem, 0.5vh, 0.5rem);
	width: clamp(0.25rem, 0.5vw, 0.5rem);
	margin: 0;
}

.spacer-_75 {
	display: block;
	height: clamp(0.375rem, 0.75vh, 0.75rem);
	width: clamp(0.375rem, 0.75vw, 0.75rem);
	margin: 0;
}

.spacer-1 {
	display: block;
	height: clamp(0.5rem, 1vh, 1rem);
	width: clamp(0.5rem, 1vw, 1rem);
	margin: 0;
}

.spacer-1_25 {
	display: block;
	height: clamp(0.625rem, 1.25vh, 1.25rem);
	width: clamp(0.625rem, 1.25vw, 1.25rem);
	margin: 0;
}

.spacer-1_5 {
	display: block;
	height: clamp(0.75rem, 1.5vh, 1.5rem);
	width: clamp(0.75rem, 1.5vw, 1.5rem);
	margin: 0;
}

.spacer-1_75 {
	display: block;
	height: clamp(0.875rem, 1.75vh, 1.75rem);
	width: clamp(0.875rem, 1.75vw, 1.75rem);
	margin: 0;
}

.spacer-2 {
	display: block;
	height: clamp(1rem, 2vh, 2rem);
	width: clamp(1rem, 2vw, 2rem);
	margin: 0;
}

.spacer-2_25 {
	display: block;
	height: clamp(1.125rem, 2.25vh, 2.25rem);
	width: clamp(1.125rem, 2.25vw, 2.25rem);
	margin: 0;
}

.spacer-2_5 {
	display: block;
	height: clamp(1.25rem, 2.5vh, 2.5rem);
	width: clamp(1.25rem, 2.5vw, 2.5rem);
	margin: 0;
}

.spacer-2_75 {
	display: block;
	height: clamp(1.375rem, 2.75vh, 2.75rem);
	width: clamp(1.375rem, 2.75vw, 2.75rem);
	margin: 0;
}

.spacer-3 {
	display: block;
	height: clamp(1.5rem, 3vh, 3rem);
	width: clamp(1.5rem, 3vw, 3rem);
	margin: 0;
}




/* Makes all elements use border-box sizing (padding/border included in width) */
* {
	box-sizing: border-box;
}

/* Prevent header shift caused by scrollbar appearing/disappearing */
html {
	/* Always reserve space for scrollbar to prevent layout shift */
	scrollbar-gutter: stable;
}

/* Fallback for browsers that don't support scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
	html {
		/* Force scrollbar to always be visible */
		overflow-y: scroll;
	}
}

/* Basic page setup - applies to the entire webpage */
body {
	font-family: 'LatoNoLig', sans-serif; /* Font used throughout the site */
	font-size: 1.2rem;
	margin: 0;          /* Remove default browser margins */
	padding: 0;         /* Remove default browser padding */
	color: var(--text-dark);
}


/* Prevent elements from exceeding their containers */
* {
	max-width: 100%;
	box-sizing: border-box; /* This is already in your CSS */
}


/*
===============================================================================
HEADER SECTION - Top navigation bar
===============================================================================
*/
header {
	background: white;                    /* Header background color */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Drop shadow below header */
	position: sticky;                     /* Header stays at top when scrolling */
	top: 0;                              /* Distance from top of screen */
	z-index: 100;                        /* Ensures header appears above other content */
}

/* Container inside header - controls width and layout */
.header-container {
	max-width: var(--container-max-width); /* Uses global width setting */
	margin: 0 auto;                        /* Centers the container horizontally */
	display: flex;                         /* Use flexbox for simpler control */
	align-items: center;                   /* Set baseline to center for nav */
	justify-content: space-between;        /* Logo left, nav right */
	padding-block: 1rem;
	padding-inline: clamp(1rem, 4vw, 2rem);

}

/* Company logo styling */
.logo {
	height: 6rem;
	width: auto;            /* Width adjusts automatically to maintain proportions */
	margin: 0;              /* No margins needed */
	margin-top: -0.8rem;    /* Nudge logo upward from center baseline */
	padding: 0;             /* No padding needed */
}

/* Navigation menu container */
nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1rem);
	margin: 0;
	padding: 0;
	margin-inline-start: clamp(1rem, 4vw, 2rem);
}

/* Individual navigation links */
nav a {
	text-decoration: none;
	color: var(--text-dark);
	padding: 0.5rem 1rem;
	border-radius: 4px;
	font-weight: 500;
	transition: background-color 0.3s ease;
	font-size: clamp(0.75rem, 1.5vw + 0.38rem, 1.125rem);
}

/* Navigation link hover and active states */
nav a.nav-active { /* When link has "nav-active" class */
	background-color: var(--primary-red);
	color: white;
}

nav a:hover { /* When link has "nav-active" class */
	background-color: var(--primary-green);
	color: white;
}

/*
===============================================================================
LAYOUT UTILITIES - Reusable layout patterns
===============================================================================
*/

/* Two-column grid layout */
.two-column-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.two-column-grid img {
	width: 100%;
	max-width: 600px;
	height: auto;
}

/*
===============================================================================
BUTTON STYLES - Used throughout the site
===============================================================================
*/
/* Base button styling - applies to all buttons */
.button {
	display: inline-block;               /* Makes links behave like buttons */
	padding: 0.75rem 1.2rem;             /* top (& bottom), left (& right), bottom, right */
	font-size: 1rem;                     /* Text size */
	font-weight: bold;                   /* Bold text */
	text-align: center;                  /* Centered text */
	text-decoration: none;               /* Remove underline if it's a link */
	border: none;                        /* Remove border */
	border-radius: 4px;                  /* Rounded corners */
	cursor: pointer;                     /* Hand cursor on hover */
	transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color transitions */
	font-family: 'LatoNoLig', sans-serif; /* Use site font */
	margin: 0rem;
}

/* Red button variant */
.button-red {
	background-color: var(--primary-red); /* Red background */
	color: white;                          /* White text */
}
.button-red:hover { /* When hovering over red button */
	background-color: green; /* Teal background */
}

/* Blue button variant */
.button-blue {
	background-color: var(--primary-blue); /* Blue background */
	color: white;                           /* White text */
}
.button-blue:hover { /* When hovering over blue button */
	background-color: #87ceeb; /* Light blue background */
	color: black;              /* Black text */
}

/* Green button variant */
.button-green {
	background-color: var(--primary-green); /* Green background */
	color: white;                            /* White text */
}

.button-green:hover { /* When hovering over green button */
	background-color: #90ee90; /* Light green background */
	color: black;              /* Black text */
}

.button:focus,
nav a:focus {
	outline: 2px solid var(--primary-blue);
	outline-offset: 2px;
}






/* Center buttons properly within cards */
.card-item .section-buttons {
	text-align: center;     /* Ensure button container is centered */
	width: 100%;            /* Full width for proper centering */
}

.card-item .section-buttons .button {
	margin-left: 0;         /* Remove left margin */
	margin-right: 0;        /* Remove right margin */
	margin-top: 0.75rem;    /* Keep vertical spacing */
	margin-bottom: 0.75rem; /* Keep vertical spacing */
}

.button-group-centered {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}

/*
===============================================================================
MISC STYLES
===============================================================================
*/

.visaready-pulse {
	animation: vr-pulse 0.6s ease-out;
}

@keyframes vr-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
	50%  { box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/*
===============================================================================
CARD SECTION - Four cards showing visa problems
===============================================================================

IMPORTANT: All card appearance is controlled by the variables below.
Change these variables to modify all four cards at once:

Card Dimensions:
- --grid-gap: Space between cards
- --card-min-width: Minimum width of each card
- --card-min-height: Minimum height of each card

Card Appearance:
- --card-background: Card background color
- --card-padding: Inner spacing inside cards
- --card-border-radius: How rounded the corners are
- --card-shadow: Drop shadow effect

Content Styling:
- --icon-size: Size of the icons
- --title-size: Size of card titles
- --description-size: Size of card text
- --highlight-color: Color of emphasized text
===============================================================================
*/

/* Card section container with centralized card control */
.content-section-container {
	--card-width: 100%; /* Keep default */
	max-width: var(--container-max-width);
	margin: 0 auto;

	/* LAYOUT CONTROL */
	--grid-gap: clamp(1rem, 3.33vw, 2rem); /* Reduced from 5vw, with min/max bounds */
	--grid-column-min-width: clamp(15rem, 30vw + 7.5rem, 22rem);

	/* CARD DIMENSIONS */
	--card-width: 100%;
	--card-min-width: auto;
	--card-max-width: clamp(280px, 70vw, 360px);
	--card-height: auto;
	--card-min-height: auto;
	--card-max-height: none;

	/* CARD APPEARANCE */
	--card-padding: clamp(0.75rem, 2.5vw, 1.5rem);
	--card-background: white;
	--card-border-radius: 8px;
	--card-shadow: 0 4px 8px rgba(0,0,0,0.1);

	/* IMAGE STYLING */
	--image-size-small: 150px;
	--image-size-medium: 200px;
	--image-size-large: 350px;
	--image-size: clamp(120px, 30vw, 200px);
	--image-margin-bottom: -0.5rem;
}

/* Grid container that arranges the four cards */
.card-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);
	justify-items: center;
	justify-content: center;
}

/* Individual card styling */
.card-item {
	/* DIMENSIONS - Uses the centralized variables defined above */
	width: var(--card-width); /* Use existing variable instead of hardcoded clamp */
	max-width: clamp(18rem, calc(36vw + 9rem), 23rem); /* Move the sizing logic to max-width */

	height: var(--card-height);
	min-height: var(--card-min-height);
	max-height: var(--card-max-height);

	/* APPEARANCE - Uses the centralized variables */
	background: var(--card-background);
	padding: var(--card-padding);         /* Inner spacing inside card */
	border-radius: var(--card-border-radius); /* Rounded corners */
	box-shadow: var(--card-shadow);       /* Drop shadow effect */

	/* LAYOUT */
	text-align: center;       /* Centers all text inside card */
	display: flex;            /* Uses flexbox layout */
	flex-direction: column;   /* Stacks content vertically */
	align-items: center;      /* Centers content horizontally */
	position: relative;       /* Allows for z-index layering */
}

/* Invisible placeholder card to maintain grid structure */
.invisible-placeholder {
	visibility: hidden; /* Makes card invisible but maintains layout space */
}

/* Services page specific styling */
.services-page .content-section-container {
	--image-size: clamp(7.8rem, 15.6vw, 15.6rem); /* 25% larger than current 6.25rem, 12.5vw, 12.5rem */
}

.services-page .content-section-container .card-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--grid-gap);
	grid-template-columns: none; /* Disable grid columns */
}

.services-page .content-section-container .card-item {
	flex: 0 0 auto;
	width: min(536px, 90vw); /* Never exceed 90% viewport width */
	max-width: min(536px, 90vw); /* Same constraint */
}





/* Image container within each card */
.card-image {
	margin-bottom: 0; /* Space below image */
	height: var(--image-size);                 /* Image container height */
	width: var(--image-size);                  /* Image container width */
	display: flex;            /* Centers the image */
	align-items: center;      /* Centers vertically */
	justify-content: center;  /* Centers horizontally */
	z-index: 1;              /* Places image behind text if they overlap */
}

/* The actual image */
.card-image img {
	width: var(--image-size);   /* Image width */
	height: var(--image-size);  /* Image height */
	object-fit: contain;       /* Keeps image proportions, fits within container */
}

/* Balanced spacing for card sections */
.balanced-spacing {
	padding: 4rem 2rem;
}

/* Centered image container */
.centered-image {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Narrower card for service details */
.narrow-card {
	max-width: 900px;
	margin: 0 auto;
}

/*
===============================================================================
LIST SECTION - Benefits list and call-to-action
===============================================================================
*/
.content-section {
	padding: 2.2rem;
}

/* Light background variant for sections */
.section-light-bg {
	background-color: var(--background-light); /* Use the same light gray as card sections */
}

/* List container */
.content-list {
	list-style: none;     /* Remove bullet points */
	padding: 0;          /* Remove default padding */
}

/* Individual list item */
.list-item {
	display: flex;               /* Arranges checkmark and text side-by-side */
	align-items: flex-start;     /* Aligns items to top */
	margin-bottom: 2rem;         /* Space between list items */
	padding: 1rem;               /* Inner spacing */
	background: #f9f9f9;         /* Light gray background */
	border-radius: 8px;          /* Rounded corners */
}

/* Checkmark icon */
.list-icon {
	color: var(--primary-green); /* Green checkmark */
	font-size: 1.5rem;          /* Large checkmark */
	font-weight: bold;          /* Bold checkmark */
	margin-right: 1rem;         /* Space to the right */
	flex-shrink: 0;             /* Prevents checkmark from shrinking */
}

/* Text content area of list item */
.list-content {
	flex: 1; /* Takes up remaining space */
}

/* Button container in list section */
.content-section-buttons {
	text-align: center; /* Centers the buttons */
}

/*
===============================================================================
TWO COLUMN LAYOUT - Side-by-side content arrangement
===============================================================================
*/

.two-column-layout {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 3rem;
	align-items: center;  /* This centers both columns vertically */
	margin-bottom: 2rem;
}

.left-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

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

/*
===============================================================================
COLLAPSIBLE SECTIONS - CSS-only using HTML details/summary
===============================================================================
*/

/* Container for all collapsible items */
.collapsible-container {
	max-width: 100%;
	margin: 2rem 0;
}

/* Individual collapsible item using details element */
.collapsible-item {
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 1rem;
	background: white;
	overflow: hidden;
}

/* Summary element acts as the clickable header */
.collapsible-header {
	background: #f8f9fa;
	padding: 1.5rem;
	cursor: pointer;
	display: block;
	transition: background-color 0.3s ease;
	list-style: none; /* Removes default arrow */
}

.collapsible-header:hover {
	background: #e9ecef;
}

/* Hide default browser arrow for details/summary */
.collapsible-header::-webkit-details-marker {
	display: none;
}

/* Add custom arrow using CSS */
.collapsible-header::after {
	content: "▼";
	float: right;
	color: var(--primary-blue);
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}

/* Rotate arrow when details is open */
.collapsible-item[open] .collapsible-header::after {
	transform: rotate(180deg);
}

/* Content area */
.collapsible-content {
	padding: 1.5rem;
	border-top: 1px solid #eee;
	background: white;
}

/* Spacing for content paragraphs */
.collapsible-content p {
	margin-bottom: 1rem;
}

.collapsible-content p:last-child {
	margin-bottom: 0;
}

/*
===============================================================================
MOBILE RESPONSIVENESS - ALL MOBILE STYLES CONSOLIDATED HERE
===============================================================================
*/

/* 2 column card grid */
@media (max-width: 1350px) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(280px, 360px));
		justify-content: center;
	}
}

/* Tablets and small screens (768px and below) */
@media (max-width: 768px) {

	/* Logo sizing for mobile */
	header .header-container .logo {
		width: 80vw;
		height: auto;
		max-width: 300px;
		margin-top: 0;
	}

	/* Navigation - force two rows maximum */
	nav ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem;
		max-width: 100%;
		padding: 0;
		margin: 0;
	}

	nav a {
		padding: 0.4rem 0.8rem;
		font-size: 0.9rem;
		flex: 0 0 auto;
		min-width: 80px;
	}

	/* TWO-COLUMN GRID - Stack vertically */
	.two-column-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	.two-column-grid img {
		margin: 0 auto;
	}

	/* HERO SECTION */
	.hero-content {
		text-align: center;
	}

	.hero-content h1 {
		text-align: center !important;
	}

	/* LIST ITEMS - Fix checkmark alignment */
	.list-item {
		flex-direction: row;
		text-align: left;
		padding: 0.75rem;
		margin-bottom: 1rem;
	}

	.list-icon {
		margin-right: 0.75rem;
		margin-bottom: 0;
		font-size: 1.25rem;
	}

	.list-content {
		text-align: left;
	}

	/* CARD GRID - Single column on mobile */
	.card-grid {
		grid-template-columns: 1fr;
	}

	/* BUTTON ADJUSTMENTS */
	.section-buttons {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: clamp(1rem, 2vw, 1.5rem);
	}

	.button {
		width: auto;
		max-width: none;
		margin: 0;
	}

	/* SECTION PADDING */
	.content-section {
		padding: clamp(1.5rem, 5vw, 3rem) clamp(0.5rem, 3vw, 1rem);
	}
}

@media (max-width: 600px) {
  header .header-container {
	flex-direction: column;
	align-items: center;
  }
  header .header-container nav {
	margin-top: 1rem;
  }
}


/*
===============================================================================
SERVICE DETAIL PAGE STYLES - Written Case Analysis and similar pages
===============================================================================
*/

/* Service detail column layout */
.service_detail_left_column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 1rem;
}

.service_detail_right_column {
	text-align: left;
	padding: 1rem;
}

/* Image container for service detail pages */
.service_detail_image {
	height: clamp(9rem, 18vw, 18rem);
	width: clamp(9rem, 18vw, 18rem);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* The actual image in service detail */
.service_detail_image img {
	width: clamp(200px, 15vw, 10000px);
	object-fit: contain;
}

/* Feature lists in service detail pages - standard bullet styling */
.service_detail_feature_list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.service_detail_feature_list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

/* Add standard black bullet points to feature list items */
.service_detail_feature_list li::before {
	content: "•";
	color: var(--text-dark);
	position: absolute;
	left: 0;
	font-weight: normal;
}

/* Service detail card styling to match services page appearance but full width */
.service_detail_card {
	max-width: none !important;
	width: 100% !important;
	min-width: none !important;
}

/* FIXED: Make card grid single column ONLY for service detail cards */
.service_detail_card .card-grid,
.content-section-container .card-grid:has(.service_detail_card) {
	grid-template-columns: 1fr;
	justify-items: stretch;
}

/* Override two-column grid proportions inside the service detail card */
.service_detail_card .two-column-grid {
	grid-template-columns: 1fr 2fr; /* Left column 33%, right column 67% */
	gap: 1.5rem; /* Specific gap for service detail cards only */
}

/* Mobile responsiveness for service detail pages */
@media (max-width: 768px) {
	.service_detail_left_column {
		text-align: center;
		padding: 0.5rem;
		margin-top: 1.5rem;
	}

	.service_detail_right_column {
		text-align: left;
		padding: 0.5rem;
	}

	.service_detail_feature_list li {
		padding-left: 1.25rem;
		margin-bottom: 0.75rem;
	}

	/* Adjust image size and spacing for mobile */
	.service_detail_image {
		width: clamp(200px, 15vw, 192px);
		margin-bottom: 1rem;
	}

	.service_detail_image img {
		width: clamp(200px, 15vw, 192px);
		height: clamp(200px, 15vw, 192px);
	}

	/* Mobile card adjustments */
	.service_detail_card .two-column-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}




















/*
===============================================================================
DEBUGGING STYLES - Visual indicators for site analysis

Use AHK hotstring "qcssd" to paste your debugging block. Then delete it when finished.

Tragically, this is the best way because CSS does not allow nested comments!

===============================================================================
*/