/* GBS brand for short.gbs.edu (Kutt v3).
   Loaded after Kutt's styles.css via custom_styles, so it only overrides.
   Type + buttons follow gbs.edu (Poppins; gold #FDBA1C buttons, bold, 3px corners).
   Layout follows Google's sign-in: white surfaces, #dadce0 hairlines, a centered card. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/images/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/images/fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/images/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/images/fonts/poppins-700.woff2) format('woff2'); }

:root {
  --gbs-navy: #164074;
  --gbs-ink: #0a1837;          /* gbs.edu body text */
  --gbs-gold: #fdba1c;
  --gbs-gold-dark: #eaa70a;
  --g-border: #dadce0;         /* Google hairline */
  --g-muted: #5f6368;          /* Google secondary text */
  --g-surface: #f8f9fa;

  --bg-color: var(--g-surface);
  --text-color: var(--gbs-ink);
  --color-primary: var(--gbs-navy);
  --outline-color: var(--gbs-gold);
  --focus-outline-color: rgba(22, 64, 116, 0.35);
  --input-label-color: var(--gbs-ink);
  --secondary-text-color: var(--g-muted);
  --underline-color: rgba(22, 64, 116, 0.35);
  --checkbox-bg-color: var(--gbs-navy);
  --send-icon-hover-color: var(--gbs-navy);
  --input-shadow-color: transparent;
  --input-hover-shadow-color: rgba(32, 33, 36, 0.18);
  --table-bg-color: #fff;
  --table-shadow-color: transparent;

  --button-bg: #fff;
  --button-bg-box-shadow-color: transparent;
  --button-bg-primary: var(--gbs-gold);
  --button-bg-primary-box-shadow-color: transparent;
  --button-bg-secondary: #fff;
  --button-bg-secondary-box-shadow-color: transparent;
}

body,
input,
button,
a.button,
select,
textarea {
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
}
body { background-color: var(--bg-color); color: var(--gbs-ink); }

/* ---------- Header: white bar, hairline, gold rule on top ---------- */
.main-wrapper { border-top: 4px solid var(--gbs-gold); box-sizing: border-box; }
header {
  width: 100%;
  max-width: none;
  background: #fff;
  border-bottom: 1px solid var(--g-border);
  height: 72px;
  padding: 0 max(24px, calc((100% - 1232px) / 2 + 32px));
}
header a.logo { color: var(--gbs-navy); font-weight: 600; font-size: 20px; }
header .logo img { width: 40px; height: 40px; margin-right: 12px; }
header .logo .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
header .logo .logo-sub { font-size: 12px; font-weight: 500; color: var(--g-muted); margin-top: 2px; }
header nav a.nav { color: var(--g-muted); font-size: 14px; }
header nav a.button, header nav button { height: 38px; }

/* ---------- Buttons: gbs.edu style ---------- */
a.button,
button {
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: none;
  color: var(--gbs-navy);
  border: 1px solid var(--g-border);
}
a.button svg.with-text,
a.button span svg,
button svg.with-text,
button span svg { stroke: currentColor; }

a.button.primary,
button.primary {
  background: var(--gbs-gold);
  border-color: var(--gbs-gold);
  color: #000;
  font-weight: 700;
  letter-spacing: 1px;
}
a.button.primary:hover, button.primary:hover,
a.button.primary:focus, button.primary:focus {
  background: var(--gbs-gold-dark);
  border-color: var(--gbs-gold-dark);
  box-shadow: none;
  transform: none;
}
a.button.secondary, button.secondary { background: #fff; color: var(--gbs-navy); }
a.button.secondary:hover, button.secondary:hover,
a.button.secondary:focus, button.secondary:focus {
  background: #f1f5fb;
  border-color: var(--gbs-navy);
  box-shadow: none;
  transform: none;
}
button.danger { color: #fff; border-color: transparent; }
button.action { border: none; border-radius: 50%; }

/* ---------- Links ---------- */
a, button.link { color: var(--gbs-navy); }
a:hover, button.link:hover { color: var(--gbs-navy); border-bottom-color: var(--gbs-gold); }

/* ---------- Inputs: Google outlined fields ---------- */
input[type="text"],
input[type="email"],
input[type="password"] {
  border: 1px solid var(--g-border);
  border-radius: 4px;
  box-shadow: none;
  letter-spacing: normal;
  color: var(--gbs-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--gbs-navy);
  box-shadow: 0 0 0 1px var(--gbs-navy);
}
input::placeholder { letter-spacing: normal; color: #80868b; }

/* The shortener box reads like the Google search bar */
#shortener-form input#target {
  border-radius: 28px;
  border: 1px solid #dfe1e5;
  padding-left: 28px;
}
#shortener-form input#target:hover { box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); border-color: transparent; }
#shortener-form input#target:focus { box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); border-color: transparent; }

/* Homepage headline: gbs.edu weight + short gold rule */
#shorturl h1 { font-weight: 600; color: var(--gbs-navy); }
#shorturl h1::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--gbs-gold);
}
#shorturl h1.link::after { display: none; }

/* ---------- Sign-in card (Google layout) ---------- */
.gbs-card {
  width: 450px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  margin: 56px 0 24px;
  padding: 40px 40px 32px;
  background: #fff;
  border: 1px solid var(--g-border);
  border-radius: 8px;
}
.gbs-card-head { text-align: center; margin-bottom: 28px; }
.gbs-card-head img { width: 56px; height: 56px; }
.gbs-card-head h1 { margin: 12px 0 6px; font-size: 24px; font-weight: 500; color: var(--gbs-ink); }
.gbs-card-head p { margin: 0; font-size: 15px; color: var(--g-muted); }
.gbs-card form#login-signup { width: 100%; padding: 0; margin: 0; }
.gbs-card form#login-signup label { margin-bottom: 1.25rem; font-size: 14px; font-weight: 500; }
.gbs-card form#login-signup input { height: 52px; padding: 0 16px; margin-top: 0.5rem; font-size: 16px; }
.gbs-card form#login-signup .buttons-wrapper { margin: 0.5rem 0 1rem; }
.gbs-card form#login-signup .buttons-wrapper button,
.gbs-card form#login-signup .buttons-wrapper a.button { height: 44px; }
.gbs-card form#login-signup a.forgot-password { font-size: 14px; }

/* "Sign in with Google": Google's button, with the G mark */
form#login-signup a.button[href="/login/oidc"] {
  height: 44px;
  background: #fff;
  border: 1px solid #747775;
  border-radius: 4px;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.25px;
}
form#login-signup a.button[href="/login/oidc"]:hover { background: #f8f9fa; border-color: #747775; }
form#login-signup a.button[href="/login/oidc"] > span:first-child { display: none; }
form#login-signup a.button[href="/login/oidc"]::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Tables / panels: flat, hairline ---------- */
table { border: 1px solid var(--g-border); border-radius: 8px; }

/* ---------- Footer ---------- */
footer p { color: var(--g-muted); }
footer .gbs-footer-name { color: var(--gbs-ink); font-weight: 600; }

@media only screen and (max-width: 640px) {
  header { padding: 0 16px; height: 64px; }
  header a.logo { font-size: 17px; }
  header .logo img { width: 34px; height: 34px; }
  .gbs-card { border: none; background: transparent; padding: 8px 8px 24px; margin-top: 24px; }
}

/* Already on the sign-in page: the header "Sign in" button is redundant */
.main-wrapper:has(.gbs-card) header nav a[href="/login"] { display: none; }