/* style_rus.css — Enhanced with colored header panels */
/* Indentation: 1 tab per level throughout */

/* --- Base Typography --- */
body {
	color: #222;
	background: #fff;
	font-family: 'Open Sans', 'Raleway', 'Rubik', 'Nunito', sans-serif;
	font-size: 1rem;
	line-height: 1.7;
}

.logo a {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;             /* bigger than the menu */
  font-weight: 600;            /* extra bold */
  color: #BFA181;              /* a “golden” accent color */
  letter-spacing: 0.08em;      /* slight spacing for clarity */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); /* subtle depth */
  text-decoration: none;
  margin-right: 1.5rem;        /* some breathing room before the hamburger */
}

/* base + visited + active */
.logo a,
.logo a:visited,
.logo a:active {
  color: #BFA181;
  text-decoration: none;
}

/* hover only */
.logo a:hover {
  color: #E3CBAF;
  text-decoration: none;
}

/* keep focus-looking like normal */
.logo a:focus {
  color: #E3CBAF;
  outline: 2px solid transparent; /* or use outline: auto; if you want default focus ring */
}

/* --- Links --- */
a {
	color: #178582;
	text-decoration: underline;
	transition: color 0.2s;
}

a:hover, a:focus {
	color: #0A1828;
	text-decoration: none;
}

