/*
 * Component: Pager (Pagination)
 */

.pager {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: center;
  width: 100%;
}

.pager__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
}

.pager__item {
  margin: 0;
}

.pager__link,
.pager__item--current {
  min-width: var(--touch-target-size);
  height: var(--touch-target-size);
  padding: 0 var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  transition: var(--transition-main);
  background-color: var(--bg-body);
}

/* Hover State */
.pager__link:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-idle);
}

/* Active State */
.pager__item--current {
  background-color: var(--color-secondary);
  color: var(--text-on-dark);
  border-color: var(--color-secondary);
  cursor: default;
}

/* Ellipsis (...) */
.pager__item--ellipsis {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 var(--space-sm);
  color: var(--text-main);
  font-weight: 700;
}
/*
 * Component: System Overrides (Tabs, Messages, etc.)
 */

/* =========================================================================
   ADMIN TOOLBAR FIX
   ========================================================================= */

/* Όταν υπάρχει η μπάρα διαχείρισης (toolbar), σπρώχνουμε το Header προς τα κάτω */
body.toolbar-fixed wsdt-header {
  top: var(--drupal-displace-offset-top, 0) !important;
  z-index: 499; /* Below Drupal Toolbar */
}

/* Αν το Header είναι sticky και όχι fixed, ίσως χρειαστεί και αυτό
   για να μην κολλάει πάνω στην μπάρα κατά το scroll */
body.toolbar-fixed .wsdt-header {
  top: var(--drupal-displace-offset-top, 0) !important;
}

/* =========================================================================
   COMPONENT: DRUPAL SYSTEM TABS (Local Tasks)
   ========================================================================= */

/* Κεντράρισμα και απόσταση της περιοχής των Tabs */
.wsdt-region--tabs {
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Καθαρισμός της λίστας (ul) */
.wsdt-block-local-tasks-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
}

/* Καθαρισμός των items (li) */
.wsdt-block-local-tasks-block li {
  margin: 0;
  list-style-type: none;
}

/* Στυλ Κουμπιού (Link) */
.wsdt-block-local-tasks-block a {
  padding: var(--space-sm) var(--space-md);

  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;

  color: var(--color-primary);
  background-color: var(--bg-gray-lighter);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);

  transition: var(--transition-main);
}

/* Hover State */
.wsdt-block-local-tasks-block a:hover {
  background-color: var(--bg-gray-medium);
  color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Active State */
.wsdt-block-local-tasks-block a.is-active {
  background-color: var(--color-secondary);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-card-idle);
  cursor: default;
}

/* Focus State */
.wsdt-block-local-tasks-block a:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* =========================================================================
   COMPONENT: USER LOGIN FORM
   ========================================================================= */
/*
 * Page Style: Services (Layout & Components)
 */

/* --- Layout: Content + Sidebar --- */
.wsdt-service-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .wsdt-service-layout {
    grid-template-columns: 1fr 300px; /* Main Content + 300px Sidebar */
    align-items: start;
  }
}

/* --- Component: Relative Services Navigation (Sidebar) --- */
.wsdt-relative-services {
  background-color: var(--bg-gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card-idle);
  position: sticky;
  top: 120px; /* Sticky sidebar effect */
  margin-bottom: var(--block-spacing);
}

.wsdt-relative-services h2,
.wsdt-relative-services h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-secondary);
  line-height: 1.3;
}

.wsdt-relative-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wsdt-relative-services li a {
  display: block;
  padding: 10px 0;
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--border-subtle);
}

.wsdt-relative-services li a:hover,
.wsdt-relative-services li a.is-active {
  color: var(--color-secondary);
  padding-left: 10px;
  font-weight: 600;
  border-left: 3px solid var(--color-secondary);
  background-color: var(--bg-card);
}

/* --- Component: Top Intro Fieldset (Service Intro) --- */
.top-intro-fieldset {
  margin-bottom: var(--block-spacing);
}

.top-intro-fieldset .fieldset-wrapper {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .top-intro-fieldset .fieldset-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.top-intro-fieldset blockquote {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.top-intro-fieldset blockquote h2,
.top-intro-fieldset blockquote h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

.top-intro-fieldset picture {
  display: block;
  height: 100%;
}

.top-intro-fieldset img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-idle);
}
/*
 * Page Style: News (Tags & Categories)
 */

