/*
Theme Name: Samljóð
Theme URI: https://www.solvi.fo
Author: Sølvi Reinert Hansen
Author URI: https://www.solvi.fo
Description: Splash-síða fyri samljod.fo – vísir báðar útgávurnar av Samljóð: Hornorkestur og Kór.
Version: 1.4.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: samljod-splash
*/

:root{
  --ink:#1a1d23;
  --muted:#5d6673;
  --line:#e6e8ee;
  --surface:#ffffff;
  --bg:#f4f5f8;
  --band:#b45309;
  --band-deep:#8a4106;
  --band-tint:#faf1e2;
  --choir:#4f46e5;
  --choir-deep:#3730a3;
  --choir-tint:#eef1fe;
  --shadow-soft:rgba(16,24,40,.08);
  --shadow-faint:rgba(16,24,40,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.6rem;
  padding:2rem 1.2rem;
  background:
    radial-gradient(680px 420px at 12% -6%, var(--band-tint), transparent 65%),
    radial-gradient(680px 420px at 88% 106%, var(--choir-tint), transparent 65%),
    var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}

.samljod-brand h1{
  margin:.3rem 0 0;
  font-size:clamp(3rem,9vw,4.8rem);
  font-weight:850;
  letter-spacing:-.03em;
  line-height:1;
}
.samljod-brand .samljod-kicker{
  margin:0;
  color:var(--muted);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.samljod-brand p.samljod-tagline{
  max-width:34rem;
  margin:1rem auto 0;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.5;
}

.samljod-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
  width:min(760px,100%);
}
.samljod-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  padding:2.2rem 1.6rem 1.9rem;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  box-shadow:0 1px 2px var(--shadow-faint),0 16px 40px -24px var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.samljod-card:hover,.samljod-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 2px 4px var(--shadow-faint),0 26px 54px -26px var(--shadow-soft);
}
.samljod-card:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.samljod-card--band:hover{border-color:var(--band)}
.samljod-card--choir:hover{border-color:var(--choir)}

