/*
    Student: Nicholas Huertas
    Course: Introduction to Web Design and Computer Principles
    Date: October 6, 2026
    Project: Shared stylesheet - Assignment 03 Styled Biography Microsite,
             updated for Assignment 04 Raster Graphics & Viewport Art Direction,
             updated October 21, 2026 for Assignment 05 Vector Graphics
*/

/* ===== Base & Typography ===== */

body {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 17px;
    color: #1F2421;
    background-color: #F1F8F4;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Serif Display", Georgia, serif;
    color: #1B4332;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 20px;
}

/* ===== Link States ===== */

a:link {
    color: #2D6A4F;
}

a:visited {
    color: #1B4332;
}

a:hover {
    color: #1B4332;
    background-color: #95D5B2;
}

a:focus {
    outline: 3px solid #2D6A4F;
}

/* ===== Header ===== */

header {
    background-color: #1B4332;
    padding: 20px;
    text-align: center;
}

header h1 {
    color: #F1F8F4;
}

/* ===== Navigation & Flexbox ===== */

/* display: flex puts the nav links in a row instead of a list going down the page */
#main-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

#main-nav ul li {
    margin: 0 10px;
}

/* nav links are light so they show up on the dark green header */
#main-nav ul li a {
    color: #F1F8F4;
    padding: 8px 16px;
    border: 2px solid #95D5B2;
}

#main-nav ul li a:hover {
    color: #1B4332;
    background-color: #95D5B2;
}

/* ===== Main Content ===== */

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* box model: padding inside, border on the left, margin between cards */
.card {
    background-color: #FFFFFF;
    border-left: 6px solid #2D6A4F;
    padding: 20px;
    margin-bottom: 20px;
}

.highlight {
    background-color: #95D5B2;
    font-weight: bold;
}

main section p {
    line-height: 1.6;
}

/* stops the photos from being wider than the page */
main section img {
    max-width: 100%;
    height: auto;
    border: 4px solid #95D5B2;
}

/* ===== Footer Styles ===== */

footer {
    background-color: #1B4332;
    color: #F1F8F4;
    text-align: center;
    padding: 20px;
}

footer h3 {
    color: #95D5B2;
}

footer a:link,
footer a:visited {
    color: #95D5B2;
}

footer a:hover {
    color: #1B4332;
}
/* Centre everything on the raster page */
.raster-page .hero-container img {
	margin: 0 auto;
}

.raster-page header,
.raster-page .raster-intro,
.raster-page footer {
	text-align: center;
}

.raster-page #main-nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	padding: 0;
}
/* Assignment 04 - Raster Graphics and Viewport Art Direction */

/* Fluid Image Sizing */
img {
	max-width: 100%;
	height: auto;
}

/* Hero Section with CSS Background Image */
.hero-container {
	background-image: url('/media/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 70vh;
	padding: 2rem 1rem 0;
}

/* Picture Element */
.hero-container picture {
	display: block;
	line-height: 0;
}

/* Object Fitting - keeps the cut-out in proportion */
.hero-container img {
	display: block;
	width: auto;
	max-height: 65vh;
	margin: 0 auto;
	object-fit: contain;
	object-position: center bottom;
}

/* Introduction and Rationale Text */
.raster-intro {
	max-width: 70ch;
	margin: 0 auto;
	padding: 2rem 1rem;
	font-family: 'Manrope', sans-serif;
	line-height: 1.6;
}

.raster-intro h2 {
	font-family: 'DM Serif Display', serif;
}

.raster-page #main-nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	padding: 0;
}

/* Tablet - 481px and up */
@media (min-width: 481px) {
	.hero-container {
		min-height: 75vh;
	}

	.hero-container img {
		max-height: 70vh;
	}

	.raster-intro {
		padding: 2.5rem 2rem;
	}
}

/* Desktop - 1025px and up */
@media (min-width: 1025px) {
	.hero-container {
		min-height: 85vh;
	}

	.hero-container img {
		max-height: 80vh;
	}

	.raster-intro {
		padding: 3rem 2rem;
		font-size: 1.1rem;
	}
}
/* Remove the old image border on the raster page */
.hero-container picture,
.hero-container img {
	border: none;
	box-shadow: none;
	background: none;
}

