/* =====================================================================
   common.css – styles shared by every page on pina.day
   ---------------------------------------------------------------------
   Load this file first, then the page's own stylesheet
   (home.css for index.html, flags.css for flagg.html).
   ===================================================================== */


/* ---------- Colours ----------
   Change a colour here and it changes everywhere on the site.
   Use them in other files like this: color: var(--primary);          */
:root {
	--dark: #212529;                        /* headings and dark text              */
	--text: #777;                           /* normal body text (grey)             */
	--primary: #0088cc;                     /* the blue used for links and buttons */
	--primary-hover: #0077b3;               /* slightly darker blue for hover      */
	--accent: #e36159;                      /* salmon red (badges, highlight)      */
	--highlight: rgba(227, 97, 89, 0.2);    /* the same red, see-through           */
	--line: #e7e7e7;                        /* thin borders and dividers           */
	--soft: #f7f7f7;                        /* very light grey backgrounds         */
}


/* ---------- Basics ---------- */

/* Make width/height include padding and border (much easier to size things) */
* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Poppins", Arial, sans-serif;   /* Poppins is loaded from Google Fonts in the <head> of each page */
	color: var(--text);
	background: #fff;
	line-height: 1.7;
}

/* Buttons use the same font as the rest of the page */
button { font: inherit; }

a { color: var(--primary); }


/* ---------- Page width ----------
   .container keeps the content centred and stops it getting too wide
   on big screens. Each page can make it wider with --max.             */
.container {
	max-width: var(--max, 1140px);
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 640px) {
	.container { padding: 0 14px; }
}


/* ---------- Accessibility ----------
   Some people turn off animations in their phone or computer settings
   (because motion makes them dizzy). This respects that everywhere.   */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}