/* ===== Design tokens ===== */
:root{
  --bg:#fff; --fg:#0b0d12; --muted:#6b7280; --border:#e5e7eb; --ring:#3b82f6;

/* ===== Sizes you can tune ===== */
  --page-gutter: clamp(14px, 4vw, 28px);

  --photo-w: clamp(300px, 90vw, 1050px);
  --photo-h: clamp(240px, 50vh, 600px);

  --icon-d: clamp(44px, 6.2vw, 56px); /* socials circle size */
  --pn: #333348;  /* PN pill color */
  --pn-hover: #1e298a;  /* PN pill hover color */
  
  --pq: #333348;  /* PQ pill color */
  --pq-hover: #5f8a80;  /* PQ pill hover color */

  --deputat-max-w: clamp(320px, 66vw, 720px); /* deputat graphic width cap */

  --shadow:#333348; /* shadow color for cards and buttons */
}

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

html,body { min-height:100%; }

body {
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,sans-serif;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

html { -ms-overflow-style:none; scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }

/* ===== a11y helper ===== */
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow: hidden; clip:rect(0 0 0 0); white-space: nowrap; border:0; }

/* ===== Layout ===== */
.wrapper {
  display: block;
  padding-block: 6vh;
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  padding-bottom: 3vh;
}

.card {
  width: min(100%,1050px);
  margin: 0 auto;
  text-align: center;

  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 2vh, 18px);
}

/* ===== Hero ===== */
.hero { margin: 0; position: relative; }
.hero .bg {
  width: var(--photo-w); 
  height: var(--photo-h); 
  max-width: 100%;
  display: block; 
  margin-inline: auto;
  border-radius: 28px; 
  border: 1px solid var(--border); 
  box-shadow: 0 12px 25px var(--shadow);
  object-fit: cover; 
  object-position: center;
}

/* ===== Deputat għall-1 Distrett Logo ===== */
.deputat-row {
  width: 100%;
  display: grid; 
  place-items: center;
  margin-bottom: 18px;
}

.deputat-row img {
  width: min(100%, var(--deputat-max-w));
  height: auto; 
  display: block;
}

/* ===== Base pill ===== */
.socials a.pill { inline-size:calc(var(--icon-d)*4); block-size:var(--icon-d);
  border-radius:999px; padding-inline:clamp(6px,1vw,12px);
  position:relative; overflow:hidden;
}

/* Base pill colors */
.socials a.pill--pn { color: var(--pn); }
.socials a.pill--pq { color: var(--pq); }

/* Hover/focus color changes */
.socials a.pill--pn:hover,
.socials a.pill--pn:focus-visible { color: var(--pn-hover); }

.socials a.pill--pq:hover,
.socials a.pill--pq:focus-visible { color: var(--pq-hover); }

/* Hide the inline <img> for masked variants */
.socials a.pill img { opacity:0; width:0; height:0; pointer-events:none; }

/* ===== PN logo ===== */
.socials a.pill--pn::before{
  content:""; position:absolute; inset:0; margin:auto;
  width: calc(var(--icon-d)*3.4); height: calc(var(--icon-d)*3.4);
  background: currentColor;
  -webkit-mask: url("assets/pn_logo.png") no-repeat center / contain;
          mask: url("assets/pn_logo.png") no-repeat center / contain;
}

/* ===== Parliament PQ logo ===== */
.socials a.pill--pq::before{
  content:""; position:absolute; inset:0; margin:auto;
  width: calc(var(--icon-d)*2.3); height: calc(var(--icon-d)*3.0);
  background: currentColor;
  -webkit-mask: url("assets/parliament_pq_logo.png") no-repeat center / contain;
          mask: url("assets/parliament_pq_logo.png") no-repeat center / contain;
}

/* ===== Socials ===== */
.socials {
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: clamp(4px,1.8vw,14px); /* space between icons */
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.socials a {
  inline-size: var(--icon-d); 
  block-size: var(--icon-d);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius:999px; border:1px solid var(--border);
  color: #111827; text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
  background: color-mix(in oklab, var(--bg), var(--fg) 2%);
  box-shadow: 0 6px 18px var(--shadow);
}

.socials svg { width: 85%; height: 70%; display: block; }
.socials svg * { fill: currentColor; }
.socials svg [stroke]{ stroke: currentColor; }

.socials a:hover { transform:translateY(-2px); box-shadow:0 10px 26px -6px #333348; }
.socials a:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }

/* Brand tints */
.socials a.facebook { color: #1877F2; }
.socials a.instagram { color: #E4405F; }
.socials a.x { color: #000; }

/* Hover shades */
.socials a.facebook:hover { color: #0f5bd8; }
.socials a.instagram:hover { color: #cc3652; }
.socials a.x:hover { color: #111; }

/* Hover chip tint */
.socials a:hover {
  background: color-mix(in oklab, var(--bg), currentColor 10%);
  border-color: color-mix(in oklab, currentColor, var(--border) 70%);
}
.socials a:visited{ color: currentColor; }

/* ===== Info card ===== */
.info-card {
  width: 100%; text-align: center;
  padding: clamp(10px,1.6vw,20px);
  background: color-mix(in oklab, var(--bg), var(--fg) 0%);
  display: grid; align-content: start; gap: .6em;
}

.info-card h3 { margin:0; font-size:clamp(14px,2.4vw,18px); line-height:1.25; }

/* ===== Small copyright line under the info-card ===== */
.copyright{
  margin-top: clamp(6px, .8vh, 12px);
  text-align: center;
  font-size: clamp(11px, 1.2vw, 12px);
  color: #333348;
  opacity: .9;
}
.copyright a{ color: inherit; text-decoration: none; }
.copyright a:hover{ text-decoration: underline; }


/* ===== Very tall desktops: optional top-aligned fit ===== */
@media (min-width: 1200px) and (min-height: 1000px) {
  .wrapper{
    min-height: 100dvh; display: grid; justify-items: center; align-content: start;
    row-gap: clamp(4px,.8vh,10px);
    padding-top: calc(4vh + env(safe-area-inset-top));
    padding-bottom: calc(2vh + env(safe-area-inset-bottom));
  }
}

/* ===== Tablet adjustments ===== */
@media (max-width: 1024px) {
  :root{ --photo-h: clamp(220px,46vh,520px); }
}

/* ===== Phones ===== */
@media (max-width: 760px) {
  .wrapper{ padding-top: calc(4vh + env(safe-area-inset-top));
            padding-bottom: calc(2vh + env(safe-area-inset-bottom)); }

  /* deputat is already centered & fluid from base rules */
  .socials { row-gap:10px; justify-content:center; }

  .info-card { margin-top: clamp(14px,2.2vh,20px); }

  :root {
    --photo-w: 92vw;
    --photo-h: clamp(200px,38vh,460px);
    --icon-d: clamp(44px,12vw,56px);
  }
}

/* ===== Motion-friendly ===== */
@media (prefers-reduced-motion:reduce){
  .socials a{ transition: none; }
  .socials a:hover{ transform: none; }
}

/* ===== No scrolling on large screens; allow scroll on smaller screens ===== */
@media (min-width:1200px) and (min-height:980px){
  html, body { overflow-y: hidden; }
  .wrapper { min-height: 100dvh; }
}