/* --- Colored Panels for Headings --- */
h1 {
	background: linear-gradient(90deg, #0A1828 70%, #178582 100%);
	color: #fff;
	padding: 1.2rem 2rem;
	border-radius: 1.2rem;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 16px rgba(10,24,40,0.10);
	letter-spacing: 0.02em;
}

h2 {
	background: linear-gradient(90deg, #178582 70%, #BFA181 100%);
	color: #fff;
	padding: 1rem 1.7rem;
	border-radius: 1rem;
	margin-top: 2rem;
	margin-bottom: 1.2rem;
	box-shadow: 0 2px 12px rgba(23,133,130,0.09);
	letter-spacing: 0.01em;
}

h3 {
	background: #BFA181;
	color: #fff;
	padding: 0.7rem 1.3rem;
	border-radius: 0.8rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 8px rgba(191,161,129,0.08);
	font-size: 1.4rem;
	font-weight: 700;
}

/* --- h4 (smaller, no panel) --- */
h4 {
	font-size: 1.15rem;
	font-weight: 600;
	color: #23406e;
	margin-top: 1.2rem;
	margin-bottom: 0.85rem;
}

/* --- Paragraphs --- */
p {
	margin-bottom: 1rem;
}

/* --- Custom Quotation Block (em-cite) --- */
.em-cite {
	color: #1b3556;
	background: #f7f9fc;
	border-left: 4px solid #178582;
	padding: 1rem 1.5rem;
	margin: 1.5rem 0;
	font-style: normal;
	font-size: 1.02rem;
}

.em-cite p {
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.em-cite-footer {
	font-size: 0.75rem;
	text-align: right;
	text-decoration: underline;
	color: #888;
	margin-top: 0.5rem;
	font-style: italic;
}

.bibliography {
  font-size: 0.9rem;               /* slightly smaller */
  color: #4f5365;                  /* muted/darker-gray tone for distinction */
  line-height: 1.4;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(245, 245, 250, 1); /* very light wash */
  border-left: 3px solid #BFA181; /* accent bar to tie with branding */
  border-radius: 4px;
}

/* Each reference as a hanging indent */
.bibliography p {
  margin-bottom: 0.5rem;
  text-indent: -1.5em;
  padding-left: 1.5em;
}


/* --- Utility Classes (only those used in HTML) --- */
.mt-4 {
	margin-top: 1.5rem !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.mt-3 {
	margin-top: 1rem !important;
}

.mb-2 {
	margin-bottom: 0.5rem !important;
}

/* --- Responsive Image --- */
.img-fluid {
	max-width: 100%;
	height: auto;
}

/* --- Remove Bootstrap's .mb-0 for .em-cite p to allow spacing --- */
.em-cite p.mb-q {
	margin-bottom: 0.75rem !important;
}


.em-section-nav {
	padding: 1.5rem 0 1rem 0;
	background: #f7f9fc;
	border-radius: 0.8rem;
	box-shadow: 0 2px 8px rgba(23,133,130,0.05);
}

.em-nav-link {
	color: #178582;
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	transition: color 0.2s;
}

.em-nav-link:hover,
.em-nav-link:focus {
	color: #0A1828;
	text-decoration: underline;
}

.site-footer {
	background: linear-gradient(90deg, #0A1828 70%, #178582 100%);
	color: #fff;
	padding: 2.5rem 0 1.2rem 0;
	margin-top: 3rem;
}

.site-footer h5 {
	color: #BFA181;
	font-size: 1.15rem;
	margin-bottom: 1rem;
	letter-spacing: 0.02em;
}

.footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 0.5rem;
}

.footer-menu a {
	color: #fff;
	text-decoration: none;
	transition: color 0.2s;
	font-size: 1rem;
}

.footer-menu li {
	position: relative;
}

.footer-submenu {
	list-style: none;
	padding-left: 1.2rem;
	margin-top: 0.3rem;
}

.footer-submenu li {
	margin-bottom: 0.3rem;
}

.footer-menu > li > span {
	font-weight: 600;
	color: #fff;
	cursor: default;
}

.footer-menu a:hover,
.footer-menu a:focus {
	color: #BFA181;
	text-decoration: underline;
}

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 1rem;
	font-size: 0.95rem;
	color: #e8e8e8;
	letter-spacing: 0.01em;
}

@media (max-width: 767px) {
	.site-footer {
		text-align: center;
	}
	.site-footer .row > div {
		margin-bottom: 2rem;
	}
}

/* --- Top Navigation Bar --- */
.site-header {
	background: linear-gradient(90deg, #0A1828 70%, #178582 100%);
	padding: 0.8rem 0;
	box-shadow: 0 2px 8px rgba(10,24,40,0.15);
	z-index: 1000;
}

.main-nav.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* (optional) if you want the navbar to span edge-to-edge, consider switching to .container-fluid 
       or remove left/right padding on .container. But for now, space-between will push logo left & menu right. */
}

/* Navigation menu */
.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.8rem;
	font-weight: 600;
	font-family: 'Raleway', 'Open Sans', sans-serif;
}

.nav-item {
	position: relative;
}

.nav-link {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	padding: 0.4rem 0;
	transition: color 0.3s;
	cursor: pointer;
}

.nav-link:hover,
.nav-link:focus {
	color: #BFA181;
	text-decoration: underline;
}

/* Dropdown menus */
.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #178582;
	border-radius: 0.6rem;
	padding: 0.8rem 1rem;
	min-width: 200px;
	box-shadow: 0 4px 12px rgba(23,133,130,0.3);
	z-index: 1001;
}

.dropdown-menu ul {
	padding-left: 1rem;
}

.dropdown-menu li {
	margin-bottom: 0.5rem;
}

.dropdown-menu li:last-child {
	margin-bottom: 0;
}

.dropdown-menu a,
.dropdown-menu span.submenu-title {
	color: #fff;
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
	color: #BFA181;
	text-decoration: underline;
}

/* Show dropdown on hover */
.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown:focus-within > .dropdown-menu {
	display: block;
}

/* Submenu inside dropdown */
.dropdown-submenu ul {
	margin-top: 0.4rem;
}

.submenu-title {
	font-weight: 600;
	display: block;
	margin-bottom: 0.4rem;
	cursor: default;
}

/* Responsive: stack menu on small screens */
@media (max-width: 767px) {
	.main-nav.container {
		justify-content: flex-start;
		padding: 0 1rem;
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
	}

	.nav-item {
		margin-bottom: 1rem;
	}

	.dropdown-menu {
		position: static;
		box-shadow: none;
		background: transparent;
		padding: 0;
		min-width: auto;
	}

	.dropdown-menu ul {
		padding-left: 1rem;
	}

	.nav-item.dropdown:hover > .dropdown-menu,
	.nav-item.dropdown:focus-within > .dropdown-menu {
		display: none;
	}
}

/* Hamburger icon */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 1100;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
}

