/*
Theme Name: GraphicMedia 2026
Theme URI: https://graphicmedia.be
Description: Child theme van BlankSlate voor graphicmedia.be (versie 2026).
Author: Studio Studio
Author URI: https://graphicmedia.be
Template: blankslate
Version: 1.3.0
Text Domain: graphicmedia-2026
*/

/* ==========================================================================
   RESET (Meyer reset v2.0 — http://meyerweb.com/eric/tools/css/reset/)
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ==========================================================================
   BASIS
   ========================================================================== */
:root {
	--gm-bg: #fff;      /* door de bezoeker gekozen achtergrondkleur (via de kleurenslider) */
	--gm-on-bg: #111;   /* leesbare tekst-/lijnkleur t.o.v. --gm-bg */
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-size: 16px;
	margin: 0;
	background: var(--gm-bg);
	color: var(--gm-on-bg);
	overflow-x: hidden;   /* geen horizontale scroll door vw-waarden op smalle schermen */
}

a {
	text-decoration: none;
}

/* ==========================================================================
   HEADER (vaste balk: logo links, "Contact us"-knop rechts)
   ========================================================================== */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	background-color: var(--gm-bg, #fff);
	border-bottom: 1px solid var(--gm-on-bg, #000);
	z-index: 1000;
	transition: padding 0.3s ease;
}

#branding {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Logo = de sitenaam als blauw blok, exact zoals in het oude Graphic Media-thema */
#site-title {
	margin: 0;
	font-size: clamp(24px, 5vw, 96px);
	line-height: 1.1;
	color: #D0D0D0;
	text-transform: uppercase;
	background-color: #0014FF;
	transition: font-size 0.3s ease;
}

#site-title a {
	color: #dfdfdf;
	text-decoration: none;
	padding: 10px;
}

/* Contact-knop: zelfde uitstraling én lettergrootte als de knoppen in de footer */
.contact-us-knop {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid var(--gm-on-bg, #000);
	border-radius: 100px;
	padding: clamp(10px, 1.5vw, 20px);
	min-width: clamp(110px, 14vw, 200px);
	font-size: clamp(13px, 2vw, 28px);
	text-align: center;
	color: var(--gm-on-bg, #000);
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.contact-us-knop:hover {
	background-color: var(--gm-on-bg, #000);
	color: var(--gm-bg, #fff);
}

/* Krimpt de titel bij het scrollen (zie main.js), net als in het oude thema */
#header.shrink #site-title {
	font-size: clamp(18px, 3vw, 60px);
}

/* Zorgt dat de inhoud niet onder de vaste header valt */
#container {
	margin-top: 200px;
	padding: 20px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
	padding: 20px;
	color: var(--gm-on-bg, #000);
}

footer a {
	color: var(--gm-on-bg, #000);
}

footer a:hover {
	text-decoration: underline;
}

.contact {
	padding: 40px 0;
	font-size: clamp(18px, 3vw, 44px);
	text-align: center;
	border-top: 1px solid var(--gm-on-bg, #000);
	border-bottom: 1px solid var(--gm-on-bg, #000);
}

.contact-knoppen {
	display: flex;
	width: 50%;
	justify-content: space-around;
	margin: auto;
	font-size: clamp(14px, 2vw, 28px);
	padding-top: 40px;
}

.contact-knop {
	border: 1px solid var(--gm-on-bg, #000);
	border-radius: 100px;
	padding: 20px;
	min-width: clamp(120px, 18vw, 200px);
	color: var(--gm-on-bg, #000);
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.contact-knop:hover {
	color: var(--gm-bg, #fff);
	background-color: var(--gm-on-bg, #000);
}

.contact-knoppen a:hover {
	text-decoration: none;
}

.gegevens {
	font-size: clamp(14px, 2vw, 28px);
	padding: 40px 0;
}

#copyright {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 8px 0;
	border-top: 1px solid var(--gm-on-bg, #000);
	padding-top: 20px;
}

/* ==========================================================================
   Voeg hieronder je eigen, nieuwe stijlen toe.
   ========================================================================== */

/* Tweede, heel kleine footer helemaal onderaan (onder de slider). */
.gm-subfooter {
	padding: 10px 20px 18px;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--gm-on-bg, #000);
	opacity: 0.65;
}

.gm-subfooter a {
	color: inherit;
	text-decoration: none;
}

.gm-subfooter a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE — desktop-look blijft; hieronder enkel aanpassingen voor
   kleinere schermen (de rest schaalt al via clamp()/vw).
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
	.contact-knoppen {
		width: 80%;
	}
}

@media (max-width: 768px) {
	#container {
		margin-top: 120px;   /* vaste header is lager op kleine schermen */
	}
}

/* Telefoon */
@media (max-width: 600px) {
	#header {
		padding: 14px;
	}

	#container {
		margin-top: 96px;
		padding: 14px;
	}

	/* Contactknoppen onder elkaar i.p.v. naast elkaar (pasten niet meer). */
	.contact-knoppen {
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	.contact-knop {
		width: min(320px, 82vw);
		min-width: 0;
	}
}