/*
 * Global South Connections - wp-login.php branding (v1.6.72).
 *
 * Mirrors the theme tokens in style.css: brand orange #FF6600 family, ink
 * #333, line #E1E1E1, Verdana stack, flat 3px cards, 4px notice accents and
 * gradient primary buttons. Covers every wp-login.php state: sign-in form,
 * logged-out / check-email messages, lost password, registration, error
 * notices, the language switcher, the privacy link and the mobile layout.
 *
 * Selectors are scoped with body.login #login ... so they always win over
 * the core login stylesheets (#loginform .input etc.) regardless of the
 * WordPress version in use.
 *
 * v1.6.149: the footer note becomes two standalone rows (trust note row +
 * copyright row), info notices (lost-password instructions) read centered,
 * and a set Site Icon takes the globe's place in the wordmark - the globe
 * tile is hidden via the gsc-login-has-icon body class when the icon is
 * injected and stays as the fallback otherwise.
 *
 * v1.6.150: the core "← Go to <site name>" back link (#backtoblog) is
 * removed from every login screen, and the Remember Me row gets the SAME
 * symmetric spacing above and below it on every screen (16px / 16px on
 * desktop and mobile alike).
 *
 * v1.6.151: every login screen is vertically centered - the whole group
 * (wordmark, card, links, trust note, copyright) sits between two flex
 * spacers that split the leftover viewport space equally, so the space
 * below the last row always equals the space above the wordmark. The old
 * top-anchored paddings (7% of the width on desktop, 32px on phones, zero
 * at the bottom) are retired: short desktop windows no longer run the
 * copyright row into the bottom edge, and phones get the same breathing
 * room above and below. A guaranteed 28px body padding at both edges keeps
 * the group off the screen edge even when the content is taller than the
 * viewport (the spacers collapse to zero instead of hiding the wordmark).
 *
 * v1.6.152: the Site Icon (and the globe fallback tile) sit in a CIRCULAR
 * frame (50% radius) instead of the 14px rounded square, and the guaranteed
 * edge padding grows 28px -> 48px so on short laptop windows the scrolled
 * page keeps an unmistakable gap between the copyright row and the bottom
 * edge; a max-height compaction tightens the group's vertical rhythm on
 * short screens so the content fits without scrolling more often.
 */

/* 1. Page + warm brand background (front-page cream with orange/amber glows)
      + the theme's box-sizing reset (core sets it piecemeal; the login cards
      and inputs need the same border-box math the theme uses site-wide) */
body.login,
body.login *,
body.login *::before,
body.login *::after{box-sizing:border-box}
body.login{
  font-family:Verdana,Geneva,'DejaVu Sans',Arial,sans-serif;
  color:#333;
  background-color:#FFF7F0;
  background-image:
    radial-gradient(560px 420px at 12% -6%, rgba(255,102,0,.16), transparent 62%),
    radial-gradient(640px 460px at 96% 6%, rgba(255,179,0,.18), transparent 60%),
    radial-gradient(760px 540px at 50% 110%, rgba(255,102,0,.12), transparent 64%);
  background-attachment:fixed;
}
body.login a{color:#036;text-decoration:none}
body.login a:hover{color:orangered}
/* the a11y "Log In" heading stays out of view even if core CSS ever changes */
body.login .screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute!important;word-wrap:normal!important}

/* 2. Page column - v1.6.151: the page is a full-height flex column and the
      login group is centered between two empty spacers. The spacers split
      the leftover space EQUALLY above and below the group (unlike
      justify-content:center they collapse to zero on short viewports, so
      nothing is ever pushed out of reach) and the body padding keeps the
      same guaranteed breathing room at BOTH edges - v1.6.152 raises it
      28px -> 48px so short laptop windows keep a clear gap under the
      copyright row even at full scroll. This replaces the old top-anchored
      7% / 32px paddings that left the bottom edge at zero on desktop and
      wildly unequal gaps on phones. */
body.login{
  display:flex;
  flex-direction:column;
  margin:0;
  min-height:100vh;
  min-height:100svh;
  padding:48px 0;
}
body.login::before,
body.login::after{
  content:"";
  display:block;
  flex:1 0 0;
}
body.login #login{width:420px;padding:0;margin:0 auto}

/* 3. Brand wordmark (the .wp-login-logo anchor; its text is the site name
      from login_headertext, the globe mark + tagline are drawn around it) */