.hamburger span {
	display: block;
	width: 28px;
	height: 4px;
	margin: 4px auto;
	background: #fff;
	border-radius: 2px;
	transition: all 0.3s;
}

/* Responsive styles */
@media (max-width: 991.98px) {
	.hamburger {
		display: flex;
	}

	.main-nav.container {
		position: relative;
	}

	.nav-menu {
		flex-direction: column;
		position: absolute;
		top: 60px;
		right: 0;
		background: linear-gradient(90deg, #0A1828 70%, #178582 100%);
		width: 240px;
		max-width: 90vw;
		padding: 1.5rem 1rem;
		border-radius: 0 0 0.8rem 0.8rem;
		box-shadow: 0 8px 24px rgba(10,24,40,0.18);
		display: none;
		z-index: 1050;
	}

	.nav-menu.open {
		display: flex;
	}

	.nav-item {
		margin-bottom: 1rem;
	}

	.dropdown-menu {
		position: static;
		box-shadow: none;
		background: transparent;
		padding: 0.3rem 0 0.7rem 1rem;
		border-radius: 0;
		display: none;
	}

	.nav-item.dropdown.open > .dropdown-menu {
		display: block;
	}
}

/* Hamburger animation (optional) */
.hamburger.active span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* --- BOXED HERO (keeps exact aspect ratio; scales on mobile) --- */
.hero.hero--boxed{
  position: relative;
  width: 100%;
  aspect-ratio: 1913 / 875;                                /* ratio locked */
  background: #07131f url("../EM_Pics/Hero_head_pic.jpg") center/cover no-repeat;
  overflow: hidden;

  /* one responsive scale for all lines (keeps size ratios identical) */
  --fs-base: clamp(10px, 2.7vw, 17px);
}

/* Desktop-only height guard so it doesn’t look too short on wide screens */
@media (min-width: 992px){
  .hero.hero--boxed{ min-height: 360px; }
}

/* Fallback if aspect-ratio isn’t supported */
@supports not (aspect-ratio: 1){
  .hero.hero--boxed::before{
    content:"";
    display:block;
    padding-top: calc(875 / 1913 * 100%);                  /* keeps ratio */
  }
}

/* Base text: keep inside safe bounds, horizontal (no rotation/skew) */
.hero.hero--boxed .q{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 84%;
  white-space: normal;
  text-align: center;
  font-family: 'Poppins','Raleway','Open Sans',sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: .01em;
  pointer-events: none;
}

/* Brightness + glow tiers; sizes derived from --fs-base (consistent ratios) */
.hero.hero--boxed .q1{  /* Is there an afterlife? — biggest (~53px max) */
  top: 40%;
  font-size: calc(var(--fs-base) * 3.10);
  color: rgba(255,255,255,1);
  text-shadow: 0 0 14px rgba(255,255,255,.90), 0 0 80px rgba(180,255,245,.35);
}

.hero.hero--boxed .q2{  /* What defines our destinies? — second (~34px max) */
  top: 18%;
  font-size: calc(var(--fs-base) * 2.00);
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(255,255,255,.78), 0 0 50px rgba(160,255,240,.22);
}

.hero.hero--boxed .q3{  /* Can we get signals from the future? — third (~26px max) */
  top: 60%;
  font-size: calc(var(--fs-base) * 1.50);
  color: rgba(255,255,255,.88);
  text-shadow: 0 0 9px rgba(255,255,255,.66), 0 0 38px rgba(150,250,240,.18);
}

.hero.hero--boxed .q4{  /* Do we possess free will? — fourth (~20px max) */
  top: 80%;
  font-size: calc(var(--fs-base) * 1.18);
  color: rgba(255,255,255,.86);
  text-shadow: 0 0 8px rgba(255,255,255,.60), 0 0 34px rgba(145,245,235,.16);
}

/* Off-center placements (q1 stays centered) */
.hero.hero--boxed .q1 { left: 50%; }   /* center */
.hero.hero--boxed .q2 { left: 34%; }   /* more left (top line) */
.hero.hero--boxed .q3 { left: 62%; }   /* more right (middle-lower line) */
.hero.hero--boxed .q4 { left: 42%; }   /* a bit left (bottom line) */

/* --- Mobile: keep exact aspect ratio, no wrapping, same ratios --- */
@media (max-width: 480px){
  /* Smaller global scale; all lines derive from this (ratios preserved) */
  .hero.hero--boxed{ --fs-base: clamp(7px, 1.9vw, 12px); }

  /* Do not wrap; stay within the hero */
  .hero.hero--boxed .q{
    white-space: nowrap;
  }
}

/* Slightly larger phones (e.g., 414–480px wide) */
@media (min-width: 414px) and (max-width: 480px){
  .hero.hero--boxed{ --fs-base: clamp(8px, 2.2vw, 13px); }
}

/* Full-bleed hero image under the navbar */
.hero-bleed{
  width: 100vw;                 /* span the viewport */
  margin-left: 50%;             /* break out of page padding */
  transform: translateX(-50%);  /* center the 100vw block */
  padding-top: 10px;            /* keep your original top spacing */
}
.hero-bleed .hero-img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;              /* avoid being capped by any parent */
}

