/* =========================================
   signup3.css — ALBUM THEME (matches login3.css)
   + Logo left of title + Logo size controls (CSS vars)

   Breakpoints used (same pattern as login3.css):
   1) DESKTOP (TALL) MateView:
      @media (min-width:1701px) and (max-width:2200px) and (max-aspect-ratio:2/1)
   2) LAPTOP / COARSE LANDSCAPE:
      @media (min-width:1101px) and (max-width:1700px),
             (orientation:landscape) and (pointer:coarse) and (min-width:640px)
   3) iPad / iOS LANDSCAPE FALLBACK:
      @media (max-width:1100px) and (orientation:landscape)

   Notes:
   - Album texture on green panel
   - Enamel buttons with brass border + mint hover
   - Error box uses Option B (:has(*)) so it only appears when it contains content
   - Width tightened (~25% narrower) + height tightened via rhythm/padding
   ========================================= */


/* =========================
   RESET (Meyer)
   ========================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin:0; padding:0; border:0;
  font-size:100%; font:inherit; vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{ display:block; }
body{ line-height:1; }
ol, ul{ list-style:none; }
blockquote, q{ quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{ content:''; content:none; }
table{ border-collapse:collapse; border-spacing:0; }


/* =========================
   THEME VARS (match login3)
   + SIGNUP LOGO CONTROLS
   ========================= */
:root{
  --album-green-deep:#223B3B;
  --album-green:#2F4F4F;
  --album-green-mid:#385F5F;

  --paper:#FBFAF6;
  --paper-2:#F3F0E8;
  --ink:#1F2424;

  --brass:#D5C08A;
  --brass-2:#BCA66E;

  --mint:#BFE6D3;
  --mint-2:#8EC9AE;

  --enamel:#2B3434;

  --album-green-texture:
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px);

  --brass-border: 0.2vw solid rgba(213,192,138,0.65);
  --shadow: 0.6vh 0.6vh 0.45vh rgba(0,0,0,0.18);
  --shadow-strong: 0.85vh 0.85vh 0.6vh rgba(0,0,0,0.24);

  --pill-radius: 6vh;

  /* ===== Logo size controls (single source of truth) ===== */
  --su-logo-h: 6vh;         /* base desktop */
  --su-logo-h-mateview: 5.8vh;
  --su-logo-h-laptop: 7vh;
  --su-logo-h-ipad: 8vh;
}


/* =========================
   GLOBALS
   ========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--paper-2);
  color: var(--ink);
}
a{ text-decoration:none; color:inherit; }
a:visited{ color:inherit; }
img{ width:100%; height:100%; object-fit:contain; }


/* =========================================================
   BASE (foundation)
   ========================================================= */

/* wrapper */
.SU_wrapper{
  min-height:100vh;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding: 3vh 3vw;

  background-image: url(../../images/DISPLAY3/background-resized.jpg);
  background-size: cover;
  background-position: center;

  border: 0.2vw solid rgba(213,192,138,0.55);
}

/* form text defaults */
form{
  text-align:center;
  color:#F6F3E8;
  font-size: 1.15vw;
}

/* main panel (tightened width + height) */
.SU_box1{
  /* tightened (≈25% narrower than initial 56vw) */
  width: min(42vw, 92vw);

  display:flex;
  align-items:center;
  justify-content:center;

  /* height tighten */
  padding: 3vh 2.2vw;

  border: 0.25vw solid rgba(213,192,138,0.55);
  border-radius: 2vh;

  background:
    var(--album-green-texture),
    var(--album-green);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 1px;

  color:#F6F3E8;
  text-align:center;

  box-shadow: var(--shadow);
  margin-bottom: 1vh;
}

/* ensure inner form behaves */
.SU_box1 form{
  width:100%;
  max-width:100%;
}

/* =========================
   TITLE ROW (logo + title)
   ========================= */
.SU_signupTitleRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1vw;
  margin-bottom: 1.2vh;
}

