/* ===== Trans-forward palette ===== */
:root{
  --blue:#5BCEFA;
  --pink:#F7A8B8;
  --white:#ffffff;

  --bg:#fcfeff;
  --surface:#ffffff;
  --surface-2:#fff7fa;
  --text:#1f2330;
  --heading:#24344a;
  --link:#5BCEFA;
  --link-hover:#e06397;

  --accent-blue:rgba(91,206,250,.22);
  --accent-pink:rgba(247,168,184,.22);
  --border:#e8eef7;
  --row-hover:rgba(91,206,250,.12);
  --table-header-bg:rgba(91,206,250,.18);

  --stripe:linear-gradient(90deg,#5BCEFA 0%,#fff 25%,#F7A8B8 50%,#fff 75%,#5BCEFA 100%);

  --bg-stripes:repeating-linear-gradient(
    135deg,
    rgba(91,206,250,.045) 0 18px,
    rgba(255,255,255,.65) 18px 44px,
    rgba(247,168,184,.045) 44px 62px,
    rgba(255,255,255,.65) 62px 88px
  );
}

/* ===== Reset / base ===== */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

ul{ list-style:none; margin:0 0 16px 0; padding:0; }
li{ margin:10px 0; }

::selection{
  background:linear-gradient(90deg, rgba(91,206,250,.55), rgba(247,168,184,.55));
  color:#111;
}

/* ===== Body / layout ===== */
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-stripes), var(--bg);
  color:var(--text);
  line-height:1.6;
  margin:40px;
  padding:40px;
}

.container{ max-width:1200px; margin:auto; padding:0 20px; }
.section{ margin-bottom:40px; }
p{ margin:0 0 20px 0; font-size:1.1em; }

/* ===== Links ===== */
a{
  color:var(--link);
  text-decoration:none;
  background-image:linear-gradient(90deg,var(--blue),var(--pink));
  background-size:0 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:color .2s, background-size .25s ease;
  border-bottom:1px solid transparent;
}
a:hover{
  color:var(--link-hover);
  background-size:100% 2px;
}
a:focus-visible,
button:focus-visible,
.menu a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(91,206,250,.45), 0 0 0 6px rgba(247,168,184,.35);
  border-radius:6px;
}

/* ===== Header ===== */
header{
  position:relative;
  background:var(--surface);
  color:var(--heading);
  padding:16px 12px 12px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  border:1px solid var(--border);
  border-radius:12px;
}
header::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:10px;
  background:var(--stripe);
  border-radius:12px 12px 0 0;
}
header h1{
  margin:0;
  font-size:2.4em;
  font-weight:700;
  color:var(--heading); /* solid, readable */
}

.site-logo{ height:50px; width:auto; margin-right:20px; vertical-align:middle; }
img.site-logo{ width:100px; height:auto; }

/* ===== Main ===== */
main{
  padding:30px 0;
  max-width:1200px;
  margin:0 auto;
}

/* ===== Headings (FIXED: solid text, pastel bg) ===== */
h2, h3{
  margin:0 0 10px 0;
  border-radius:10px;
  border:1px solid var(--border);
  color:var(--heading);                /* readable text */
  text-shadow:0 1px 0 #fff;            /* slight lift on pastel */
}
h2{
  padding:12px 14px;
  font-size:1.8em;
  background:linear-gradient(90deg,var(--accent-blue),var(--accent-pink));
  border-left:10px solid transparent;
  border-image:linear-gradient(180deg,var(--blue),#fff,var(--pink)) 1;
}
h3{
  padding:8px 12px;
  font-size:1.4em;
  background:linear-gradient(90deg,rgba(91,206,250,.16),rgba(247,168,184,.16));
  border-left:8px solid transparent;
  border-image:linear-gradient(180deg,var(--blue),var(--pink)) 1;
}

/* ===== Menu (colored “buttons” kept) ===== */
.menu{
  display:flex;
  justify-content:center;
  padding:0;
  gap:8px;
}
.menu ul{ margin:0; padding:0; }
.menu li{ margin:0; }
.menu a{
  color:#000;
  font-size:16px;
  padding:10px 12px;
  display:block;
  border-radius:10px;
  transition:background-color .25s ease, color .25s ease, transform .06s ease;
  border:1px solid var(--border);
  background:var(--surface);
}
.menu a:hover{
  background:linear-gradient(90deg,var(--accent-blue),var(--accent-pink));
  color:var(--text);
}
.menu a:active{ transform:translateY(1px); }

/* ===== Dropdown ===== */
.dropdown-header{
  cursor:pointer;
  margin:0;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--border);
  position:relative;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.dropdown-header h2{ margin:0; display:inline; }

.arrow{
  font-size:1em;
  margin-left:10px;
  transition:transform .3s ease;
  display:inline-block;
  transform:rotate(0deg);
}
.dropdown-header .arrow.up{ transform:rotate(-180deg); }

.dropdown-content{
  display:none;
  margin-left:20px;
  margin-bottom:24px;
  padding:8px 0 0 0;
}
.dropdown-content.show{ display:block; }
.dropdown-content.hide{ display:none; }

.button-row{ margin:10px 0; }
.button-row button{ margin-right:10px; }

/* ===== Cards / profile ===== */
.profile-block{
  display:flex;
  align-items:center;
  gap:18px;
  margin:20px 0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2);
  box-shadow:0 2px 8px rgba(36,52,74,.06);
}
.profile-photo{
  width:200px; height:200px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--blue),var(--pink)) border-box;
}
.profile-text{ max-width:600px; }
.profile-text h2{ margin:0 0 10px 0; }
.profile-text p{ margin:0; color:#333; line-height:1.5; }

/* ===== Tables ===== */
table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:20px;
  font-size:1em;
  background:var(--surface);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
th,td{
  padding:12px 15px;
  text-align:left;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
th{
  background:linear-gradient(90deg, var(--table-header-bg), rgba(247,168,184,.18));
  color:var(--heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}
tr:nth-child(odd){ background:rgba(91,206,250,.04); }
tr:nth-child(even){ background:#fff; }
tr:hover{ background:var(--row-hover); }

/* ===== Photo grid ===== */
.photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
}
.photo-grid img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid var(--border);
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--blue),var(--pink)) border-box;
}

/* ===== HR ===== */
hr{
  border:0;
  height:6px;
  border-radius:6px;
  background:var(--stripe);
  opacity:.8;
  margin:28px 0;
}

/* ===== Responsive ===== */
@media (max-width:768px){
  .profile-block{ flex-direction:column; align-items:center; text-align:center; }
  .profile-photo{ width:120px; height:120px; }
}
@media (max-width:600px){
  .menu{ flex-direction:column; align-items:center; }
  .menu li{ margin:10px 0; }
  header h1{ font-size:1.7rem; }
  p{ font-size:1rem; }
  main{ padding:20px; }
  .photo-grid{ grid-template-columns:1fr; }
}