/* ==========================================================================
   David Parton -- Living with ME
   Fixed, hand-maintained stylesheet for a small 2-4 page personal site
   (originally distilled from the "Catch Box" WordPress theme). Since the
   page structure never changes -- only the responsive breakpoints below
   adapt it to screen width -- this file only carries rules for the
   elements the two pages actually use.
   ========================================================================== */

/* ==========================================================================
   Colour scheme -- change any of these to re-theme the whole site.
   Everything below that uses the colour scheme refers to these variables
   instead of a hard-coded hex value, so this is the only place you need
   to edit.

   Header graphic
    Ocean :           #133953
    Sea :             #92a5aa
    Sand :            #c8d0d6

   Other main colours
    Foam :            #f5f4de
    Kelp :            #065634

    Colours adjustments assisted by https://www.colorhexa.com/0c5397
    Colour scheme taken from https://www.media.io/coloor-palette

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

:root {
	/* Site colour scheme -- grouped by kind (text, link, background, border)
	   so a related set can be scanned and tweaked together. Every colour
	   below has its own variable and its own single use, even a few pairs
	   that still happen to share a value right now -- so changing one
	   while designing never unexpectedly drags another along with it. */

	/* Text colours */
	--color-body-text: #133953;              /* Normal body text */
	--color-heading-h1-text: #222;           /* <h1> headings (the .page-title class) */
	--color-heading-h2-text: #222;           /* <h2> headings in content and link boxes */
	--color-heading-h3-text: #065634;        /* <h3> headings */
	--color-footer-text: #666;               /* Footer body text */

	/* Link colours */
	--color-link-text: #181f68;              /* Unselected / visited links (body content) */
	--color-link-hover-text: #b49758;        /* Link hover / focus / active (body content) */
	--color-menubar-link-text: #eee;         /* Menu bar link text (unselected and current-page/focus) */
	--color-footer-link-text: #555;          /* Footer link text */
	--color-footer-link-hover-text: #b49758; /* Footer link hover text */

	/* Menu bar gradient */
	--color-menubar-gradient-start: #106dc6; /* Menu bar gradient -- light stop */
	--color-menubar-gradient-end: #083968;   /* Menu bar gradient -- dark stop; also doubles as the nav-wrap
                                                fallback background and the nav bar's bottom border, so those
                                                blend with the gradient rather than being independently set */


	/* Background colours */
	--color-page-bg: #555555;                /* Page background (behind the site wrapper) */
	--color-site-wrapper-bg: #ddd;           /* Site wrapper background */
	--color-main-area-bg: #ddd;              /* #main background -- currently kept equal to
                                                --color-site-wrapper-bg so the wrapper and main area blend
                                                into one continuous surface; change both together if you want
                                                that to stay true */
	--color-header-bg: #ffffff;              /* Site header background */
	--color-content-box-bg: #ffffff;         /* .content-box / .link-box background */
	--color-sidebar-box-bg: #ffffff;         /* Sidebar box background */
	--color-footer-bg: #ffffff;              /* Footer background */

	/* Border colours */
	--color-content-box-border: #ccc;        /* .content-box / .link-box bottom border */
	--color-sidebar-box-border: #ccc;        /* Sidebar box bottom border */
	--color-table-border: #ddd;              /* table / td border */
	--color-footer-border-top: #ccc;         /* Footer top border */
	--color-footer-border-bottom: #aaaaaa;   /* Footer bottom border accent */

	/* Skip-link colours */
	--color-skiplink-bg: #f1f1f1;            /* "Skip to content" link background */
	--color-skiplink-text: #21759b;          /* "Skip to content" link text */

	/* Responsive spacing scale -- these shrink together at each breakpoint below,
	   so the six places that used to repeat the same numbers now just read the
	   variable. Reassigned inside each @media block further down the file. */
	--edge-gap: 30px;       /* #main side padding, #header-content side margin, bottom margins */
	--card-pad: 30px;       /* .content-box / .link-box right/bottom padding */
	--card-pad-top: 10px;   /* .content-box / .link-box top padding (only changes at the 320px breakpoint) */
	--footer-pad-v: 17px;   /* #site-footer vertical padding (desktop footer ~20% slimmer: was 25px) */
	--footer-pad-h: 30px;   /* #site-footer horizontal padding */

	/* Small rightward nudge for the header logo, which otherwise sits flush
	   against #header-content's left edge. Zeroed out below 479px (phones), where
	   #header-content is centred instead (see that breakpoint). */
	--logo-inset: 14px;
}

