/* Oneiro Theme - Dream Interpretations */

:root {
  --dream-purple: #6b46c1;
  --dream-blue: #4299e1;
  --dream-indigo: #5a67d8;
  --dream-night: #2d3748;
  --dream-mist: #edf2f7;
  --dream-gold: #d69e2e;
  --shadow-soft: 0 10px 30px rgba(107, 70, 193, 0.1);
  --shadow-hover: 0 20px 40px rgba(107, 70, 193, 0.15);
}

/* Global Enhancements */
body {
  /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;*/
  /* background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); */
  background: none;
  background-attachment: fixed;
}

/* #page-wrapper {
  background: white;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
  margin: 20px auto;
  max-width: 95%;

} */


/* Node Content */
.node--type-oneira .field--name-field-oneiro-image img,
.node--type-user-dreams .field--name-field-oneiro-image img {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.node--type-oneira .field--name-field-oneiro-image img:hover,
.node--type-user-dreams .field--name-field-oneiro-image img:hover {
  transform: scale(1.01);
}

/* .node__title,
.page-title {
  background: linear-gradient(135deg, var(--dream-purple), var(--dream-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  margin-bottom: 1.5rem;
} */

/* Tags/Keywords */
.field--name-field-tags .field__item {
  display: inline-block;
  background: linear-gradient(135deg, var(--dream-purple), var(--dream-indigo));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  margin: 0.25rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(107, 70, 193, 0.2);
}

.field--name-field-tags .field__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(107, 70, 193, 0.3);
}

/* Comments */
.comment {
  background: var(--dream-mist);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--dream-purple);
  transition: all 0.3s ease;
}

.comment:hover {
  box-shadow: var(--shadow-soft);
  transform: translateX(1px);
}

/* Relevant Dreams Block */
.relevant-dreams-block {
  background: linear-gradient(135deg, rgba(107, 70, 193, 0.05) 0%, rgba(66, 153, 225, 0.05) 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  border: 2px solid rgba(107, 70, 193, 0.2);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.relevant-dreams-block .view,
.relevant-dreams-block .view-content {
  gap: 1rem;
}

.relevant-dreams-block:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--dream-purple);
}

.relevant-dreams-block h3 {
  color: var(--dream-purple);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(107, 70, 193, 0.2);
}

/* .relevant-dreams-block .views-row {
  margin: 0.75rem 0;
} */

.relevant-dreams-block a {
  color: var(--dream-indigo);
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.2s ease;
}

.relevant-dreams-block a:hover {
  background: rgba(107, 70, 193, 0.1);
  color: var(--dream-purple);
  transform: translateX(3px);
}

/* Buttons */
.button,
input[type="submit"],
.form-submit {
  background: linear-gradient(135deg, var(--dream-purple), var(--dream-indigo));
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(107, 70, 193, 0.3);
  cursor: pointer;
}

.button:hover,
input[type="submit"]:hover,
.form-submit:hover {
  /* transform: translateY(-1px); */
  box-shadow: 0 6px 10px rgba(107, 70, 193, 0.4);
}

/* Forms */
input[type="text"],
input[type="email"],
textarea,
select {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--dream-purple);
  box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
  outline: none;
}

/* Footer */
.site-footer {
  background: var(--dream-night);
  color: white;
  padding: 3rem 0;
  margin-top: 4rem;
}

.site-footer a {
  color: var(--dream-gold);
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: white;
}

/* Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  margin: 2rem 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
  padding: 1rem 0;
}

.breadcrumb a {
  color: var(--dream-purple);
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: var(--dream-indigo);
}

/* Sidebar */
.sidebar {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}

.sidebar .block {
  margin-bottom: 2rem;
}

