/*
 * WordPress-specific styles.
 * main.css, responsive.css, and the page *-fixes.css files stay identical to the HTML.
 */

/* Header logo. The HTML paints this shape with background #7f2d1f through a mask.
   The WordPress logo is an image, and its SVG has no fill, so it renders black. */
.site-header .site-logo {
  position: relative;
}
.site-header .site-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #7f2d1f;
  -webkit-mask: url("../images/logo-terracotta.svg") left center / contain no-repeat;
  mask: url("../images/logo-terracotta.svg") left center / contain no-repeat;
  pointer-events: none;
}
.site-header .site-logo .site-logo-mark {
  background: none;
  -webkit-mask: none;
  mask: none;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
}

/* Destination "What To Do" icons. The HTML SVGs use stroke #7f2d1f at width 1.3. */
.things-to-do .tourism-card-icon {
  color: #7f2d1f;
}
.things-to-do .tourism-card-icon svg {
  stroke: #7f2d1f;
  stroke-width: 1.3;
}

/* Editable background images. */
body::before {
  background-image: var(--ust-paper-texture, url("../images/paper-texture.webp"));
}

.is-dark--kerala::before {
  background-image: var(--ust-kerala-map, url("../images/kerala-bg-map.webp"));
}

.contact-map {
  background-image: var(--ust-contact-map, url("../images/kerala-bg-map.webp"));
}

.location .contact-map {
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid oklch(87% 0.022 62deg);
  background: none;
}

.contact-info .info-card p a {
  color: inherit;
}

.contact-info .info-card p a:hover {
  color: #7f2d1f;
}

.get-in-touch .info-card.is-email:hover {
  background: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 18px 38px oklch(31% 0.09 32deg / 0.28);
}

.get-in-touch .info-card.is-email p a {
  color: inherit;
}

.site-footer .footer-col p a {
  display: inline;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.site-footer .footer-col p a:hover {
  color: #ffe4d2;
}

.contact-map iframe,
.contact-map .contact-map-embed,
.contact-map .ust-office-map {
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-map .ust-office-map {
  z-index: 1;
  background: oklch(92% 0.014 62deg);
  font-family: Manrope, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
}

.contact-map .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: Manrope, sans-serif;
  background: oklch(92% 0.014 62deg);
}

.contact-map .leaflet-popup-content-wrapper {
  border-radius: 10px;
}

.contact-map .leaflet-popup-content {
  margin: 12px 16px;
}

.welcome .welcome-content .welcome-text p {
  color: oklch(53% 0.032 46deg);
  max-width: 60ch;
  margin: 0 0 1em;
}

.welcome .welcome-content .welcome-text p:last-child {
  margin-bottom: 30px;
}

.welcome .welcome-content .story-text {
  margin-top: 1em;
}

.welcome .welcome-content .story-text p {
  color: oklch(53% 0.032 46deg);
  max-width: 60ch;
  margin: 0 0 1em;
}

.welcome .welcome-content .story-text p:last-child {
  margin-bottom: 30px;
}

.tourism-teaser .tourism-teaser-intro .tourism-text p {
  margin: 0 0 1em;
}

.tourism-teaser .tourism-teaser-intro .tourism-text p:last-child {
  margin-bottom: 0;
}

.kerala-tourism .title-container .kerala-text p {
  margin: 10px 0 1em;
}

.kerala-tourism .title-container .kerala-text p:last-child {
  margin-bottom: 0;
}

.travel-services-teaser .travel-services-teaser-intro .services-text p {
  margin: 0 0 1em;
}

.travel-services-teaser .travel-services-teaser-intro .services-text p:last-child {
  margin-bottom: 0;
}

.testimonials .testimonials-intro .testimonials-text {
  margin-top: 12px;
}

.testimonials .testimonials-intro .testimonials-text p {
  margin: 0 0 1em;
  color: oklch(53% 0.032 46deg);
}

.testimonials .testimonials-intro .testimonials-text p:last-child {
  margin-bottom: 0;
}

.contact-map .ust-office-map-label {
  margin: 0;
  color: #3d2914;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
}

.page-content {
  padding: clamp(48px, 8vw, 96px) 0;
}

.page-content h1 {
  margin-bottom: 1rem;
}

/* Contact Form 7. */
.wpcf7-response-output {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
}

.wpcf7-not-valid-tip {
  font-size: 0.75rem;
}

.enquiry-form .wpcf7-form .form-grid {
  margin-top: 2.5rem;
}

/* Field rules style every input, including Submit. Restore the HTML button and keep the note beside it. */
.enquiry .enquiry-submit-row {
  position: relative;
}

.enquiry .enquiry-submit-row input.wpcf7-submit {
  width: auto;
  height: auto;
  margin: 0;
  padding: 13px 24px;
  border: 1px solid #7f2d1f;
  border-radius: 8px;
  background-color: #7f2d1f;
  color: #ffe4d2;
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  appearance: none;
}

.enquiry .enquiry-submit-row input.wpcf7-submit:hover,
.enquiry .enquiry-submit-row input.wpcf7-submit:focus {
  background-color: oklch(31% 0.09 32deg);
  border-color: oklch(31% 0.09 32deg);
  color: #ffe4d2;
  box-shadow: none;
  outline: none;
}

.enquiry .enquiry-submit-row .wpcf7-spinner {
  position: absolute;
  margin: 0;
}

.enquiry .wpcf7-response-output:empty {
  display: none;
}

.wpcf7-form.footer-newsletter {
  position: relative;
  width: 100%;
}

/* The email rule in main.css also matches the submit input. Keep Subscribe as the cream button. */
.site-footer .footer-newsletter .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.site-footer .footer-newsletter input.wpcf7-submit {
  width: auto;
  height: auto;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid #ffe4d2;
  border-radius: 8px;
  background-color: #ffe4d2;
  color: #420d08;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  appearance: none;
}

.site-footer .footer-newsletter input.wpcf7-submit:hover,
.site-footer .footer-newsletter input.wpcf7-submit:focus {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #420d08;
}

.site-footer .footer-newsletter .wpcf7-spinner {
  position: absolute;
  margin: 0;
}

.site-footer .footer-newsletter .wpcf7-response-output {
  margin: 0;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(90% 0.05 40deg);
}

.site-footer .footer-newsletter .wpcf7-response-output:empty {
  display: none;
}

/* Journey heading. The global eyebrow spacing uses !important and overrides this section. */
.our-journey .ojm-head .ust-eyebrow {
  margin-bottom: 10px !important;
}

.our-journey .ojm-head h2 {
  margin: 0 !important;
  font-family: "Lora", serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #420d08;
}

/* Homepage Enquire Now bar. */
.hero .hero-search-card {
  display: block;
}

.hero .hero-search-card form.hero-enquire {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 26px;
  align-items: end;
  margin: 0;
  position: relative;
}

.hero .hero-search-card .hidden-fields-container,
.hero .hero-search-card .screen-reader-response {
  display: none;
}

.hero .hero-search-card .field-value .wpcf7-form-control-wrap {
  flex: 1;
  min-width: 0;
}

.hero .hero-search-card .field-value input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: #3d2914;
  outline: none;
  box-shadow: none;
}