/* Open Sans, self-hosted (variable font: one file covers weights 300-800).
   Latin subset only. Served from this site, so visitors' browsers never
   contact Google. If the file is missing, text falls back to Verdana. */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 300 800;
	src: url("fonts/open-sans-latin-wght-normal.woff2") format("woff2");
}

/* ==========================================================================
   Reset -- covers only the elements these two pages actually contain
   (html, body, div, headings, paragraph, links, list, table and its parts,
   images). No forms, buttons, or other element types are used anywhere on
   the site, so there's nothing to reset for them.
   ========================================================================== */
html,
body,
div,
h1,
h2,
h3,
p,
a,
ul,
li,
table,
tbody,
tr,
td {
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

/* Remove the default focus outline everywhere */
:focus {
	outline: 0;
}

/* Base text colour, font family and sizing for the whole page */
body {
	background-color: var(--color-page-bg);
	color: var(--color-body-text);
	font-family: "Open Sans", Verdana, Geneva, Tahoma, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.62em;
}

/* Heading spacing/line-height, and clear any floats above them */
h1,
h2 {
	clear: both;
	line-height: 1.4;
}

/* Bottom spacing under content blocks and paragraphs */
.content-box,
.link-box,
p,
.sidebar-box {
	margin-bottom: var(--edge-gap);
}

/* Default (unvisited/visited) link colour, no underline */
a,
a:visited {
	color: var(--color-link-text);
	text-decoration: none;
}

/* Underline links on focus/active/hover, and switch to the hover colour.
   :focus-visible (not :focus) so a plain click doesn't leave a link "stuck"
   looking selected -- clicking off to another site and using Back restores
   this page with the clicked link still holding browser focus, and plain
   :focus would keep matching it. Keyboard focus still shows the colour. */
a:focus-visible,
a:active,
a:hover {
	color: var(--color-link-hover-text);
	text-decoration: underline;
}

/* Visually hide content while keeping it available to screen readers */
.visually-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* "Skip to content" link: hidden off-screen until focused */
.skip-link {
	background-color: var(--color-skiplink-bg);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	color: var(--color-skiplink-text);
	display: block;
	font: bold 14px/normal "Open Sans", Verdana, Geneva, Tahoma, sans-serif;
	left: -9999em;
	outline: none;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: -9999em;
}

/* Bring the skip-link on screen when it receives keyboard focus */
.skip-link:focus {
	clip: auto;
	height: auto;
	left: 6px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/* Clearfix: forces a container to expand around floated children
   (used where a bar's background needs to wrap around floated content) */
.clearfix {
	display: block;
}

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

/* ==========================================================================
   Page wrapper and two-column layout
   ========================================================================== */

/* Overall page wrapper: width, centering, and rounded background */
.site {
	width: 1000px;
	margin: 30px auto;
	background: var(--color-site-wrapper-bg);
	border-radius: 5px;
}

/* Main content area: padding and background. flow-root keeps the content
   box's own bottom margin from escaping past #main's edge (matters when
   #main isn't flex -- print, and the >960px/<961px media-query gap) --
   the desktop flex layout below overrides this to display:flex anyway. */
#main {
	display: flow-root;
	padding: var(--edge-gap) var(--edge-gap) 0;
	background-color: var(--color-main-area-bg);
	clear: both;
}

/* Main content column width */
#main-content {
	width: 694px;
}

/* Sidebar column width */
#sidebar {
	width: 216px;
	font-size: 13px;
	line-height: 1.62em;
}

/* Above the 960px stacked-layout breakpoint: lay main content and sidebar
   out side by side, and stretch the shorter one to match the taller.
   Below 960px they stack instead (see the breakpoint further down). */
@media screen and (min-width: 961px) {
	#main {
		display: flex;
		align-items: stretch;
	}

	#sidebar {
		margin-left: var(--edge-gap);
	}

	/* Desktop-only: size the logo to fill the taller header instead of
	   padding it out with extra whitespace. header-content keeps the
	   site-wide 17px top/bottom padding, so with the nav bar's ~38.8px
	   this brings the whole header (logo bar + nav bar) to ~232.8px --
	   17 + 160 + 17 + 38.8. Tablet/phone keep the 117px logo. */
	#site-logo img {
		height: 160px;
	}
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

