/* ============================================================
SELF — A4 PRINT TEMPLATE
============================================================ */

:root {
    --navy: #08254b;
    --navy-dark: #061d3c;
    --navy-light: #123766;

    --orange: #f4511e;
    --orange-light: #ff7043;

    --blue-grey: #eef3f8;
    --border: #d8e2ee;

    --text: #122b50;
    --muted: #60718a;

    --green: #91c83e;
    --yellow: #f6c440;

    --white: #ffffff;
}

/* ============================================================
PAGE / PRINT
============================================================ */

@page {
    size: 210mm 297mm;
    margin: 0;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #d9dde3;
}

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);
}

.document {
    width: 210mm;
    margin: 0 auto;
}

.a4-page {
    width: 210mm;
    height: 297mm;

    position: relative;
    overflow: hidden;

    background: var(--white);

    page-break-after: always;
    break-after: page;
}

.a4-page:last-child {
    page-break-after: auto;
    break-after: auto;
}


/* ============================================================
GENERAL
============================================================ */

.page-content {
    padding-left: 10.96mm;
    padding-right: 10.96mm;
}

section {
    margin-bottom: 3mm;
}

p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.section-card {
    border: 1px solid var(--border);
    border-radius: 2.83mm;
    background: rgba(255,255,255,.96);
    padding: 2.83mm 3.54mm;
    font-size: 10pt;
    line-height: 1.38;
}

.section-heading {
    display: flex;
    align-items: center;
    margin-top: 2mm;
    margin-bottom: 4mm;
    color: var(--navy);
    font-size: 12pt;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
}

.section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: -7px;
    display: block;
    width: 8mm;
    height: 1.10mm;
    flex: 0 0 auto;
    background: var(--orange);
}

.orange {
    color: var(--orange);
}


/* ============================================================
PAGE 1 — HEADER
============================================================ */

.header {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            var(--navy-dark) 0%,
            var(--navy) 57%,
            #0c2e58 100%
        );
    color: white;
}

.header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 52%;
    background: rgba(22, 70, 119, .22);
}

.header::after {
    content: "";
    position: absolute;
    right: -14.14mm;
    top: -7.07mm;
    width: 42.42mm;
    height: 74.24mm;
    background: var(--orange);
    transform: rotate(-21deg);
}

.header-content {
    position: relative;
    z-index: 3;
    padding: 4mm 8mm;
}

.header-kicker {
    color: var(--orange);
    font-size: 12pt;
    font-weight: 700;
    margin-bottom: 2.83mm;
}

.header-title {
    margin: 0;
    font-size: 50pt;
    line-height: .9;
    font-weight: 800;
    letter-spacing: -.35px;
}

.header-subtitle {
    margin-top: 2.83mm;
    font-size: 13pt;
    font-weight: 600;
}

.header-description {
    margin-top: 1mm;
    font-size: 10pt;
    color: #e8eef6;
}

.header-logos {
	position: absolute;
	z-index: 5;
	right: 4mm;
	top: 5mm;
	width: 75mm;
	padding: 3.54mm;
	border-radius: 3.18mm;
	background: white;
	box-shadow: 0 1.77mm 4.24mm rgba(0,0,0,.12);
}

.logo-image {
    height: 10mm;
    margin: auto;
}

/* ============================================================
INTRODUCTION
============================================================ */

.intro {
    margin-top: 3.18mm;
}

.intro-image {
    width: 230mm;
    height: 60mm;
    overflow: hidden;
    margin-left: 3mm;
    position: relative;
    border-radius: 2.83mm;
}

.intro-image-img {
    padding: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.intro-image::after {
	content: "";
	position: absolute;
	left: -156px;
	top: -96px;
	width: 42.42mm;
	height: 74.24mm;
	background: var(--orange);
	transform: rotate(40deg);
}

.innova-icone {
	position: absolute;
	bottom: 29px;
	left: 70px;
	width: 30px;
	height: 30px;
	background-color: #263238;
	transform: skewX(22deg);
	padding: 3mm 0mm 1mm 4mm;
}

.image-caption {
    position: absolute;
    bottom: 4px;
    right: 3px;
    font-size: 5pt;
    color: var(--muted);
    padding: 1px 3px;
    border-radius: 2px;
}

.intro-card {
    font-size: 11pt;
}



/* ============================================================
LANGUAGE BAR
============================================================ */

.language-label {
    color: var(--orange);
    font-size: 12pt;
    font-weight: 800;
    white-space: nowrap;
    margin-right: 2mm;
}

.language-pill {
    padding: .88mm 2.12mm;
    border: 1.2px solid var(--orange);
    border-radius: 3.54mm;
    color: var(--text);
    font-size: 9pt;
    white-space: nowrap;
}

/* ============================================================
SKILLS
============================================================ */

.skills-card {
    background:
        linear-gradient(
            135deg,
            #f7f9fc,
            #eef3f8
        );
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 13mm;
}

.list li {
    position: relative;
    padding-left: 5mm;
    margin-bottom: 1.06mm;
}

.list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5mm;
    width: 1.8mm;
    height: 1.8mm;
    border-radius: 50%;
    background: var(--orange);
}

.oral-box {
    padding: 4mm 2mm;
    margin: 0 5mm;
}

.oral-icon {
    color: var(--orange);
    font-size: 20pt;
    margin-right: 5mm;
}

/* ============================================================
STATISTICS
============================================================ */

.stat-label {
    color: var(--navy);
    font-size: 10pt;
    line-height: 1.25;
}

.stat-value {
    color: var(--orange);
    font-size: 20pt;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 2mm;
}

