/**
 * Selfrag Base
 * Typography reset and base element styles.
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Ubuntu:wght@300;400;500&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sf-font-body);
  font-weight: var(--sf-font-weight-light);
  color: var(--sf-text);
  line-height: 1.7;
  font-size: 20px;
  background: var(--sf-bg);
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font-heading);
  font-weight: var(--sf-font-weight-light);
  color: var(--sf-heading);
  line-height: 1.3;
}

h1 strong, h2 strong, h3 strong, h4 strong {
  font-weight: var(--sf-font-weight-medium);
}

a {
  color: var(--sf-red);
  text-decoration: none;
  transition: color var(--sf-transition-fast);
}

a:hover {
  color: var(--sf-red-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin-bottom: 1em;
}

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

/* Skip Olivero's heavy default styling for body content */
.layout-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Baseline form styling for unstyled forms (Drupal admin: /user/login,
   /admin/*, etc.). Custom-styled forms (.sf-enquiry-form, .sf-footer__newsletter,
   .sf-enquiry-form input...) override this with their own scope. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  font: inherit;
  color: var(--sf-text);
  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  padding: 10px 14px;
  line-height: 1.4;
  max-width: 100%;
}

input[type="submit"],
button[type="submit"],
.button {
  font: inherit;
  font-weight: 500;
  background: var(--sf-red);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background var(--sf-transition-fast);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover { background: var(--sf-red-dark); }

label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--sf-text);
}

.form-item { margin-bottom: 16px; }

/* Centered container for "bare" Drupal pages (login, admin, user account).
   Body gets .sf-page-bare class via selfrag_preprocess_html. */
.sf-page-bare .sf-main #block-selfrag-content {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 96px 24px 96px !important;
}

.sf-page-bare label {
  display: block !important;
  visibility: visible !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
  color: var(--sf-text) !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  clip: auto !important;
}

.sf-page-bare .form-item,
.sf-page-bare .js-form-item {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  height: auto !important;
  width: 100% !important;
  margin-bottom: 18px !important;
  overflow: visible !important;
  opacity: 1 !important;
}

.sf-page-bare input[type="text"],
.sf-page-bare input[type="email"],
.sf-page-bare input[type="password"],
.sf-page-bare textarea,
.sf-page-bare select {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  background: #fff !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font: inherit !important;
  color: var(--sf-text) !important;
  opacity: 1 !important;
  clip: auto !important;
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--sf-transition-slow), transform var(--sf-transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@keyframes sf-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}