/* Site header: background, rounded top corners, sits above content */
#site-header {
	background-color: var(--color-header-bg);
	position: relative;
	z-index: 51;
	border-radius: 5px 5px 0 0;
}

/* Side margin and vertical padding for the header content block */
#header-content {
	margin: 0 var(--edge-gap);
	padding: 17px 0;
}

/* Logo container: sized to its content, sits at the left by default */
#site-logo {
	display: block;
	line-height: 0;
	max-width: 100%;
}

/* Fixed height for the site logo image, constrained to its container.
   margin-left nudges it off the left edge -- see --logo-inset above. */
#site-logo img {
	margin: 0 0 0 var(--logo-inset);
	height: 117px;
	width: auto;
	max-width: 100%;
}

/* Fallback background for the nav wrapper behind the menu bar
   (not normally visible, since #primary-nav's own gradient covers it) */
.nav-wrap {
	background-color: var(--color-menubar-gradient-end);
}

/* Primary nav bar: menu-colour gradient background, full width, bottom border.
   Kept floated so it establishes its own box and correctly wraps the
   floated <li> menu items inside it (see next rule). */
#primary-nav {
	background: linear-gradient(var(--color-menubar-gradient-start), var(--color-menubar-gradient-end));
	clear: both;
	float: left;
	width: 100%;
	border-bottom: 1px solid var(--color-menubar-gradient-end);
}

/* Remove default spacing and bullets on the nav menu list.
   Left padding matches --edge-gap so the first menu item lines up with
   the logo and content edges above/below it, at every breakpoint (the
   variable itself already shrinks at each one, so this needs no extra
   media-query overrides). */
#primary-nav ul.menu {
	margin: 0;
	padding: 0 0 0 var(--edge-gap);
	font-size: 14px;
	list-style: none;
}

/* Top-level menu items sit side by side */
#primary-nav ul.menu li {
	float: left;
	position: relative;
}

/* Top-level menu link colour, spacing, sizing, no underline */
#primary-nav ul.menu a {
	display: block;
	color: var(--color-menubar-link-text);
	line-height: 2.7em;
	padding: 0 1.2125em;
	text-decoration: none;
}

/* Focus state, and the current page's menu item: menu-colour gradient,
   bold text. :focus-visible (not :focus) -- see the note above the
   main a:focus-visible rule for why. */
#primary-nav ul.menu a:focus-visible,
#primary-nav .menu .current-page > a {
	background: linear-gradient(var(--color-menubar-gradient-end), var(--color-menubar-gradient-start));
	color: var(--color-menubar-link-text);
	font-weight: bold;
}

/* ==========================================================================
   Page content: title, body text, tables
   ========================================================================== */

/* Main content box: box with rounded corners, bottom border, padding.
   .link-box (links.html's topic boxes) shares the exact same look -- see
   the links-page box below for what's different about it. Both pages now
   just stack these as separate boxes -- the home page currently has two:
   a heading box (h1 only) and the "Under construction" box below it. */
.content-box,
.link-box {
	background-color: var(--color-content-box-bg);
	border-bottom: 2px solid var(--color-content-box-border);
	border-radius: 5px;
	position: relative;
	width: auto;
	word-wrap: break-word;
	padding: var(--card-pad-top) var(--card-pad) var(--card-pad);
}

/* Page title: size, weight, colour, spacing */
.page-title {
	clear: both;
	color: var(--color-heading-h1-text);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding: 10px 0 5px;
	text-decoration: none;
}

/* Box subheading (<h2>): sizing, spacing and colour, shared by the
   home page's content boxes and the topic boxes on links.html. */
.content-box h2,
.link-box h2 {
	color: var(--color-heading-h2-text);
	font-size: 20px;
	margin: 0 0 0.5em;
}

/* Left-hand column table heading (<h3>): text-only style -- colour, font,
   weight -- deliberately no positional or border attributes. Used for the
   sub-heading at the top of each group of rows in a links table's first
   column. Semi-bold (600), to set it apart from the other table contents. */
h3 {
	color: var(--color-heading-h3-text);
	font-weight: 600;
}

/* Responsive images inside a content box (currently just the home page's
   "Under construction" graphic) */
.content-box img {
	max-width: 100%;
	height: auto;
}