.field--name-field-news-categories,
.field--name-field-news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  align-items: center;
}

/* Reset nested divs to not break layout */
.field--name-field-news-categories > div,
.field--name-field-news-tags > div {
  margin: 0;
}

/* Tag Styling */
.field--name-field-news-categories a,
.field--name-field-news-tags a {
  padding: 6px 16px;
  background-color: var(--bg-gray-lighter);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px; /* Pill style */
  transition: var(--transition-main);
  border: 1px solid var(--border-subtle);
  line-height: 1.2;
}

.field--name-field-news-categories a:hover,
.field--name-field-news-tags a:hover {
  background-color: var(--color-secondary);
  color: var(--text-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-color: var(--color-secondary);
}

/* Node Meta (Author/Date) */
.wsdt-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-main);
  margin-bottom: var(--space-md);
  opacity: 0.8;
}

.wsdt-author {
  font-weight: 700;
  color: var(--color-secondary);
}
/*
 * Page Style: Portfolio (Single Page Components)
 */

/* Services Reference Tags (Used in Portfolio to link back to services) */
.field--name-field-services-reference {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  align-items: center;
}

.field--name-field-services-reference > div {
  margin: 0;
}

.field--name-field-services-reference a {
  padding: 6px 16px;
  background-color: var(--bg-gray-lighter);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: var(--transition-main);
  border: 1px solid var(--border-subtle);
  line-height: 1.2;
}

.field--name-field-services-reference a:hover {
  background-color: var(--color-secondary);
  color: var(--text-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-color: var(--color-secondary);
}
/*
 * Page Style: Contact Page
 */

/* --- 1. Main Grid Layout --- */
.wsdt-page-contact .wsdt-contact-layout {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* --- 2. Left Column: Contact Info Card --- */
.wsdt-page-contact #block-websdt-theme-master-websdtfootercontact {
  background-color: var(--bg-card);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-idle);
  border-left: 5px solid var(--color-secondary);

  /* Flexbox for vertical centering */
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Title (Scoped) */
.wsdt-page-contact #block-websdt-theme-master-websdtfootercontact h2 {
  color: var(--color-secondary);
  margin-bottom: var(--space-lg);
  text-align: left;
}

.wsdt-page-contact #block-websdt-theme-master-websdtfootercontact h2::after {
  left: 0;
  transform: none;
  background-color: var(--color-secondary);
}

/* Contact Items Styling (Scoped) */
.wsdt-page-contact
  #block-websdt-theme-master-websdtfootercontact
  .wsdt-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 1.1rem;
}

.wsdt-page-contact
  #block-websdt-theme-master-websdtfootercontact
  .wsdt-contact-item:last-child {
  margin-bottom: 0;
}

.wsdt-page-contact
  #block-websdt-theme-master-websdtfootercontact
  .wsdt-contact-item
  a {
  color: var(--text-main);
  font-weight: 600;
  transition: var(--transition-main);
}

.wsdt-page-contact
  #block-websdt-theme-master-websdtfootercontact
  .wsdt-contact-item
  a:hover {
  color: var(--color-secondary);
}

.wsdt-page-contact #block-websdt-theme-master-websdtfootercontact strong {
  font-size: var(--font-size-h3);
  color: var(--color-secondary);
  display: block;
  margin-bottom: var(--space-md);
}

/* --- 3. Right Column: Contact Form --- */
.wsdt-page-contact #block-websdt-theme-master-periehomenokentrikisselidas {
  background-color: var(--bg-card);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-idle);
}

/* Form Buttons Styling (Scoped) */
.wsdt-page-contact #edit-actions input[type="submit"] {
  margin-right: var(--space-md);
}

.wsdt-page-contact #edit-preview {
  opacity: 0.8;
}

/* --- 4. Desktop Layout (Scoped) --- */
@media (min-width: 1024px) {
  .wsdt-page-contact .wsdt-contact-layout {
    grid-template-columns: 1fr 2fr;
    align-items: stretch;
  }
}

/* Mobile/Tablet Adjustments for Contact Page */
@media (max-width: 1023px) {
  .wsdt-page-contact .wsdt-contact-layout {
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .wsdt-page-contact #block-websdt-theme-master-websdtfootercontact,
  .wsdt-page-contact #block-websdt-theme-master-periehomenokentrikisselidas {
    padding: var(--space-md);
  }
}