/*
===============================================================================
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.woff2') format('woff2');
   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); }

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

/* Display text - 3rem */
.text-display {
   font-size: 3rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.76rem;
   margin-bottom: -0.62rem;
}

/* Title large - 2.5rem */
.text-title-large {
   font-size: 2.5rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.633rem;
   margin-bottom: -0.55rem;
}

/* Title extra-large - 2.25rem */
.text-title-xlarge {
   font-size: 2.25rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.569rem;
   margin-bottom: -0.466rem;
}

/* Title medium - 2rem */
.text-title-medium {
   font-size: 2rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.507rem;
   margin-bottom: -0.413rem;
}

/* Price large - 2rem */
.text-price-large {
   font-size: 2rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.507rem;
   margin-bottom: -0.413rem;
}

/* Title small - 1.75rem */
.text-title-small {
   font-size: 1.75rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.443rem;
   margin-bottom: -0.4rem;
}

/* Lead text - 1.5rem */
.text-lead {
   font-size: 1.5rem;
   font-weight: normal;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.4rem;
   margin-bottom: -0.35rem;
}

/* Lead bold - 1.5rem */
.text-lead-bold {
   font-size: 1.5rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.380rem;
   margin-bottom: -0.310rem;
}

/* Price medium - 1.5rem */
.text-price-medium {
   font-size: 1.5rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.380rem;
   margin-bottom: -0.33rem;
}

/* Title smaller - 1.45rem */
.text-title-smaller {
   font-size: 1.45rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.367rem;
   margin-bottom: -0.33rem;
}

/* Body large - 1.4rem */
.text-body-large {
   font-size: 1.4rem;
   font-weight: normal;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.354rem;
   margin-bottom: -0.32rem;
}

/* Title tiny - 1.25rem */
.text-title-tiny {
   font-size: 1.25rem;
   font-weight: bold;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.316rem;
   margin-bottom: -0.259rem;
}

/* Body regular - 1.125rem */
.text-body {
   font-size: 1.125rem;
   font-weight: normal;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.285rem;
   margin-bottom: -0.274rem;
}

/* Body compact - 1.125rem */
.text-body-compact {
   font-size: 1.125rem;
   font-weight: normal;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.285rem;
   margin-bottom: -0.28rem;
}

/* Body small - 1rem */
.text-body-small {
   font-size: 1rem;
   font-weight: normal;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.253rem;
   margin-bottom: -0.24rem;
}

/* Caption - 0.875rem */
.text-caption {
   font-size: 0.875rem;
   font-weight: normal;
   color: var(--text-dark);
   line-height: 1.4;
   margin-top: -0.221rem;
   margin-bottom: -0.22rem;
}

/* 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-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-display,
a.text-title-large,
a.text-title-medium,
a.text-title-small,
a.text-title-smaller,
a.text-title-xlarge,
a.text-title-tiny,
a.text-lead,
a.text-lead-bold,
a.text-body-large,
a.text-body,
a.text-body-compact,
a.text-body-small,
a.text-caption,
a.text-price-large,
a.text-price-medium {
	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 */
}

/* <span class="br-spacing"><br></span>s can be wrapped in this style to ensure uniform height */
.br-spacing {
   font-size: 1.7rem;     /* Normalize font size */
   line-height: 1.2;    /* Consistent spacing for breaks */
   margin: 0;    /* Consistent spacing for breaks */
   display: inline;     /* Don't interfere with layout */
}

/* 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);
}

/*
===============================================================================
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: 1rem 2rem 1rem 0;            /* top, right, bottom, left - no left padding */
}

/* 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;    /* Remove bullet points from list */
   display: flex;       /* Arrange nav items horizontally */
   gap: 0.5rem;
   margin: 0;          /* Remove default margin */
   padding: 0;         /* Remove default padding */
}

/* Individual navigation links */
nav a {
   text-decoration: none;                /* Remove underline from links */
   color: var(--text-dark);             /* Link text color */
   padding: 0.5rem 1rem;                /* Inner spacing around each link */
   border-radius: 4px;                  /* Rounded corners */
   font-weight: 500;                    /* Slightly bold text */
   transition: background-color 0.3s ease; /* Smooth color change on hover */
}

/* 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 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
   align-items: center;
}

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

/* Mobile responsive */
@media (max-width: 768px) {
   .two-column-grid {
	  grid-template-columns: 1fr;
	  gap: 2rem;
	  text-align: center;
   }
}

/*
===============================================================================
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-top: 0rem;                  /* Space to the right */
   margin-bottom: 0rem;                 /* Space below */
   margin-right: 0rem;                  /* Space to the right */
}

/* 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 */
}

/* 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 */
}