/* Small top margin for images inside paragraphs */
p img {
	margin-top: 0.4em;
}

/* Table borders, spacing and sizing. Fixed column widths so text wraps
   predictably (from the Catch Box support forum). */
table {
	border: 1px solid var(--color-table-border);
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 35px;
	table-layout: fixed;
	width: 100%;
}

/* Links page (links.html): each topic's table is the only thing in its
   .link-box, and the box already has its own top/bottom padding plus
   margin-bottom for spacing between boxes -- so the table's own default
   bottom margin (above) is dropped here to avoid stacking both. */
.link-box table {
	margin-bottom: 0;
}

/* Cell borders and padding (collapsed-border look), with long words
   allowed to break so they wrap inside the fixed-width columns.
   8px left/right padding keeps text off the cell borders. */
td {
	border: 1px solid var(--color-table-border);
	border-width: 0 1px 1px 0;
	padding: 2.5px 8px;
	vertical-align: baseline;
	word-break: break-word;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

/* Sidebar box: box with rounded corners, bottom border and padding
   (photo, bio, and other boxed items in the sidebar) */
.sidebar-box {
	background-color: var(--color-sidebar-box-bg);
	border-bottom: 2px solid var(--color-sidebar-box-border);
	border-radius: 5px;
	clear: both;
	padding: 10px;
}

/* Responsive, centred images inside sidebar boxes */
.sidebar-box img {
	max-width: 100%;
	text-align: center;
}

/* Sidebar box link weight, no underline by default; underline on hover/focus/active.
   :focus-visible (not :focus) -- see the note above the main a:focus-visible rule for why. */
.sidebar-box a {
	font-weight: 400;
	text-decoration: none;
}

.sidebar-box a:hover,
.sidebar-box a:focus-visible,
.sidebar-box a:active {
	text-decoration: underline;
}

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

/* Footer: background, borders, rounded bottom corners, text and padding */
#site-footer {
	background-color: var(--color-footer-bg);
	border-top: 1px solid var(--color-footer-border-top);
	border-bottom: 2px solid var(--color-footer-border-bottom);
	clear: both;
	display: block;
	border-radius: 0 0 5px 5px;
	color: var(--color-footer-text);
	font-size: 12px;
	line-height: 2.2em;
	text-align: center;
	padding: var(--footer-pad-v) var(--footer-pad-h);
	word-wrap: break-word;
}

/* Footer link colour and weight */
#site-footer a {
	color: var(--color-footer-link-text);
	font-weight: bold;
}

/* Footer link hover colour */
#site-footer a:hover {
	color: var(--color-footer-link-hover-text);
}

/* Footer copyright text: centred within the footer */
.copyright {
	display: inline;
	text-align: center;
}

/* ==========================================================================
   Print styles: strip chrome (nav, header image, footer) and simplify layout
   ========================================================================== */
@media print {
	body {
		background: none !important;
		font-size: 10pt;
	}

	.site {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}

	#site-header {
		border-top: none !important;
		padding: 0;
	}

	#header-content {
		margin: 0;
	}

	#site-header img {
		display: none;
	}

	#primary-nav {
		display: none;
	}

	#main {
		border-top: none;
		box-shadow: none;
	}

	#main-content {
		margin: 0;
		width: 100%;
	}

	.page-title {
		font-size: 21pt;
	}

	#sidebar {
		display: none;
	}

	#site-footer {
		display: none;
	}

}

/* ==========================================================================
   Responsive breakpoints -- the only part of the layout that actually
   changes. Each block below re-sets just what needs to differ from the
   default (desktop) rules above it.
   ========================================================================== */

/* Responsive breakpoint: shrink page/content widths below 1024px */
@media screen and (max-width: 1024px) {
	.site {
		width: 960px;
		margin: 25px auto;
	}

	#main-content {
		width: 669px;
	}

	:root {
		--edge-gap: 25px;
		--card-pad: 25px;
		--footer-pad-v: 13px;   /* ~20% slimmer desktop footer (was 20px); tablet/phone reset below */
		--footer-pad-h: 25px;
	}

	.page-title {
		padding: 10px 0 5px;
	}

}

/* Responsive breakpoint: shrink page/column widths below 990px */
@media screen and (max-width: 990px) {
	.site {
		width: 910px;
	}

	#main-content {
		width: 619px;
	}

}