/* logo sizing driven by vars */
.SU_logo{
  height: var(--su-logo-h);
  width:auto;
  display:block;
}

/* title + blurb */
.SU_signupTitle{
  font-size: 1.6vw;
  font-weight: 600;
  color: var(--brass);
  margin: 0; /* row handles spacing */
}
.SU_signupBlurb{
  color: var(--brass);
  line-height: 3vh;     /* tightened */
  font-size: 1.2vw;
  margin-bottom: 1.2vh;
}

/* rows (tightened rhythm) */
.SU_signupLine{
  padding: 0.6vh 0;     /* tightened */
  font-size: 1.15vw;
  line-height: 0.75;    /* tightened */
}

/* inputs / selects / textarea */
.signup_input,
input, select, textarea{
  font-family: inherit;
  font-size: 1.15vw;

  width: 20vw;
  padding: 0.9vh 1vw;

  border-radius: 1vh;
  border: 0.15vw solid rgba(213,192,138,0.55);

  background: var(--enamel);
  color:#F6F3E8;

  outline:none;
}
.signup_input::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(246,243,232,0.65);
}
.signup_input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: var(--mint-2);
  box-shadow: 0 0 0 0.25vh rgba(142,201,174,0.25);
}

/* submit button */
.SU_submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 1.1vh 2.6vw;

  font-size: 1.2vw;
  font-weight: 700;

  background-color: var(--enamel);
  color:#F6F3E8;

  border: var(--brass-border);
  border-radius: 3vh;

  box-shadow: var(--shadow);
  transition: all linear 80ms;

  /* slight height tighten without forcing fixed height */
  line-height: 1;
}
.SU_submit:hover{
  color: var(--mint);
  border-color: var(--mint-2);
  box-shadow: var(--shadow-strong);
}
.SU_submit:active{
  -webkit-transform: translateY(0.1vh);
  transform: translate(0.1vh, 0.1vh);
}

/* optional helper note */
.please_note{
  color: rgba(246,243,232,0.88);
  font-size: 0.95vw;
  line-height: 1.35em;
  margin-top: 1vh;
}

/* bottom pill containers */
.SU_return{
  width: min(42vw, 92vw);
  margin: 0 auto;
  text-align:center;
}

/* bottom “button” styling */
button.bum{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  padding: 1.4vh 2vw;

  font-size: 1.15vw;
  font-weight: 700;

  background-color: var(--enamel);
  color:#F6F3E8;

  border: var(--brass-border);
  border-radius: var(--pill-radius);

  box-shadow: var(--shadow);
  transition: all linear 80ms;
}
button.bum:hover{
  color: var(--mint);
  border-color: var(--mint-2);
  box-shadow: var(--shadow-strong);
}
button.bum:active{
  -webkit-transform: translateY(0.1vh);
  transform: translate(0.1vh, 0.1vh);
}

/* =========================================================
   SIGNUP ERROR BOX — Option B (only shows when it has content)
   ========================================================= */

/* base styling (kept even when hidden) */
.signup_error_messages{
  display:none !important;

  width: min(42vw, 92vw);
  margin: 1vh auto 0;
  padding: 1.2vh 2vw;

  border-radius: 2vh;

  font-weight: 700;
  font-size: 1.05vw;
  text-align: center;
}

/* show only when something is printed inside */
.signup_error_messages:has(*){
  display:flex !important;
  flex-direction:column;
  gap:0.6vh;

  /* warning palette (album-friendly) */
  background: #F8E7E4;
  color: #5A1F1F;
  border: 0.18vw solid #C46A5A;

  box-shadow:
    inset 0 0.15vh 0 rgba(255,255,255,0.6),
    0.4vh 0.4vh 0.5vh rgba(0,0,0,0.15);
}

/* if your PHP prints empty nodes, keep hidden */
.signup_error_messages:has(p:empty),
.signup_error_messages:has(li:empty){
  display:none !important;
}

/* =========================================================
   “double border” safety (if SU_return wraps bum)
   ========================================================= */