/*
===============================================================================
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 {
   max-width: var(--container-max-width); /* Uses global width setting */
   margin: 0 auto;                        /* Centers the container */

   /*
   === CENTRALIZED CARD PARAMETERS ===
   Modify these variables to control ALL FOUR CARDS at once
   */

   /* LAYOUT CONTROL */
   --grid-gap: 3rem;
   --grid-column-min-width: 220px; /* Minimum column width for grid calculation */

   /* CARD DIMENSIONS */
   --card-width: auto;         /* Card width (auto = flexible, or use fixed like 300px) */
   --card-min-width: 330px;    /* Minimum card width - increase to make cards wider */
   --card-max-width: none;     /* Maximum card width (none = unlimited) */
   --card-height: auto;        /* Card height (auto = based on content) */
   --card-min-height: 270px;   /* Minimum card height - increase to make cards taller */
   --card-max-height: none;    /* Maximum card height (none = unlimited) */

   /* CARD APPEARANCE */
   --card-padding: 1rem;       /* Inner spacing inside cards - increase for more breathing room */
   --card-background: white;   /* Card background color */
   --card-border-radius: 8px;  /* Corner roundness - increase for more rounded corners */
   --card-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Drop shadow - change numbers for different shadow */

   /* IMAGE STYLING */
   --image-size-small: 150px;       /* Small image size */
   --image-size-medium: 200px;      /* Medium image size (default for landing page) */
   --image-size-large: 350px;       /* Large image size (for services page) */
   --image-size: var(--image-size-medium); /* Default image size */
   --image-margin-bottom: -0.5rem;  /* Space below images (negative pulls title up) */

}

/* Grid container that arranges the four cards */
.card-grid {
   display: grid; /* Uses CSS Grid layout system */
   /* Creates columns that are at least the minimum width, and auto-fits as many as possible */
   grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min-width), 1fr));
   gap: var(--grid-gap);      /* Space between grid items (the cards) */
}

/* Individual card styling */
.card-item {
   /* DIMENSIONS - Uses the centralized variables defined above */
   width: var(--card-width);
   min-width: var(--card-min-width);     /* Card will be at least this wide */
   max-width: var(--card-max-width);     /* Card will be at most this wide */
   height: var(--card-height);
   min-height: var(--card-min-height);   /* Card will be at least this tall */
   max-height: var(--card-max-height);   /* Card will be at most this tall */

   /* APPEARANCE - Uses the centralized variables */
   background: var(--card-background);   /* Card background color */
   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: var(--image-size-large); /* Use large images on services page */
}

/* 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;
}

/*
===============================================================================
MOBILE RESPONSIVENESS
===============================================================================
*/
@media (max-width: 768px) {
   /* Header adjustments */
   .header-container {
	  flex-direction: column;
	  gap: 1rem;
	  padding: 1rem;
   }

   /* Grid adjustments */
   .two-column-grid {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 3rem;
	  align-items: start;  /* Change from center to start */
   }

   .card-grid {
	  grid-template-columns: 1fr;
   }

   /* Card adjustments */
   .content-section-container {
	  --grid-column-min-width: 200px;
	  --card-min-width: 200px;
	  --card-min-height: 220px;
	  --card-padding: 0.75rem;
   }

   /* Other mobile styles... */
}

@media (max-width: 480px) {
   /* Mobile phone specific styles */
}

/*
===============================================================================
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;
}

/*
===============================================================================
GLOBAL MOBILE RESPONSIVENESS
===============================================================================

These rules handle mobile layout for sections other than the card sections.
*/

/* Tablets and small desktops (768px and below) */
@media (max-width: 768px) {
   /* Header adjustments */
   .header-container {
	flex-direction: column; /* Stacks logo above navigation */
	gap: 1rem;             /* Space between logo and nav */
	padding: 1rem;         /* Reduced padding */
   }

   /* Hero section adjustments */
   .hero-section-container {
	grid-template-columns: 1fr; /* Single column instead of two */
	gap: 2rem;                  /* Less space between sections */
	text-align: center;         /* Center all text */
   }
   .hero-title-text {
	font-size: 2rem;
   }

   /* Card grid goes to single column */
   .card-grid {
	grid-template-columns: 1fr; /* Single column layout */
   }

   /* List items stack vertically */
   .list-item {
	flex-direction: column; /* Stacks checkmark above text */
	text-align: center;     /* Centers content */
   }
   .list-icon {
	margin-right: 0;        /* Remove right margin */
	margin-bottom: 0.5rem;  /* Add bottom margin instead */
   }

   /* Navigation adjustments */
   nav ul {
	flex-wrap: wrap;        /* Allows nav items to wrap to new line */
	justify-content: center; /* Centers navigation items */
   }

   /* Button spacing adjustments */
   .button {
	margin-right: 0.5rem;   /* Less right margin */
	margin-bottom: 0.5rem;  /* Less bottom margin */
   }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
   /* Reduce section padding on mobile */
   .hero-section,
   .content-section,
   .content-section {
	padding: 2rem 1rem;
   }

   /* Further reduce text sizes */
   .hero-title-text {
	font-size: 1.5rem;
   }
   .section-title-text,
   .content-section-title-text {
	font-size: 1.5rem;
   }
}












/*
===============================================================================
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!

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