/* Responsive breakpoint: stack the sidebar under the content below 960px.
   The menu bar itself stays the same horizontal bar as on desktop --
   just with slightly smaller type/padding so it stays compact -- since a
   handful of short page links fits comfortably at any width without
   needing a separate collapsed/mobile menu style. */
@media screen and (max-width: 960px) {
	.site {
		width: 720px;
		margin: 20px auto;
	}

	#main-content,
	#sidebar {
		display: block;
		width: 100%;
	}

	#primary-nav ul.menu a {
		font-size: 15px;
		line-height: 2.7em;
		padding: 0 20px;
	}

	:root {
		--edge-gap: 20px;
		--card-pad: 20px;
		--footer-pad-v: 20px;
		--footer-pad-h: 20px;
	}

}

/* Responsive breakpoint: tighten sizing/spacing further below 767px (tablet) */
@media screen and (max-width: 767px) {
	.site {
		width: 600px;
	}

	#site-footer {
		padding: 1em 0.5em;
		font-size: 11px;
	}

	#primary-nav ul {
		font-size: 12px;
	}

	.page-title {
		font-size: 22px;
	}

	.content-box h2 {
		font-size: 16px;
	}

}

/* Responsive breakpoint: shrink page width further below 640px */
@media screen and (max-width: 640px) {
	.site {
		width: 460px;
	}

}

/* Responsive breakpoint: full-width layout with square corners below 479px (phone) */
@media screen and (max-width: 479px) {
	.site {
		width: 100%;
		margin: 0 auto;
	}

	#site-header,
	#site-footer {
		border-radius: 0;
	}

	/* Phones only: centre the header logo. Tablets (480px and up) keep it
	   on the left, as on desktop. */
	#header-content {
		text-align: center;
	}

	/* Header is centred at this width, so the desktop/tablet nudge above
	   would just skew the logo off-centre -- drop it back to 0 here. */
	#site-logo img {
		margin-left: 0;
	}

	#site-footer {
		font-size: 10px;
	}

	:root {
		--edge-gap: 15px;
		--card-pad: 15px;
		--footer-pad-v: 15px;
		--footer-pad-h: 15px;
	}

	/* Re-asserted here (not just via the variable) because the 767px
	   breakpoint above sets #site-footer's padding to a literal
	   "1em 0.5em" that would otherwise keep winning at this width too. */
	#site-footer {
		padding: var(--footer-pad-v) var(--footer-pad-h);
	}

	.page-title {
		padding: 10px 0 5px;
	}

	/* Trim the menu bar a little further so 3-4 short page links still
	   sit comfortably on one line on the narrowest phones. */
	#primary-nav ul.menu a {
		font-size: 13px;
		padding: 0 12px;
	}

	/* Smaller text on phones, so long single words in the links tables
	   (e.g. "Tuxmachines", "Photography") fit their column instead of being
	   split mid-word. Firefox for Android shrinks text by itself; Chromium-based
	   browsers (Brave, Chrome) don't, so the sizes are set explicitly here. */
	body {
		font-size: 14px;
	}

	.content-box h2,
	.link-box h2 {
		font-size: 17px;
	}

}

/* Responsive breakpoint: slightly smaller table text on narrow phones (below 400px) */
@media screen and (max-width: 399px) {
	td {
		font-size: 13px;
		padding: 2.5px 6px;
	}

}

/* Responsive breakpoint: tighten spacing to the minimum below 320px (smallest phones) */
@media screen and (max-width: 320px) {
	.content-box img {
		max-width: 92%;
		padding: 3%;
	}

	.content-box,
	.link-box,
	.sidebar-box {
		border-radius: 0;
	}

	:root {
		--edge-gap: 10px;
		--card-pad: 10px;
		--card-pad-top: 5px;
		--footer-pad-v: 10px;
		--footer-pad-h: 10px;
	}

	/* #main's sides go to 0 (not var(--edge-gap)) at this smallest breakpoint --
	   only the top padding follows the scale. */
	#main {
		padding: var(--edge-gap) 0 0;
	}

	#header-content {
		padding: 11px 0;
	}

	/* Re-asserted for the same reason as the 479px breakpoint -- see note there. */
	#site-footer {
		padding: var(--footer-pad-v) var(--footer-pad-h);
	}

	.page-title {
		padding: 8px 0 4px;
	}

}