/**
 * base.css — FacultyPage Theme
 * CSS Custom Properties, resets, and base typography.
 * Drupal 10 compatible.
 */

/* ── DESIGN TOKENS ── */
:root {
  /* Colour palette */
  --fp-white:        #ffffff;
  --fp-off-white:    #fafaf8;
  --fp-paper:        #f4f1ec;
  --fp-terra:        #c4633a;
  --fp-terra-light:  #e8845e;
  --fp-terra-pale:   #fdeee7;
  --fp-terra-pale-1: #f0e0d6;
  --fp-terra-dark:   #8b3d1f;
  --fp-charcoal:     #1c1c1e;
  --fp-mid:          #000000;
  --fp-light:        #3d3d41;
  --fp-border:       #e8e4df;
  --fp-border-strong:#d4cfc8;
  --fp-sand:         #d4c8b8;
  --fp-green:        #2d7a4f;
  --fp-green-pale:   #e8f5ee;
  --fp-blue:         #2d5fa0;
  --fp-blue-pale:    #e8eef8;
  --fp-yellow:       #f5a623;

  /* Layout */
  --fp-sidebar-w:    240px;
  --fp-topnav-h:     60px;
  --fp-content-max:  1140px;

  /* Radius */
  --fp-radius-sm:    6px;
  --fp-radius:       8px;
  --fp-radius-md:    10px;
  --fp-radius-lg:    12px;
  --fp-radius-pill:  100px;

  /* Shadows */
  --fp-shadow-sm:    0 1px 4px rgba(28,28,30,0.07);
  --fp-shadow:       0 2px 12px rgba(28,28,30,0.09);
  --fp-shadow-lg:    0 8px 32px rgba(28,28,30,0.12);

  /* Transitions */
  --fp-transition:   0.18s ease;

  /* Z-indices */
  --fp-z-sidebar:    100;
  --fp-z-topnav:     200;
  --fp-z-overlay:    300;
  --fp-z-modal:      400;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ── BASE ── */
body {
  background: var(--fp-off-white);
  color: var(--fp-charcoal);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  color: var(--fp-terra);
  text-decoration: none;
}
p {
  padding: 5px 0;
}
ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fp-charcoal);
}
#block-facultypage-page-title h1 {
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  line-height: 1;
  padding: 0;
  margin: 0;
}
/* Drupal skip-link */
.visually-hidden,
.visually-hidden-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  
}

.skip-link:focus,
.visually-hidden-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  background: var(--fp-terra);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--fp-radius) var(--fp-radius);
  font-size: 0.85rem;
  font-weight: 600;
  z-index: var(--fp-z-modal);
  transition: top var(--fp-transition);
}
.skip-link:focus {
  top: 0;
}

/* Drupal messages */
.messages {
  padding: 1rem 1.25rem;
  border-radius: var(--fp-radius);
  margin: 0 0 1rem 0;
  border: 1.5px solid transparent;
}
.messages--status {
  background: var(--fp-green-pale);
  border-color: var(--fp-green);
  color: var(--fp-green);
}
.messages--warning {
  background: #fff8e6;
  border-color: #d4a017;
  color: #7a5c00;
}
.messages--error {
  background: var(--fp-terra-pale);
  border-color: var(--fp-terra);
  color: var(--fp-terra-dark);
}

/* Pager */
.pager {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 0;
}
.pager__item a,
.pager__item--current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--fp-radius);
  border: 1.5px solid var(--fp-border);
  font-size: 0.82rem;
  color: var(--fp-mid);
  transition: all var(--fp-transition);
}
.pager__item a:hover {
  background: var(--fp-terra-pale);
  border-color: var(--fp-terra);
  color: var(--fp-terra-dark);
}
.pager__item--current {
  background: var(--fp-terra);
  border-color: var(--fp-terra);
  color: white;
}
.path--user-register #block-facultypage-page-title,
.path--user-register #block-facultypage-local-tasks,
.path--user-login #block-facultypage-local-tasks,
.path--where-professionals-network #block-facultypage-local-tasks,
.path--where-professionals-network #block-facultypage-page-title,
#edit-timezone .profile-btn-edit, #edit-pubmed-search-widget .profile-btn-edit{
  display: none;
}
div.js-filter-wrapper,
div.js-text-full,
div.description {display: none;}

#edit-group-profile-url div.js-filter-wrapper,
#edit-group-profile-url div.js-text-full,
#edit-group-profile-url div.description,
#edit-path-wrapper  div.js-filter-wrapper,
#edit-path-wrapper  div.js-text-full, 
#edit-path-wrapper  div.description{display: block;}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
table thead tr {
  border-bottom: 1px solid #f0ece4;
  transition: background .15s;
}
table tbody tr:hover {
  background:#fdf8f5;
  transition: background var(--fp-transition);
}

table tbody td {
  padding: .7rem 1.1rem;
  color: var(--fp-charcoal);
  vertical-align: middle;
}
section.comments-wrapper {
  margin-top: 20px;
}

#edit-account,
details[data-drupal-selector],
.fp-details-body #edit-account,
.fp-details-body #edit-pass,
section.comments-wrapper,
.fp-sidebar-right,
.path--user-register #edit-account--2,
.layout__region.layout__region--content,
form:not(.user-register-form user-form),
.fieldset-wrapper{
  display: grid;
  row-gap: 20px;
}