:root {
	--primary-blue: #255483;
    --primary-red: #d32f2f;
    --dark-blue: #1a237e;
    --light-grey: #e4e4e4;
    --header-text: #333; /* Carbon */
	--body-text: #444;   /* Vulcanized */
	--caption-text: #777; /* Lucky grey */
}

/* Base Reset & Typography */
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--body-text);
    margin: 0;
    background-color: var(--light-grey);
}

h1, h2, h3, h4, h5 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: normal;
    color: var(--header-text);
}

a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px 10px;
    background: white;
}

/* Header & Topbar */
.topbar {
    background: var(--primary-blue);
    height: 40px;
    color: white;
}

header {
    padding: 25px 0 10px 0;
    border-bottom: 1px solid var(--light-grey);
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: top;
    flex-wrap: wrap;
}

.brand {
    font-family: 'Pacifico', cursive;
    font-size: 32px;
    color: var(--primary-blue);
    text-decoration: none;
}

.brand img {
    max-height: 80px;
    display: block;
}

/* Navigation - responsive */
.nav {
  margin-top: 12px; 
}
.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  
  /* Flexbox settings for wrapping */
  display: flex;
  flex-wrap: wrap; /* Essential for multiple rows */
  gap: 10px;       /* Adds spacing between items */
}

/* Styling the links as clickable texts */
.nav ul li a {
  text-decoration: none;
  color: var(--body-text);
  font-size: 14px;
  white-space: nowrap; /* Prevents text inside a link from breaking */
  text-transform: none; /* Prevents the text from capitalize changes */
}

/* Optional hover state */
.nav ul li:hover > a {
  color: var(--primary-blue);
  font-weight: bold;
}

/* Content Area */
.page-header {
    padding-bottom: 10px;
}

.page-header h1 {
    font-size: 38px;
    margin: 20px 0;
}

.main-content {
    display: flex;
    gap: 30px;
    padding-bottom: 40px;
}

.indent-content {
  padding-left: 1em
}

/* Centers the image and credit group on the page */
.photo-credit-group {
    display: table;
    margin: 20px auto;
    padding: 0;
}

.photo-credit-group img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd; /* Optional: adds a thin border to the photo */
}

.photo-credit-group figcaption {
    text-align: left;
    font-size: 11px;         /* Smaller for credits */
    color: var(--caption-text); /* Subtle gray color */
    margin-top: 5px;
    text-transform: uppercase; /* Optional: makes "FOTO:" look more professional */
    letter-spacing: 0.5px;
}
.main-image {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border: 1px solid var(--light-grey);
    padding: 4px;
}

.caption {
    font-size: 12px;
    color: var(--caption-text);
    margin-top: 5px;
}

.cta-box {
    background-color: var(--light-grey);
    padding: 20px;
    border-left: 5px solid var(--primary-blue);
    margin-top: 20px;
}

/* Footer */
.footer {
    background-color: var(--primary-blue);
    color: var(--light-grey);
    text-align: center;
    padding: 15px 0;
}

/* Links in footer */
.footer a { 
    color: var(--light-grey); /* Ensures text is visible */
    text-decoration: none;
    display: inline-flex;    /* Keeps logo and text on the same line */
    align-items: center;     /* Centers logo vertically with text */
    gap: 10px;               /* Adds space between logo and text */
}
/* Tekst vi ønsker at skal være lett å kopiere */ 
.copyable {
    -webkit-user-select: all; /* Required for Safari on iPhone/iPad */
	user-select: all; /* Standard */
	display: inline-block;
    white-space: nowrap;
}

.fb-logo {
    height: 16px;
	width: auto;
    display: inline-block;
    vertical-align: middle;
}