/* --- HERO: full-bleed version (outside .container) --- */
.hero.hero--bleed{
  position: relative;
  width: 100vw;                 /* span the viewport */
  margin-left: 50%;
  transform: translateX(-50%);  /* center the 100vw block */
  aspect-ratio: 1913 / 875;
  background: #07131f url("../EM_Pics/Hero_head_pic.jpg") center/cover no-repeat; /* path is relative to CSS */
  overflow: hidden;

  /* global text scale (keeps ratios identical if you used var sizing) */
  --fs-base: clamp(10px, 2.7vw, 17px);
}

/* Fallback if aspect-ratio unsupported */
@supports not (aspect-ratio: 1){
  .hero.hero--bleed::before{
    content:"";
    display:block;
    padding-top: calc(875 / 1913 * 100%);
  }
}

/* Text overlay (same look as boxed version) */
.hero.hero--bleed .q{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 84%;
  white-space: normal;
  text-align: center;
  font-family: 'Poppins','Raleway','Open Sans',sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: .01em;
  pointer-events: none;
}

/* Sizes/brightness (use either the var-based sizes or your fixed px) */
.hero.hero--bleed .q1{ top:40%; font-size: calc(var(--fs-base) * 3.10); color:#fff;
  text-shadow: 0 0 14px rgba(255,255,255,.90), 0 0 80px rgba(180,255,245,.35); }
.hero.hero--bleed .q2{ top:18%; font-size: calc(var(--fs-base) * 2.00); color:rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(255,255,255,.78), 0 0 50px rgba(160,255,240,.22); }
.hero.hero--bleed .q3{ top:60%; font-size: calc(var(--fs-base) * 1.50); color:rgba(255,255,255,.88);
  text-shadow: 0 0 9px rgba(255,255,255,.66), 0 0 38px rgba(150,250,240,.18); }
.hero.hero--bleed .q4{ top:80%; font-size: calc(var(--fs-base) * 1.18); color:rgba(255,255,255,.86);
  text-shadow: 0 0 8px rgba(255,255,255,.60), 0 0 34px rgba(145,245,235,.16); }

/* Off-center placements */
.hero.hero--bleed .q1{ left:50%; }  /* center */
.hero.hero--bleed .q2{ left:34%; }  /* more left */
.hero.hero--bleed .q3{ left:62%; }  /* more right */
.hero.hero--bleed .q4{ left:42%; }  /* a bit left */

/* TEMP: force the hero to exactly 1913×875 for the screenshot */
.hero.hero--bleed.hero--snap{
  width: 1913px !important;
  height: 875px !important;
  aspect-ratio: auto !important;  /* ignore aspect-ratio while snapping */
  margin: 0 auto !important;       /* center it */
  transform: none !important;      /* cancel the 100vw translate from --bleed */
  max-width: none !important;

  /* lock the text scale so sizes are exactly as designed */
  --fs-base: 17px !important;      /* q1≈53px, q2≈34px, q3≈26px, q4≈20px */
}