.hero .hero-search-card .field-value input::placeholder {
  color: oklch(67% 0.034 52deg);
}

.hero .hero-search-card .wpcf7-submit {
  height: 52px;
  align-self: end;
  margin: 0;
}

.hero .hero-search-card .wpcf7-spinner {
  position: absolute;
  right: 0;
  bottom: 14px;
  margin: 0;
}

.hero .hero-search-card .field-value input[type="date"] {
  height: 52px;
  max-height: 52px;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.hero .hero-search-card .wpcf7-not-valid-tip {
  position: absolute;
}

.hero .hero-search-card .field {
  position: relative;
  min-height: 0;
  align-self: end;
}

.hero .hero-search-card .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
}

@media only screen and (max-width: 1024px) {
  .hero .hero-search-card form.hero-enquire {
    grid-template-columns: 1fr 1fr;
  }

  .hero .hero-search-card .wpcf7-submit {
    grid-column: 1 / -1;
  }
}

@media only screen and (max-width: 768px) {
  .hero .hero-search-card form.hero-enquire {
    grid-template-columns: 1fr;
  }

  .hero .hero-search-card .wpcf7-submit {
    grid-column: auto;
    width: 100%;
  }
}

/* Inner-page banner text card. Centre it in the photo above the torn edge
   so the gap above the card matches the gap below it. The torn graphic is
   132px tall, but the cut itself sits about 64px up from the bottom. */
.page-hero .page-hero-media {
  height: clamp(640px, 70vh, 680px);
}

.page-hero .page-hero-inner {
  padding-bottom: 64px;
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  .page-hero .page-hero-card {
    max-width: 460px;
  }
}

/* Category collages. A portrait photo was stretching its frame to the
   file's own aspect ratio. Every photo fills the shared frame instead. */
.category-photos .cat-frame,
.category-photos .destination-photo,
.category-photos .destination-photo-inner {
  min-height: 0;
}

.category-photos .destination-photo-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Destination gallery. The side photos were sizing the row from their own
   aspect ratio, so the large stamp grew around a shorter picture. The large
   photo sets the height and the two side photos split it. */
.destination-gallery-grid .gallery-side {
  min-height: 0;
}

.destination-gallery-grid .gallery-side .destination-photo,
.destination-gallery-grid .gallery-side .destination-photo-inner {
  height: 100%;
  min-height: 0;
}

.destination-gallery-grid .destination-photo-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}