/*
    CSS file created by Lars Skjærbæk
*/

:root {
    /* Core palette (default values) */
    --palette-primary: #1f6f8b; /* deep teal */
    --palette-accent: #e07a5f;  /* warm accent */
    --palette-bg: #fafbfd;      /* page background */
    --palette-muted: #f4f6f8;   /* light surfaces */
    --text-color: #102a43;
    --muted-text: #4b5862;

    /* compatibility variables used across existing CSS */
    --accent-color: var(--palette-primary);
    --accent-contrast: #fff;
    --accent-color-light: var(--palette-muted);
}

body {
    width: 90%;
    margin: auto;
    background: var(--palette-bg);
    color: var(--text-color);
    /* Use Times New Roman as the primary font across the site */
    font-family: "Times New Roman", Times, serif;
}

/* Make top three heading levels black for strong hierarchy */
h1, h2, h3 {
    color: #000;
    font-family: "Times New Roman", Times, serif;
}

#header {
    width: 100%;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: var(--accent-color);
    color: var(--accent-contrast);
    text-align: center;
    transition: background-color 300ms ease, color 300ms ease;
}

/* Header decorative line + subtitle */
#header h1 {
    margin: 0;
    padding: 0;
}

.header-line {
    width: 96%;
    height: 6px; /* slightly thinner */
    background: #000; /* long black line */
    margin: 10px auto 6px;
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

.header-sub {
    text-align: center;
    color: #000;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1rem;
    letter-spacing: 0.4px;
    font-family: "Times New Roman", Times, serif;
}

@media screen and (max-width: 480px) {
    .header-line { height: 5px; width: 92%; }
    .header-sub { font-size: 0.95rem; }
}

#nav {
    width: 100%;
    margin: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: var(--accent-color-light);
    text-align: center;
}

#section {
    float: left;
    text-align: left;
    width: 56%;
    margin: 2%;
}

#aside {
  float: left;
  text-align: center;
  width: 36%;
  margin: 2%;
  background-color: #000000;
}

#aside figure { margin: 0; }
#aside .aside-caption {
        font-size: 0.88rem;
        color: rgba(255,255,255,0.92);
        margin-top: 8px;
        font-style: italic;
        text-align: center;
}

#footer {
    float: left;
    width: 100%;
    margin: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color: var(--footer-color, var(--palette-muted));
    color: var(--footer-contrast, var(--text-color));
    transition: background-color 300ms ease, color 300ms ease;
    text-align: center;
    background-color: var(--palette-primary);
}

#menu {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

.menuPunkt {
    float: left;
}

.menuPunkt a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 18px;
    text-decoration: none;
    background-color: #000; /* make buttons black */
    border-radius: 8px;
    margin: 6px 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    transition: background-color 180ms ease, transform 120ms ease;
}

.menuPunkt a:hover {
    background-color: #111;
    transform: translateY(-1px);
}

.menuPunkt a:focus {
    outline: 3px solid rgba(255,255,255,0.12);
    outline-offset: 3px;
}

/* Active menu link underline */
.menuPunkt a.active,
.menuPunkt a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--palette-accent);
    text-underline-offset: 4px;
}

.menuPunkt a.active:hover,
.menuPunkt a[aria-current="page"]:hover {
    background-color: #111;
}

/* Small info cards (age / city / education / job) */
.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 18px;
    max-width: 720px;
}

.info-card {
    background: var(--accent-color-light);
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(11,22,33,0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 220ms ease;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11,22,33,0.10);
}

.info-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-color);
}

.info-label {
    font-size: 0.82rem;
    color: var(--muted-text);
    margin-top: 6px;
}

@media screen and (max-width: 480px) {
    .info-cards { gap: 10px; }
    .info-card { padding: 10px; }
}

/* mobil optimeret design */
@media screen and (max-width: 800px) {

    #section {
      width: 100%;
      margin: auto;
    }

    #aside {
      width: 100%;
      margin: auto;
    }

}

/* Kollage: 2x2 grid med overlay-tekst på hover */
/* Kollage: forbedret layout, skygge, rounded corners og keyboard support */
.collage {
    display: grid;
    /* smaller tiles: reduce min width and max container size */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 56px auto 0 auto; /* mere afstand fra toppen */
    max-width: 720px;
    align-items: stretch;
}

.collage-item {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(11, 22, 33, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    /* Ensure each tile is a square */
    aspect-ratio: 1 / 1;
}

.collage-item:focus {
    outline: 3px solid rgba(100, 150, 255, 0.18);
    outline-offset: 2px;
}

.collage-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* cover the whole square */
    transition: transform 0.45s ease, filter 0.35s ease;
}

.collage-item .caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.08));
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.22s ease, transform 0.22s ease, background 220ms ease;
}

.collage-item:hover,
.collage-item:focus {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11, 22, 33, 0.14);
}

.collage-item:hover img,
.collage-item:focus img {
    transform: scale(1.06);
    filter: brightness(0.9);
}

.collage-item:hover .caption,
.collage-item:focus .caption,
.collage-item:focus-within .caption {
    opacity: 1;
    transform: scale(1);
}

@media screen and (max-width: 480px) {
    /* aspect-ratio keeps tiles square on small screens; no fixed heights needed */
}


/* Toolbar til redigering */
.collage-toolbar {
    display:flex;
    gap:10px;
    justify-content:flex-start;
    align-items:center;
    margin-top:12px;
    margin-bottom:6px;
}

.collage-toolbar .btn,
.collage-toolbar button { 
    background: #6495ED;
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.collage-toolbar .btn.secondary,
.collage-toolbar button.secondary {
    background: #eee;
    color:#222;
}

.collage.editing .caption {
    opacity: 1;
    transform: scale(1);
}

.collage .caption[contenteditable="true"] {
    outline: 2px dashed rgba(255,255,255,0.18);
    cursor: text;
    padding: 8px 12px;
}