body.login #login h1.wp-login-logo{
  margin:0 auto 20px;padding:0;
}
body.login #login h1.wp-login-logo a{
  background:none;
  width:auto;height:auto;
  text-indent:0;overflow:visible;
  display:flex;flex-direction:column;align-items:center;
  margin:0;padding:0;
  font-family:Verdana,Geneva,'DejaVu Sans',Arial,sans-serif;
  font-weight:800;font-size:1.12rem;letter-spacing:.02em;
  color:#333;text-transform:uppercase;text-align:center;
}
body.login #login h1.wp-login-logo a::before{
  content:"";
  width:52px;height:52px;margin-bottom:10px;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/svg%3E"),linear-gradient(135deg,#FF6600 0%,#FF7A1F 100%);
  background-size:26px 26px,100% 100%;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  box-shadow:0 4px 14px rgba(255,102,0,.25);
}
body.login #login h1.wp-login-logo a::after{
  /* v1.6.73: the sitewide tagline is "Connecting Minds". */
  content:"Connecting Minds";
  display:block;margin-top:6px;
  font-size:.66rem;font-weight:600;letter-spacing:.22em;
  color:#FFB300;text-transform:uppercase;
}
/* v1.6.149: when the Site Icon is set it takes the globe's place - same
   circular 52px tile footprint (v1.6.152: 50% radius - the icon sits in a
   round frame, not the old rounded square), then the site name below; the
   globe tile is hidden only when the icon img is actually present
   (body class). */
body.login.gsc-login-has-icon #login h1.wp-login-logo a::before{content:none}
body.login #login h1.wp-login-logo a .gsc-login-site-icon{
  display:block;width:52px;height:52px;
  margin:0 auto 10px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 4px 14px rgba(255,102,0,.25);
}

/* 4. Card - flat brand card with the orange top accent like the side titles */
body.login #login form{
  background:#fff;
  border:1px solid #E1E1E1;
  border-top:3px solid #FF6600;
  border-radius:3px;
  box-shadow:0 18px 44px rgba(194,78,0,.10);
  margin-top:20px;
  padding:28px 30px 30px;
  overflow:visible;
}
body.login #login form p{margin:0 0 16px}
body.login #login form p.submit{margin-bottom:0}
body.login #login label{
  display:block;margin:0 0 6px;
  font-weight:700;font-size:13px;line-height:1.4;color:#333;
}

/* 5. Inputs */
body.login #login form .input,
body.login #login form input[type="text"],
body.login #login form input[type="password"],
body.login #login form input[type="email"],
body.login #login form input[type="search"]{
  border:1px solid #E1E1E1;border-radius:3px;
  background:#fff;color:#333;
  font-family:Verdana,Geneva,'DejaVu Sans',Arial,sans-serif;
  font-size:15px;line-height:1.4;
  padding:11px 12px;margin:0;width:100%;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.login #login form .input:focus,
body.login #login form input[type="text"]:focus,
body.login #login form input[type="password"]:focus,
body.login #login form input[type="email"]:focus{
  border-color:#FF8B3E;
  box-shadow:0 0 0 3px rgba(255,102,0,.15);
  outline:none;
}
/* password visibility toggle + keep room for it inside the field */
body.login #login .wp-pwd{position:relative;margin-top:0}
body.login #login .wp-pwd .input{padding-right:42px}
body.login #login .wp-pwd .button.wp-hide-pw{
  background:transparent;border:0;color:#666;
  box-shadow:none;
}
body.login #login .wp-pwd .button.wp-hide-pw:hover,
body.login #login .wp-pwd .button.wp-hide-pw:focus{
  background:transparent;border:0;color:#FF6600;
  box-shadow:none;
}
/* remember me row (label + help tooltip)
   v1.6.150: the row carries the SAME margin above and below (16px / 16px),
   identical on desktop and mobile - the old 0-top / 18-bottom spacing sat
   flush against the password field and is retired. */
body.login #login input[type="checkbox"]{accent-color:#FF6600}
body.login #login .forgetmenot{display:flex;align-items:center;gap:4px;min-height:0;float:none;margin:16px 0;padding:0}
body.login #login .forgetmenot label{
  display:inline;margin:0;font-weight:400;font-size:13px;color:#666;
}
body.login #login .forgetmenot .wp-tooltip__toggle{
  background:transparent;border:0;box-shadow:none;color:#FFB300;
}
/* registration / lost-password helper rows */
body.login #login .user-pass-wrap label{display:block;margin:0 0 6px}

/* 6. Primary button - the theme's gradient gsc-btn */
body.login.wp-core-ui #login #wp-submit{
  background:linear-gradient(135deg,#FF6600 0%,#FF7A1F 100%);
  border:0;border-radius:12px;
  color:#fff;text-shadow:none;
  font-family:Verdana,Geneva,'DejaVu Sans',Arial,sans-serif;
  font-weight:700;font-size:.95rem;line-height:1;letter-spacing:.01em;
  height:auto;padding:14px 18px;width:100%;
  box-shadow:0 4px 14px rgba(255,102,0,.25);
  cursor:pointer;
  transition:all .18s ease;
  float:none;
  text-decoration:none;
}
body.login.wp-core-ui #login #wp-submit:hover,
body.login.wp-core-ui #login #wp-submit:focus{
  background:linear-gradient(135deg,#E85C00 0%,#FF6600 100%);
  border:0;color:#fff;
  box-shadow:0 8px 22px rgba(255,102,0,.32);
  transform:translateY(-1px);
}
body.login #login .submit{clear:both}
body.login #login form p.submit{margin:0;padding:0;clear:both}