/* =====================================================
   Assignment 05 - Vector Graphics (SVG Station Roundel)
   ===================================================== */

/* ===== Header Logo ===== */

/* The header is already centred, so the logo link sits above the h1 */
.roundel-link {
	display: inline-block;
	line-height: 0;
	border-radius: 6px;
}

/* Stop the general a:hover background from boxing in the logo */
.roundel-link:hover {
	background-color: transparent;
}

/* CSS sets the size; the 400 x 320 viewBox keeps the proportions */
.roundel {
	display: block;
	width: 100px;
	height: auto;
}

/* ===== Primary Theme: red ring, blue bar, white name ===== */

/* Hollow Ring Technique: no fill, thick stroke, so the dark
   green header shows through above and below the bar */
.roundel-ring {
	fill: none;
	stroke: #DC241F;
	stroke-width: 34;
	transition: stroke-width 0.25s ease, stroke 0.25s ease;
}

.roundel-bar {
	fill: #0019A8;
	transition: fill 0.25s ease;
}

.roundel-name {
	fill: #FFFFFF;
	font-family: Arial, sans-serif;
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 2px;
}

/* ===== Interaction: hover and keyboard focus ===== */

/* Subtle: the ring gets a little thicker and the bar a little lighter */
.roundel-link:hover .roundel-ring,
.roundel-link:focus-visible .roundel-ring {
	stroke-width: 40;
}

.roundel-link:hover .roundel-bar,
.roundel-link:focus-visible .roundel-bar {
	fill: #1F35C4;
}

.roundel-link:focus-visible {
	outline: 3px solid #95D5B2;
	outline-offset: 4px;
}

/* ===== Vector Showcase Page Layout ===== */

/* Mobile first: one column, the write-up then the big roundel */
.vector-layout {
	display: grid;
	gap: 24px;
}

.vector-intro p {
	line-height: 1.6;
}

/* Code samples */
.vector-intro pre {
	background-color: #1F2421;
	color: #F1F8F4;
	padding: 16px;
	border-left: 6px solid #95D5B2;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.5;
}

/* Dark green "platform wall" with a mint dot pattern, so the
   transparent halves of the ring are easy to see */
.roundel-showcase {
	margin: 0;
	padding: 24px 16px;
	background-color: #1B4332;
	background-image: radial-gradient(#2D6A4F 2px, transparent 2px);
	background-size: 18px 18px;
	border: 4px solid #95D5B2;
}

/* Large standalone roundel - fluid, capped at 600px */
.roundel-large {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0 auto;
}

.roundel-large:focus-visible {
	outline: 3px solid #F2C14E;
	outline-offset: 6px;
}

.roundel-showcase figcaption {
	margin-top: 16px;
	color: #F1F8F4;
	text-align: center;
	font-style: italic;
	line-height: 1.5;
}

/* ===== Alternative Theme: "Northern Line at Night" =====
   Camden Town is on the Northern line, whose colour is black.
   The class "northern-theme" only exists on the showcase SVG,
   and ".northern-theme .roundel-ring" (two classes) is more
   specific than ".roundel-ring" (one class), so these rules
   override the red/blue/white primary theme. Every part
   changes: mint ring, black bar, gold name in a serif font. */

.northern-theme .roundel-ring {
	stroke: #95D5B2;
	stroke-width: 28;
}

.northern-theme .roundel-bar {
	fill: #000000;
}

.northern-theme .roundel-name {
	fill: #F2C14E;
	font-family: "DM Serif Display", Georgia, serif;
	font-weight: normal;
	font-size: 34px;
	letter-spacing: 3px;
}

/* Hover/focus for the showcase: ring turns gold and thickens */
.northern-theme:hover .roundel-ring,
.northern-theme:focus-visible .roundel-ring {
	stroke: #F2C14E;
	stroke-width: 36;
}

/* Desktop: write-up on the left, roundel stays in view on the right */
@media (min-width: 1025px) {
	.roundel {
		width: 130px;
	}

	.vector-layout {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}

	.roundel-showcase {
		position: sticky;
		top: 20px;
	}
}

/* Tablet logo size */
@media (min-width: 481px) and (max-width: 1024px) {
	.roundel {
		width: 115px;
	}
}