.samljod-icon{
  display:grid;
  place-items:center;
  width:96px;
  height:96px;
  border-radius:26px;
}
.samljod-card--band .samljod-icon{background:linear-gradient(135deg,#e08812,#96470a)}
.samljod-card--choir .samljod-icon{background:linear-gradient(135deg,#6366f1,#3730a3)}
.samljod-icon svg{width:62px;height:62px;display:block}

.samljod-card h2{margin:0;font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.samljod-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.45}
.samljod-card .samljod-go{
  margin-top:.3rem;
  font-size:.82rem;
  font-weight:800;
}
.samljod-card--band .samljod-go{color:var(--band)}
.samljod-card--choir .samljod-go{color:var(--choir)}

.samljod-footer{color:var(--muted);font-size:.78rem}
.samljod-footer a{color:inherit}
.samljod-contact{
  margin:0 0 .6rem;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
}
.samljod-contact a{color:var(--choir);font-weight:800;text-decoration:none}
.samljod-contact a:hover,.samljod-contact a:focus-visible{text-decoration:underline}

@media(max-width:640px){
  body{gap:1.9rem}
  .samljod-cards{grid-template-columns:1fr}
  .samljod-card{flex-direction:row;text-align:left;padding:1.3rem 1.4rem;gap:1.2rem}
  .samljod-icon{width:72px;height:72px;border-radius:20px;flex:0 0 auto}
  .samljod-icon svg{width:46px;height:46px}
  .samljod-card div{display:flex;flex-direction:column;gap:.3rem}
}

/* ------------------------------------------------------------------ gate
   One door into the network: sign in here, land in your own ensemble.     */

.samljod-gate{width:min(560px,calc(100% - 2.5rem));margin:0 auto 2.6rem;padding:1.9rem 1.9rem 1.6rem;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 12px 34px var(--shadow-faint);text-align:left}
.samljod-gate-title,.samljod-gate-lead,.samljod-gate-hello,.samljod-gate-lost,.samljod-gate-out{text-align:center}
.samljod-gate-title{margin:0;font-size:1.32rem;letter-spacing:-.01em}
.samljod-gate-lead,.samljod-gate-hello{margin:.5rem 0 0;color:var(--muted);font-size:.94rem;line-height:1.5}
.samljod-gate-hello strong{color:var(--ink)}
.samljod-gate-error{margin:1rem 0 0;padding:.6rem .8rem;border-radius:10px;background:#fdeceb;color:#96271d;font-size:.88rem;font-weight:600}

.samljod-login{display:grid;gap:.32rem;margin-top:1.25rem}
.samljod-login label{color:var(--ink);font-size:.82rem;font-weight:700}
.samljod-login input[type=text],.samljod-login input[type=password]{width:100%;margin-bottom:.55rem;padding:.72rem .85rem;border:1px solid #c9d1dc;border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:1rem}
.samljod-login input[type=text]:focus,.samljod-login input[type=password]:focus{border-color:var(--ink);outline:2px solid rgba(26,29,35,.14);outline-offset:1px}
.samljod-remember{display:flex;gap:.45rem;align-items:center;margin:.1rem 0 .9rem;color:var(--muted);font-size:.85rem;font-weight:400}
.samljod-login button{padding:.8rem 1rem;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:.98rem;font-weight:800;cursor:pointer}
.samljod-login button:hover{background:#000}
.samljod-gate-lost,.samljod-gate-out{margin:.9rem 0 0;font-size:.86rem}
.samljod-gate-lost a,.samljod-gate-out a{color:var(--muted)}
.samljod-gate-empty{margin:1rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}

/* the member's own ensembles — same marks as the demo cards */
.samljod-gate-pick{margin:1.3rem 0 .1rem;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.samljod-mine{display:grid;gap:.7rem;margin-top:1.1rem}
.samljod-mine-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.85rem .95rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.samljod-mine-card:hover{transform:translateY(-1px);box-shadow:0 10px 26px var(--shadow-soft)}
.samljod-mine--band:hover{border-color:var(--band)}
.samljod-mine--choir:hover{border-color:var(--choir)}
.samljod-mine-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px}
.samljod-mine--band .samljod-mine-icon{background:linear-gradient(135deg,var(--band),var(--band-deep))}
.samljod-mine--choir .samljod-mine-icon{background:linear-gradient(135deg,var(--choir),var(--choir-deep))}
.samljod-mine-icon svg{width:30px;height:30px}
.samljod-mine-name{min-width:0;overflow:hidden;font-size:1.02rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.samljod-mine-card .samljod-go{font-size:.82rem;font-weight:800;white-space:nowrap}
.samljod-mine--band .samljod-go{color:var(--band)}
.samljod-mine--choir .samljod-go{color:var(--choir)}
.samljod-gate-tip{margin:1rem 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}

/* --------------------------------------------------------------- demos */

.samljod-demo{width:min(940px,calc(100% - 2.5rem));margin:0 auto}
.samljod-demo-title{margin:0 0 1.2rem;font-size:1.05rem;letter-spacing:-.01em;text-align:center}
.samljod-chip{display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;background:#eceef2;color:var(--muted);font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:.16em}

@media (max-width:560px){
  .samljod-gate{padding:1.5rem 1.3rem 1.3rem}
  .samljod-mine-card{grid-template-columns:40px minmax(0,1fr);row-gap:.35rem}
  .samljod-mine-card .samljod-go{grid-column:2}
  .samljod-mine-icon{width:40px;height:40px}
}

/* ------------------------------------------------------- hvat er Samljóð
   The flyer, on the page: same cards, same icons, same tinted panel — but
   fluid instead of fixed to an A4 canvas.                                  */

.samljod-about{width:min(760px,calc(100% - 2.5rem));margin:0 auto;text-align:left}
.samljod-about:not([open]){text-align:center}
.samljod-about>summary{display:inline-flex;gap:.5rem;align-items:center;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.92rem;font-weight:800;list-style:none;cursor:pointer}
.samljod-about>summary::-webkit-details-marker{display:none}
.samljod-about>summary::after{content:"▾";font-size:.8em;color:var(--muted)}
.samljod-about[open]>summary::after{content:"▴"}
.samljod-about>summary:hover{border-color:var(--ink)}

.samljod-about-body{margin-top:1.4rem;padding:1.8rem 1.8rem 1.6rem;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 12px 34px var(--shadow-faint)}
.samljod-about-lead{margin:0;font-size:1rem;line-height:1.6}

/* feature cards — the flyer's grid */
.samljod-about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.6rem}
.samljod-feature{position:relative;padding:1rem 1.05rem 1rem 3.4rem;border:1px solid var(--line);border-radius:14px;background:#fbfcfd}
.samljod-feature>svg{position:absolute;top:1.05rem;left:1.05rem;width:1.6rem;height:1.6rem;color:var(--band)}
.samljod-feature h3{margin:0;font-size:.94rem;font-weight:800;line-height:1.2}
.samljod-feature p{margin:.3rem 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}

/* "Hví Samljóð?" — the flyer's tinted panel */
.samljod-about-why{margin-top:1.5rem;padding:1.3rem 1.4rem 1.4rem;border-radius:16px;background:var(--bg)}
.samljod-about-why>h3{margin:0;font-size:1rem;font-weight:800}
.samljod-about-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem;margin-top:1rem}
.samljod-about-why-grid>div{position:relative;padding-left:1.15rem}
.samljod-about-why-grid>div::before{content:"";position:absolute;top:.42rem;left:0;width:.45rem;height:.45rem;border-radius:50%;background:var(--band)}
.samljod-about-why-grid>div:nth-child(even)::before{background:var(--choir)}
.samljod-about-why-grid strong{display:block;font-size:.9rem;font-weight:800;line-height:1.2}
.samljod-about-why-grid span{display:block;margin-top:.2rem;color:var(--muted);font-size:.84rem;line-height:1.45}

/* the demo cards were centred as a flex child of body; wrapping them in a
   wider section left them hanging to one side */
.samljod-demo{width:min(760px,calc(100% - 2.5rem))}
.samljod-cards{margin-inline:auto}

/* With the panel open the page is taller than the viewport, and a centred flex
   column overflows BOTH ends — the brand header ends up above the scroll
   origin. Safe centring falls back to start alignment exactly when that would
   otherwise happen. */
body{justify-content:safe center}

@media (max-width:640px){
  .samljod-about-grid,.samljod-about-why-grid{grid-template-columns:1fr}
  .samljod-about-body{padding:1.3rem 1.2rem}
  .samljod-feature{padding-left:3.1rem}
}

/* The demo cards are now just a mark and a name — the old padding was sized
   for a paragraph that is no longer there. */
.samljod-card{padding:1.7rem 1.4rem;gap:.95rem}
.samljod-card>div h3{margin:0}
@media (max-width:640px){.samljod-card{padding:1.1rem 1.2rem}}

/* language toggle, top of the page */
.samljod-lang{position:absolute;top:1.1rem;right:1.2rem;display:flex;gap:.25rem;padding:.22rem;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.samljod-lang a{display:inline-flex;gap:.34rem;align-items:center;padding:.3rem .68rem;border-radius:999px;color:var(--muted);font-size:.76rem;font-weight:700;text-decoration:none}
.samljod-lang a:hover{color:var(--ink)}
.samljod-lang a.is-active{background:var(--ink);color:#fff}
@media (max-width:640px){
  .samljod-lang{position:static;align-self:center;margin-bottom:-.9rem}
  .samljod-lang a span{font-size:1rem}
  .samljod-lang a{padding:.3rem .5rem;font-size:0}
  .samljod-lang a span{font-size:1.05rem}
}