.sidebar .block__title {
  color: var(--dream-purple);
  border-bottom: 3px solid var(--dream-purple);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.region--sidebar .block ul {
  margin: 0;
}

.region--sidebar .block li {
  padding: 0;
  position: relative;
  display: block;
  list-style: none;
  list-style-image: none;
}

.region--sidebar .block li a {
  display: block;
  position: relative;
  padding: 10px 0;
  transition: all .2s ease;
  min-height: 48px;
}

.region--sidebar .block li a:hover {
  text-decoration: underline;
  color: #000;
  box-shadow: inset 0 -7em 0 0 #d9ecfa;
  text-decoration-color: #d9ecfa;
}

@media (min-width:62.5rem) {
  .region--sidebar .block li a {
    min-height: 36px;
  }
}

/* Glossary Summary - Display letters inline */
.view-glossary .attachment .view-content {
  display: block;
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  margin-bottom: 40px;
  line-height: 1.8;
}

.view-glossary .views-view-summary-unformatted span {
  display: inline-block;
  margin: 8px 4px;
  vertical-align: middle;
}

.view-glossary .views-view-summary-unformatted span a {
  display: inline-block;
  padding: 12px 16px;
  font-size: 22px;
  font-weight: 700;
  color: #4299e1;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 8px;
  background: white;
  border: 2px solid #e9ecef;
  min-width: 50px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.view-glossary .views-view-summary-unformatted span a:hover {
  background: #4299e1;
  color: white;
  border-color: #4299e1;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(66, 153, 225, 0.4);
}

.view-glossary .views-view-summary-unformatted span a:active,
.view-glossary .views-view-summary-unformatted span a[aria-current="page"] {
  background: #6b46c1;
  color: white;
  border-color: #6b46c1;
  transform: translateY(0);
}

.view-glossary .view-header {
  text-align: center;
  margin-bottom: 25px;
  font-size: 16px;
  font-style: italic;
  color: #6c757d;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  #page-wrapper {
    margin: 0;
    border-radius: 0;
  }

  .node--view-mode-teaser,
  .views-row {
    border-radius: 8px;
  }

  /* Fix avatar overlap on mobile */
  .comment .user-picture,
  .comment__meta .user-picture,
  .field--name-user-picture,
  .comment .user-picture img,
  .add-comment__picture,
  .comment__picture {
    position: static !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    inset-inline-start: auto !important;
  }

  .comment__meta,
  .comment .submitted {
    clear: both !important;
    display: block !important;
    margin-top: 0.5rem !important;
    padding-left: 0 !important;
  }
}

/* Performance Optimizations - Prevent CLS */

/* Override Olivero Lora fonts to add font-display: swap */
@font-face {
  font-family: Lora;
  src:
    local("Lora Regular"),
    local("Lora-Regular"),
    url("/core/themes/olivero/fonts/lora/lora-v14-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src:
    local("Lora Italic"),
    local("Lora-Italic"),
    url("/core/themes/olivero/fonts/lora/lora-v14-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src:
    local("Lora Bold"),
    local("Lora-Bold"),
    url("/core/themes/olivero/fonts/lora/lora-v14-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Reserve space for YouTube video to prevent CLS */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  margin: 2rem 0;
  background: #000;
  border-radius: 12px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Reserve space for relevant dreams block to prevent CLS */
.relevant-dreams-block {
  min-height: 300px;
}

/* Ensure images don't cause layout shift */
.field--name-field-oneiro-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Prevent CLS from comments section */
.comment-wrapper,
#block-oneiro-theme-2 {
  min-height: 400px;
}

.comment {
  contain: layout;
}

/* Prevent CLS from sidebar */
.region--sidebar {
  min-height: 600px;
}

/* Force GPU acceleration for smoother rendering */
.site-branding__logo img,
.field--name-field-oneiro-image img {
  transform: translateZ(0);
  will-change: auto;
}

/* Prevent font loading CLS */
body {
  font-display: swap;
}

/* ============================================
   Hero Search Block Styling
   ============================================ */

/* Hero region container */
.region--hero {
  background: linear-gradient(135deg, #c2b8e0 0%, #ddd6f3 100%);
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Search block in hero */
#block-oneiro-theme-searchform,
.region--hero .block-search,
.region--hero .search-block-form {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Form wrapper - needs to be relative for absolute positioning */
.region--hero .search-form,
.region--hero .search-block-form,
.region--hero form,
#block-oneiro-theme-searchform form {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

/* Search form wrapper - contains input and button */
.region--hero .search-form-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

/* Ensure form-item is also relative */
.region--hero .form-item,
.region--hero .form-item-keys,
.region--hero .js-form-item-keys {
  margin: 0;
  position: static;
  display: block;
}

/* Search input field */
.region--hero input[type="search"],
.region--hero input.form-search,
.region--hero .form-element--type-search {
  width: 100%;
  padding: 1.2rem 4.5rem 1.2rem 1.5rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 50px;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  color: #2d3748;
  display: block;
}

.region--hero input[type="search"]:focus,
.region--hero input.form-search:focus,
.region--hero .form-element--type-search:focus {
  outline: none;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.region--hero input[type="search"]::placeholder,
.region--hero input.form-search::placeholder,
.region--hero .form-element--type-search::placeholder {
  color: #a0aec0;
  font-weight: 400;
}

/* Position form-actions to overlay the input inside wrapper */
.region--hero .search-form-wrapper .form-actions,
.region--hero .form-actions {
  position: absolute !important;
  right: 0.5rem !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  z-index: 10;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Search button - styled as icon inside input */
.region--hero .search-form__submit,
.region--hero .form-actions .form-submit,
.region--hero .button--primary,
.region--hero button[type="submit"],
.region--hero input[type="submit"] {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.5rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
  color: #718096 !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  width: 2.8rem !important;
  height: 2.8rem !important;
  min-width: 2.8rem !important;
  min-height: 2.8rem !important;
  border-radius: 50% !important;
  display: inline-block !important;
  overflow: visible !important;
  margin: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Better tap target for mobile */
  -webkit-tap-highlight-color: rgba(107, 70, 193, 0.2);
  /* Ensure it's clickable */
  pointer-events: auto !important;
  /* SVG search icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10' cy='10' r='6' stroke='%23718096' stroke-width='2'/%3E%3Cline x1='14.5' y1='14.5' x2='20' y2='20' stroke='%23718096' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 20px 20px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Hide Olivero's icon spans */
.region--hero .search-form__submit .icon--search,
.region--hero .search-form__submit .visually-hidden,
.region--hero button[type="submit"] span {
  display: none !important;
}

.region--hero .search-form__submit:hover,
.region--hero .form-actions .form-submit:hover,
.region--hero .button--primary:hover,
.region--hero button[type="submit"]:hover,
.region--hero input[type="submit"]:hover {
  background-color: rgba(107, 70, 193, 0.1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10' cy='10' r='6' stroke='%236b46c1' stroke-width='2'/%3E%3Cline x1='14.5' y1='14.5' x2='20' y2='20' stroke='%236b46c1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 20px 20px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--dream-purple) !important;
  box-shadow: none !important;
  transform: scale(1.1) !important;
}

.region--hero .search-form__submit::before,
.region--hero .form-actions .form-submit::before,
.region--hero .button--primary::before,
.region--hero button[type="submit"]::before,
.region--hero input[type="submit"]::before { 
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hide label */
.region--hero .form-item-keys label,
.region--hero .form-item__label,
.region--hero label[for*="edit-keys"] {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  overflow: hidden !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .region--hero {
    padding: 3rem 1rem;
  }

  .region--hero input[type="search"],
  .region--hero input.form-search,
  .region--hero .form-element--type-search {
    padding: 1rem 3.5rem 1rem 1.25rem;
    font-size: 1rem;
  }
  
  .region--hero .form-actions {
    right: 0.25rem !important;
  }
}