.SU_return:has(button.bum){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* ==========================================================
   DESKTOP (TALL)  (MateView)
   1701–2200px, aspect <= 2/1
   ========================================================== */
@media (min-width:1701px) and (max-width:2200px) and (max-aspect-ratio:2/1){

  :root{ --su-logo-h: var(--su-logo-h-mateview); }

  .SU_box1{ width: min(38vw, 92vw); padding: 2.4vh 2vw; }

  .SU_signupTitle{ font-size: 1.5vw; }
  .SU_signupBlurb{ font-size: 1.2vw; line-height: 2.6vh; }

  .SU_signupLine{ font-size: 1.15vw; line-height: 0.7; }

  .signup_input,
  input, select, textarea{
    font-size: 1.15vw;
    width: 19vw;
  }

  .SU_submit{ font-size: 1.05vw; }

  button.bum{ font-size: 1.0vw; }

  .signup_error_messages{ font-size: 1.05vw; }
  .SU_return,
  .signup_error_messages{ width: min(38vw, 92vw); }
}


/* ==========================================================
   LAPTOP ONLY (1101–1700px),
   OR landscape coarse pointer (iPad etc.)
   ========================================================== */
@media (min-width: 1101px) and (max-width: 1700px),
       (orientation:landscape) and (pointer:coarse) and (min-width:640px){

  :root{ --su-logo-h: var(--su-logo-h-laptop); }

  .SU_wrapper{ padding: 2.5vh 3vw; }

  .SU_box1{
    width: min(52vw, 94vw);
    padding: 2.6vh 2.4vw;
  }

  form{ font-size: 1.35vw; }

  .SU_signupTitle{ font-size: 1.8vw; }
  .SU_signupBlurb{
    font-size: 1.35vw;
    line-height: 2.8vh;
  }

  .SU_signupLine{
    font-size: 1.55vw;
    line-height: 0.72;
  }

  .signup_input,
  input, select, textarea{
    font-size: 1.55vw;
    width: 22vw;
    border-width: 0.22vh;
    padding: 1.0vh 1.4vw;
  }

  .SU_submit{
    font-size: 1.55vw;
    padding: 1.25vh 3.8vw;
    border-width: 0.22vh;
  }

  .SU_return,
  .signup_error_messages{
    width: min(52vw, 94vw);
  }

  button.bum{
    font-size: 1.25vw;
    padding: 1.6vh 2.6vw;
    border-width: 0.22vh;
    border-radius: 5vh;
  }

  .please_note{ font-size: 1.25vw; }

  .signup_error_messages{ font-size: 1.35vw; }
}


/* ==========================================================
   iOS/iPad fallback (IMPORTANT)
   ========================================================== */
@media (max-width:1100px) and (orientation:landscape){

  :root{ --su-logo-h: var(--su-logo-h-ipad); }

  .SU_wrapper{ padding: 2.2vh 3vw; }

  .SU_box1{
    width: 66vw;
    padding: 2.2vh 2.4vw;
    border-width: 0.28vh;
  }

  form{ font-size: 2vw; }

  .SU_signupTitle{ font-size: 2.2vw; }
  .SU_signupBlurb{
    font-size: 1.8vw;
    line-height: 3vh;
  }

  .SU_signupLine{
    font-size: 2.2vw;
    line-height: 0.8;
  }

  .signup_input,
  input, select, textarea{
    font-size: 2vw;
    width: 30vw;
    border-width: 0.24vh;
    padding: 1.05vh 1.6vw;
  }

  .SU_submit{
    font-size: 2vw;
    padding: 1.35vh 5vw;
    border-width: 0.24vh;
  }

  .SU_return,
  .signup_error_messages{
    width: 66vw;
  }

  button.bum{
    font-size: 2.0vw;
    padding: 1.7vh 3vw;
    border-width: 0.24vh;
    border-radius: 5vh;
  }

  .please_note{ font-size: 2.0vw; }

  .signup_error_messages{
    font-size: 2.0vw;
    border-width: 0.24vh;
  }
}