.stat-icon {
    float: right;
    color: var(--navy);
    font-size: 18pt;
}

/* ============================================================
OBJECTIVES
============================================================ */


/* ============================================================
LABELS
============================================================ */

.label-icon {
    color: var(--orange);
    font-size: 25pt;
    flex-shrink: 0;
    width: 10mm;
}

.label-title {
    color: var(--orange);
    font-size: 12pt;
    font-weight: 800;
}

.label-text {
    margin-top: .71mm;
    font-size: 10pt;
    line-height: 1.25;
}

/* ============================================================
PAGE 1 FOOTER
============================================================ */

.page1-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 13mm;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3mm;
    background: var(--navy);
    color: white;
    font-size: 10pt;
}

.footer-icon {
    color: var(--orange);
}

/* ============================================================
PAGE 2 HEADER
============================================================ */

.page2-header {
    height: 27.23mm;
    position: relative;
    overflow: hidden;
    padding: 7.78mm 12.73mm;
    background: var(--navy);
    color: white;
}

.page2-header::after {
    content: "";
    position: absolute;
    right: -8.84mm;
    top: -17.68mm;
    width: 28.28mm;
    height: 60.10mm;
    background: var(--orange);
    transform: rotate(-27deg);
}

.page2-title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 22pt;
    font-weight: 800;
}

.page2-subtitle {
    position: relative;
    z-index: 2;
    font-size: 10pt;
    margin-top: 1mm;
}

/* ============================================================
PAGE 2 TOP SECTIONS
============================================================ */

.page2-content {
    padding: 8.84mm 12.02mm 7.07mm;
}

.diagram-placeholder {
    height: 53.03mm;
}

.map-placeholder {
    height: 53.03mm;
}

.mini-subtitle {
    margin-top: 0mm;
    color: var(--muted);
    font-size: 8pt;
}

/* ============================================================
RESEARCH OBJECTIVES
============================================================ */

/* ============================================================
OFFERS
============================================================ */

.offers {
	position: relative;
	border: 3px solid var(--orange);
	border-radius: 30px;
	padding-top: 8mm;
    padding-bottom: 5mm;
    margin-top: 7mm;
}

.offers-heading {
    position:absolute;
    top: -4.35mm;
    left: 50%;
    transform: translateX(-50%);
    color: var(--navy);
    font-size: 15pt;
    font-weight: 800;
    background-color: var(--white);
    padding: 0 5mm;
}

.offer {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3.54mm;
}

.offer-number {
    width: 10mm;
    height: 10mm;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2mm;
    margin-right: 2mm;
    border-radius: 50%;
    background: var(--orange-light);
    color: white;
    font-size: 13pt;
    font-weight: 800;
}

.offer-title {
    color: var(--muted);
    font-size: 12pt;
    font-weight: 800;
}

.offer-subtitle {
    text-transform: uppercase;
    color: var(--orange);
    font-size: 12pt;
    font-weight: 600;
}

.offer-text {
    font-size: 10pt;
    margin-top: 2mm;
}

.operated-by {
    position:absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 10pt;
    font-style: italic;
    background-color: var(--white);
    padding: 0 5mm;
}

/* ============================================================
CONTACT
============================================================ */

.page2-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38mm;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3mm;
    background: var(--navy);
    color: white;
    font-size: 10pt;
}


.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  margin: 0 auto;
}

/* CONTACT */
.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex: 1;
}

.contact-title {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12pt;
  letter-spacing: 0.08em;
  padding-top: 0.15rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-left: 5mm;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.4;
  text-decoration: none;
}

.contact-icon {
  flex: 0 0 1.2rem;
  text-align: center;
}

/* LOGOS */

.logo-image {
  display: block;
  width: auto;
  max-width: 110px;
  max-height: 55px;
  object-fit: contain;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
PAGE 2 LOGOS
============================================================ */

.bottom-logos {
    margin-top: 3.54mm;

    padding: 0 8.84mm;
}

.bottom-logos .logo-placeholder {
    min-height: 8.84mm;
    border: none;
}


/* ============================================================
PRINT
============================================================ */

@media print {

    html,
    body {
        background: white;
    }

    .document {
        width: 210mm;
        margin: 0;
    }

    .a4-page {
        margin: 0;
        box-shadow: none;
    }

    [contenteditable="true"]:focus {
        outline: none;
    }
}

/* ============================================================
SCREEN PREVIEW
============================================================ */

@media screen {

    .a4-page {
        margin: 5.30mm auto;

        box-shadow:
            0 1.41mm 5.30mm rgba(0,0,0,.2);
    }
}


/* ============================================================
PLACEHOLDER ASSETS
============================================================ */

.asset-placeholder {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 15.91mm;

    border: 2px dashed #b9c7d8;
    border-radius: 2.12mm;

    background:
        linear-gradient(
            135deg,
            #f4f7fa,
            #e8eef5
        );

    color: #7c8ca0;

    font-size: 3.89pt;
    font-weight: 700;
    letter-spacing: .28px;
    text-transform: uppercase;

    overflow: hidden;
}

.asset-placeholder::after {
    content: "PLACEHOLDER";

    position: absolute;

    font-size: 2.83pt;
    color: #9aa8b8;
}

.asset-placeholder > span {
    position: relative;
    z-index: 2;
}

.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 9.90mm;

    padding: 1.41mm;

    border: 1px dashed #b8c5d5;
    border-radius: 1.77mm;

    background: #fff;

    color: var(--navy);

    text-align: center;
    font-size: 4.60pt;
    font-weight: 800;
}

.small-placeholder {
    min-height: 8.48mm;
}