/* Glecom look for mitt/my.glecom.se and support.glecom.se, on top of
   Bootstrap 4: the font, colours and shapes of www.glecom.se, so customers
   recognise the company. Same base as the wifi-password portal.
   Raleway is under the SIL Open Font License (fonts/OFL.txt), subset to Latin.

   The base (font, colours, headings, links, buttons, boxes) applies to every
   page that loads this file. The page layout (grey background, narrow column,
   logo, cards) only applies under <body class="glecom">, so internal pages
   with wide tables keep their layout. */

@font-face {
  font-family: 'Raleway';
  font-weight: 400;
  font-display: swap;
  src: url("fonts/raleway-regular.3cbe90d4a370.woff2") format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-weight: 600;
  font-display: swap;
  src: url("fonts/raleway-semibold.1f2c60e52fee.woff2") format('woff2');
}

:root {
  --glecom-navy: #172554;
  --glecom-blue: #6b9bd2;
  --glecom-yellow: #fcdc58;
  --glecom-text: #1f2937;
  --glecom-border: #e5e7eb;
}

/* --- Base --- */

body {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--glecom-text);
}

h1,
h2,
h3 {
  color: var(--glecom-navy);
  font-weight: 600;
}

a {
  color: var(--glecom-navy);
  text-decoration: underline;
}

a:hover,
a:focus {
  color: var(--glecom-blue);
}

.alert {
  border-radius: 0.75rem;
}

.alert p:last-child {
  margin-bottom: 0;
}

/* Info boxes in the site's light blue tint; warnings and errors keep
   Bootstrap's colours so trouble still stands out. */
.alert-info {
  color: var(--glecom-navy);
  background: rgba(107, 155, 210, 0.12);
  border-color: rgba(107, 155, 210, 0.35);
}

.form-control {
  border-radius: 0.5rem;
}

.form-control:focus {
  border-color: var(--glecom-blue);
  box-shadow: 0 0 0 0.2rem rgba(107, 155, 210, 0.35);
}

/* Navy pill with white text: the shape of the site's buttons, with enough
   contrast to read (white on the light blue would not be). */
.btn-primary {
  background: var(--glecom-navy);
  border-color: var(--glecom-navy);
  border-radius: 9999px;
  padding: 0.6rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: #1e3a8a;
  border-color: var(--glecom-blue);
  box-shadow: 0 0 0 0.2rem rgba(107, 155, 210, 0.35);
}

.glecom-card {
  background: #fff;
  border: 1px solid var(--glecom-border);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(23, 37, 84, 0.06);
  padding: 1.5rem;
}

/* --- Customer page layout: <body class="glecom"> --- */

body.glecom {
  background: #f9fafb;
}

body.glecom > .container {
  max-width: 760px;
  padding-bottom: 2rem;
}

.glecom-logo {
  text-align: center;
  margin: 0.5rem 0 1.5rem;
}

.glecom-logo img {
  max-width: 160px;
  height: auto;
}

/* Short yellow bar under the page heading, as the accent on www.glecom.se. */
body.glecom h1::after {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: var(--glecom-yellow);
}

body.glecom h1 {
  font-size: 2rem;
}

body.glecom h2 {
  font-size: 1.4rem;
}

/* Contact cards side by side on wide screens, stacked on phones. The side
   margins undo Bootstrap's negative row margins, so the cards line up with the
   text above instead of touching the screen edge. */
body.glecom .glecom-contact {
  margin: 0 15px 1rem;
}

@media (min-width: 576px) {
  body.glecom .glecom-contact + .glecom-contact {
    margin-left: 0;
  }
}

/* The FAQ block and its accordion. */
body.glecom .accordion .card {
  border-color: var(--glecom-border);
}

body.glecom .accordion .btn-link {
  color: var(--glecom-navy);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}