/* -----------------------------------------------------------
   Nepal Hypnosis Theme - Core Branded Styles (Logo-based)
----------------------------------------------------------- */

/* 1. Defined Brand Color Palette and Variables */
:root {
  /* Primary Blue Variant (from logo mountain/eye) */
  --color-nhc-blue: #0675AE;

  /* Secondary Red/Terracotta Variant (from logo outline) */
  --color-nhc-red: #B74F3B; 

  /* Clean white base and soft backgrounds */
  --color-nhc-white: #ffffff;
  --color-nhc-soft-bg: #f8fcfc;

  /* Global Design Variables */
  --soft-border-radius: 18px;
  --main-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
  --font-body: 'Open Sans', sans-serif; /* Clean humanist sans */
  --font-heading: 'Fraunces', serif; /* approachable rounded serif */
}

/* 2. Global Styling Overrides for Olivero */
body {
  font-family: var(--font-body);
  color: #333;
  background-color: var(--color-nhc-white);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-nhc-blue);
  font-weight: 600;
}

a {
  color: var(--color-nhc-blue);
}

/* 3. Hero Section Styling (Concept 1: Image on Right) */
/* This prepares the region for a 50/50 Layout Builder grid. */
.region--hero {
  background: linear-gradient(135deg, var(--color-nhc-soft-bg) 0%, var(--color-nhc-white) 100%);
  padding: 6rem 0;
}

/* Hero Text Color (left side) */
.hero-text h1, .hero-text p {
  color: #333 !important;
}

/* Target the image placed in the hero (right side) to ensure clean fit */
.region--hero img {
  border-radius: var(--soft-border-radius);
  box-shadow: var(--main-shadow);
  max-width: 100%;
  height: auto;
}

/* 4. Action Button Styling (Concept 1: Warm Red/Orange) */
.button, a.btn-booking, .form-submit {
  background-color: var(--color-nhc-red) !important;
  color: var(--color-nhc-white) !important;
  border-radius: 50px !important;
  padding: 14px 40px !important;
  font-weight: bold;
  text-transform: none;
  border: none;
  box-shadow: 0 4px 6px rgba(183, 79, 59, 0.2);
}

/* 5. Service Card Grid Styling (Concept 1) */
.views-view-grid .views-row {
  background-color: var(--color-nhc-white);
  border-radius: var(--soft-border-radius) !important;
  box-shadow: var(--main-shadow);
  padding: 2.5rem;
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.views-view-grid .views-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px -5px rgba(0,0,0,0.1);
}

/* Center text in cards */
.card--service .views-field-field-image,
.card--service .views-field-title,
.card--service .views-field-body {
  text-align: center;
}

/* =========================================================
   Service Card & Icon Centering (Fits the Concept Layout)
========================================================= */

/* A. Target the Grid Item (The whole "card") */
.views-view-responsive-grid__item {
  background: #ffffff; /* pure white */
  border-radius: 18px; /* soft corners */
  padding: 30px; /* plenty of negative space */
  text-align: center; /* centers title and text */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* very soft shadow */
  margin-bottom: 20px; /* spacing between cards */
  display: flex; /* activates modern alignment */
  flex-direction: column; /* stacks icon, title, text vertically */
  align-items: center; /* horizontally centers all elements */
}

/* B. Target the Image/Icon within the card */
.views-view-responsive-grid__item .views-field-field-image,
.views-view-responsive-grid__item img {
  margin: 0 auto 20px auto !important; /* centers horizontally and adds space below */
  display: block !important;
  max-width: 100px; /* ensures the icon doesn't become too large */
  height: auto !important;
}

/* C. Styling for the Service Title */
.views-view-responsive-grid__item .views-field-title a {
  color: var(--color-nhc-blue) !important; /* uses the teal/blue from logo */
  font-weight: 700;
  text-decoration: none;
  font-size: 1.25rem;
  margin-bottom: 15px;
  display: block;
}