@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap');

/* Page-specific background for index only */
body.page-home {
	background-color: #4D7997; /* bluish tone from screenshot */
	color: #fff;
	font-family: 'Poppins', Arial, sans-serif;
}

/* Non-index pages: white background and brand font color */
body:not(.page-home) {
	background-color: #ffffff;
	color: #003F6A;
}

/* Non-index colors for header, nav, lines and toggles */
body:not(.page-home) .site-nav { background:#ffffff; }
body:not(.page-home) .nav-item a { color: rgba(0,63,106,0.95); }
body:not(.page-home) .nav-item.active a { text-decoration:underline; text-underline-offset:6px; font-weight:700; }
body:not(.page-home) .line { border-top-color: rgba(0,63,106,0.95); }
body:not(.page-home) .site-nav.open .nav-list { background:#ffffff; }
body:not(.page-home) .site-nav .lang::before{ background:#003F6A; box-shadow: 0 8px 0 #003F6A, 0 16px 0 #003F6A; }
body:not(.page-home) .lang-link { color: rgba(0,63,106,0.95); }

/* Header / Navigation */
header { position: relative; }
.site-nav { background:#003F6A; box-shadow: 0 6px 0 rgba(0,0,0,0.12); height:80px; display:flex; align-items:center; justify-content:center; position:relative; }
.nav-list { list-style:none; display:flex; gap:64px; margin:0; padding:0; }
.nav-item a { color: rgba(255,255,255,0.95); text-decoration:none; font-weight:400; }
.nav-item.active a { text-decoration:underline; text-underline-offset:6px; font-weight:700; }
.site-nav .lang { position:absolute; right:36px; color:rgba(255,255,255,0.95); text-decoration:none; background:transparent; border:0; padding:0; cursor:pointer; font:inherit; -webkit-appearance:none; appearance:none; }

/* Layout for hero */
html, body { height: 100%; margin: 0; }
.hero { min-height: calc(100vh - 80px); display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; text-align:center; padding:40px 20px; }
.hero h1 { font-weight:300; font-size:clamp(48px, 8vw, 112px); margin:0; letter-spacing:1px; position:relative; z-index:1; }
.hero .lead { font-size: clamp(20px, 3.5vw, 32px); margin-top:18px; margin-bottom:5px; opacity:0.95; font-weight:300; }
.hero .sub { font-size: clamp(16px, 2.6vw, 22px); margin-top:0; opacity:0.9; font-weight:300; }

/* Decorative double horizontal lines on each side of the hero */
.line { position:absolute; top:50%; height:0; border-top:4px solid rgba(255,255,255,0.95); width:240px; transform:translateY(-50%); z-index:2; }
.line.thin { border-top-width:2px; top: calc(50% + 12px); z-index:2; }
.line.left { left:2vw; }
.line.left.thin { left:2vw; }
.line.right { right:2vw; }
.line.right.thin { right:2vw; }

/* Responsive tweaks */
@media (max-width:900px){
	.nav-list { gap:28px; }
	.line { width:100px; }
}

/* Desktop / mobile language toggle behavior */
.lang-link { position:absolute; right:36px; color:rgba(255,255,255,0.95); text-decoration:none; font-weight:400; display:none; z-index:60; top:50%; transform:translateY(-50%); }

/* Ensure mobile language item is hidden on desktop and hamburger hidden on desktop */
@media (min-width:521px){
	.nav-list .lang-item { display:none; }
	.lang-link { display:block; }
	.site-nav .lang { display:none; }
}

/* Tablet-specific layout (approx. 600px - 900px) */
@media (min-width:600px) and (max-width:900px){
	/* slightly larger hero text and spacing for tablet */
	.hero { padding:60px 20px; }
	.hero h1 { font-size:clamp(56px, 9.5vw, 96px); line-height:1.02; }
	.hero .lead { font-size: clamp(20px, 3.2vw, 28px); margin-top:12px; margin-bottom:5px; }
	.hero .sub { font-size: clamp(16px, 2.4vw, 20px); margin-top:0; }

	/* lines: kept fixed and shortened for tablet */
	.line { width:140px; }
	.line.left { left:3vw; right:auto; }
	.line.left.thin { left:3vw; right:auto; }
	.line.right { right:3vw; left:auto; }
	.line.right.thin { right:3vw; left:auto; }
	.line.thin { top: calc(50% + 14px); }
}

/* Exact 600px viewport: make lines 100px shorter */
@media (width:600px){
	.line { width:90px; }
}

@media (max-width:520px){
	/* mobile: hide full nav and show hamburger-style icon */
	.nav-list { display:none; }
	.site-nav { height:64px; }
	.site-nav .lang { position:absolute; top:10px; right:18px; display:inline-flex; width:40px; height:34px; color:transparent; z-index:60; align-items:center; justify-content:center; background:transparent; border:0; padding:6px; border-radius:6px; }
	.site-nav .lang::before{ content: ''; display:block; width:24px; height:3px; background:#fff; border-radius:2px; box-shadow: 0 8px 0 #fff, 0 16px 0 #fff; position:relative; z-index:61; }
	/* Show visible focus ring only for keyboard users */
	.site-nav .lang:focus { outline: none; }
	.site-nav .lang:focus-visible { outline:2px solid rgba(255,255,255,0.75); outline-offset:4px; border-radius:6px; }
	/* hide text on mobile while keeping pseudo-element visible */
	.site-nav .lang { font-size:0; }
	.site-nav .lang[aria-expanded="true"] { background:rgba(255,255,255,0.04); }

	/* mobile open nav */
	.site-nav.open { align-items:flex-start; }
	.site-nav.open .nav-list { display:flex; flex-direction:column; gap:20px; position:absolute; left:0; right:0; top:64px; padding:20px; background:#073e54; justify-content:center; align-items:center; z-index:9; }
	.site-nav.open .nav-item a { font-size:18px; }

	/* hero adjustments for phone */
	.hero { padding:80px 20px; }
	.hero h1{ font-size:clamp(48px,10vw,80px); line-height:1.02; }
	.hero .lead { font-size:18px; margin-top:10px; margin-bottom:5px; }
	.hero .sub { font-size:16px; margin-top:3px; }

	/* show decorative lines and make them shorter on phone */
	.line { display:block; width:80px; z-index:5; }
	.line.left { left:4vw; right:auto; }
	.line.left.thin { left:4vw; right:auto; }
	.line.right { right:4vw; left:auto; }
	.line.right.thin { right:4vw; left:auto; }
	.line.thin { top: calc(50% + 12px); }
}