/* 7. Row links under the card (Register / Lost password / Log in)
      v1.6.150: the core "← Go to <site name>" back link (#backtoblog) is
      removed per request - it is display:none on every screen, and the
      row spacing below the card now belongs to #nav alone. */
body.login #login #nav{font-size:13px;text-align:center;margin:14px 0 0;padding:0 24px}
body.login #login #backtoblog{display:none}
body.login #login #nav a{color:#036;font-weight:500}
body.login #login #nav a:hover{color:orangered}

/* 8. Notices - the theme's gsc-notice palette (success / info / error) */
body.login #login .notice.message,
body.login #login #login_error{
  background:#EAF3FC;
  border:1px solid #BFD9F0;
  border-left:4px solid #1F6FB2;
  color:#175A8E;
  border-radius:3px;
  box-shadow:0 2px 6px rgba(51,51,51,.07);
  margin:0 0 16px;
  padding:14px 16px;
  font-weight:500;font-size:13px;text-align:left;
  position:relative;
}
body.login #login .notice.message p{margin:0}
body.login #login .notice.message.updated{
  background:#E7F5EF;border-color:#CDE8DC;border-left-color:#009966;color:#07553B;
}
body.login #login #login_error{
  background:#FDEDEB;border-color:#F5C6C0;border-left-color:#E53517;color:#8E2B20;
}
body.login #login .notice.message a,
body.login #login #login_error a{color:inherit;text-decoration:underline}
/* v1.6.149: info notices (the lost-password instructions, check-email
   confirmations) read centered - errors stay left-aligned. Core emits the
   message both ways across versions (.notice.message wrappers and the
   classic <p class="message">), so both shapes are covered. */
body.login #login .notice.message,
body.login #login p.message{text-align:center}

/* 9. Language switcher (shown only when more than one language is installed) */
body.login #login .language-switcher{color:#666;margin-top:20px}
body.login #login .language-switcher label{
  font-weight:400;font-size:12.5px;color:#666;display:inline;margin-right:6px;
}
body.login #login .language-switcher select{
  border:1px solid #E1E1E1;border-radius:3px;background:#fff;color:#333;
  font-family:Verdana,Geneva,'DejaVu Sans',Arial,sans-serif;
  font-size:13px;padding:6px 8px;
  box-shadow:none;
}

/* 10. Privacy policy link */
body.login #login .privacy-policy-page-link{
  font-size:12.5px;text-align:center;margin:12px 0 0;
}
body.login #login .privacy-policy-page-link a{color:#666}
body.login #login .privacy-policy-page-link a:hover{color:#FF6600}

/* 11. Footer trust note + copyright (echoed after #login by
       inc/login-branding.php). v1.6.149: two standalone rows - the trust
       note on its own row and the "© <year> <site>. All Rights Reserved"
       line on its own row beneath it. */
body.login .gsc-login-note{
  text-align:center;
  font-size:12.5px;line-height:1.6;
  color:#666;
  margin:20px 0 0;padding:0;
}
body.login .gsc-login-copyright{
  text-align:center;
  font-size:12px;line-height:1.6;
  color:#666;
  margin:6px 0 0;padding:0;
}

/* 12. Small screens - v1.6.151: only the horizontal 18px edge padding stays
      on the column; the vertical position is handled by the symmetric
      centering (guaranteed edge gaps + equal spacers), so the space below
      the copyright row matches the space above the wordmark. */
@media (max-width:480px){
  body.login #login{width:100%;padding:0 18px}
  body.login #login form{padding:22px 18px 24px}
  body.login #login h1.wp-login-logo a{font-size:1rem}
  body.login #login h1.wp-login-logo a::before{width:46px;height:46px}
  body.login #login h1.wp-login-logo a .gsc-login-site-icon{width:46px;height:46px}
}

/* 13. Short screens (v1.6.152) - laptops with little vertical space: keep
       the same symmetric centering but tighten the group's vertical rhythm
       so the whole thing fits without scrolling more often; the 48px edge
       padding still guarantees a clear gap at BOTH ends when it does
       scroll. Widths are untouched - this only reduces vertical spacing. */
@media (max-height:760px){
  body.login #login h1.wp-login-logo{margin-bottom:12px}
  body.login #login h1.wp-login-logo a::before,
  body.login #login h1.wp-login-logo a .gsc-login-site-icon{width:44px;height:44px;margin-bottom:8px}
  body.login #login form{margin-top:14px;padding:20px 26px 24px}
  body.login #login form p{margin-bottom:12px}
  body.login #login .forgetmenot{margin:12px 0}
  body.login #login #nav{margin-top:10px}
  body.login .gsc-login-note{margin-top:12px}
  body.login .gsc-login-copyright{margin-top:4px}
}