/*!
Theme Name: Hostinger AI theme
Author: Hostinger
Author URI: https://hostinger.com
Details URI: https://hostinger.com
Description: Hostinger AI theme built with SEO and mobile responsiveness in mind, this theme ensures optimal performance and a better online presence.
Version: 2.1.2
Tested up to: 7.1
Requires at least: 5.6
Requires PHP: 8.1
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hostinger-ai-theme
Tags: ai-theme
*/

/* Maasai Mara editorial refinement */
:root {
  --mara-ink: #463915;
  --mara-deep: #2f351f;
  --mara-accent: #9b5d2e;
  --mara-paper: #fff9e9;
  --mara-panel: #f3ead2;
  --mara-line: rgba(70,57,21,.18);
}

.mara-site-header {
  border-bottom: 1px solid var(--mara-line);
  box-shadow: 0 8px 28px rgba(47,53,31,.05);
}
.mara-site-title a,
.mara-site-navigation a { font-weight: 650; letter-spacing: .01em; }
.mara-site-navigation a { text-underline-offset: .35em; }
.mara-site-navigation a:hover,
.mara-site-navigation a:focus-visible { color: var(--mara-accent); }

.mara-site-footer { margin-block-start: 0; }
.mara-site-footer__identity { max-width: 34rem; }
.mara-site-footer__identity p { opacity: .78; max-width: 31rem; }
.mara-site-footer a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.mara-footer-rule { opacity: .28; margin-block: 2rem 1.5rem; }

body.page-id-29 main {
  color: var(--mara-ink);
  font-size: clamp(1.0625rem, 1rem + .18vw, 1.125rem);
  line-height: 1.68;
}
body.page-id-29 main > .wp-block-group:not(.alignfull):not(.alignwide),
body.page-id-29 main .wp-block-group.is-layout-constrained > :where(p,ul,ol,h2,h3,figure.wp-block-table,details) {
  max-width: 48rem;
}
body.page-id-29 main h2 {
  font-size: clamp(1.8rem, 1.55rem + .8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  margin-block-start: 2.4em;
}
body.page-id-29 main h3 { line-height: 1.3; }

.mara-guide-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.25rem, 7vw, 6rem) !important;
}
.mara-guide-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -42% 52%;
  width: 36rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.018);
  pointer-events: none;
}
.mara-guide-hero > * { position: relative; z-index: 1; }
.mara-guide-hero h1 {
  max-width: 62rem;
  font-size: clamp(2.35rem, 5.1vw, 4.25rem) !important;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.mara-guide-meta {
  opacity: .74;
  max-width: 52rem !important;
  letter-spacing: .02em;
}

.mara-quick-answer {
  background: var(--mara-panel) !important;
  border: 1px solid var(--mara-line);
  border-radius: 1rem;
  box-shadow: 0 18px 46px rgba(70,57,21,.07);
}
.mara-quick-answer > * { max-width: 68.75rem !important; }
.mara-fact-grid {
  display: grid !important;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 1rem !important;
}
.mara-fact-grid > .wp-block-column {
  min-width: 0;
  padding: 1.25rem;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(70,57,21,.12);
  border-radius: .75rem;
}
.mara-fact-grid h3 { margin-top: 0; font-size: 1.05rem; }
.mara-fact-grid p { font-size: .94rem; line-height: 1.55; }

body.page-id-29 figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body.page-id-29 figure.wp-block-table table { min-width: 43rem; }
body.page-id-29 figure.wp-block-table::after {
  content: "Swipe to compare →";
  display: none;
  padding-top: .55rem;
  color: rgba(70,57,21,.65);
  font-size: .78rem;
  letter-spacing: .04em;
}

.mara-faq-section details {
  border: 1px solid var(--mara-line);
  border-radius: .7rem;
  background: rgba(255,255,255,.55);
  padding: 0 1.2rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.mara-faq-section details + details { margin-top: .7rem; }
.mara-faq-section details[open] { background: #fffdf5; border-color: rgba(155,93,46,.45); }
.mara-faq-section summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 2rem 1rem 0;
  font-weight: 700;
  position: relative;
}
.mara-faq-section summary::-webkit-details-marker { display: none; }
.mara-faq-section summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: .78rem;
  color: var(--mara-accent);
  font-size: 1.45rem;
  font-weight: 400;
}
.mara-faq-section details[open] summary::after { content: "–"; }
.mara-faq-section details > :not(summary) { margin-top: 0; padding-bottom: 1rem; }

.mara-related-guides .wp-block-columns { gap: 1rem; }
.mara-related-guides .wp-block-column {
  position: relative;
  padding: 1.4rem;
  border: 1px solid var(--mara-line);
  border-radius: .75rem;
  background: rgba(255,255,255,.55);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mara-related-guides .wp-block-column::after {
  content: "Read guide →";
  display: block;
  margin-top: 1.1rem;
  color: var(--mara-accent);
  font-weight: 700;
  font-size: .9rem;
}
.mara-related-guides .wp-block-column:hover,
.mara-related-guides .wp-block-column:focus-within {
  transform: translateY(-2px);
  border-color: rgba(155,93,46,.45);
  box-shadow: 0 12px 28px rgba(70,57,21,.08);
}

.mara-guide-cta { padding-block: clamp(2.5rem,5vw,4rem) !important; }
.mara-guide-cta .wp-block-button__link {
  min-height: 3rem;
  padding: .85rem 1.45rem;
  border: 2px solid transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  font-weight: 750;
}
.mara-guide-cta .wp-block-button__link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .mara-fact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mara-fact-grid > .wp-block-column:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .mara-site-header__inner { padding-inline: 1rem; }
  .mara-site-title { display: none; }
  .mara-site-header .wp-block-site-logo img { width: 88px; }
  .mara-guide-hero { padding-inline: 1.25rem !important; }
  .mara-guide-hero h1 { font-size: clamp(2.15rem, 10vw, 3rem) !important; }
  .mara-quick-answer { border-radius: 0; padding: 2rem 1.15rem !important; }
  .mara-fact-grid { grid-template-columns: 1fr; }
  .mara-fact-grid > .wp-block-column:last-child { grid-column: auto; }
  body.page-id-29 figure.wp-block-table::after { display: block; }
  .mara-site-footer__grid { gap: 1.5rem; }
  .mara-footer-navigation { justify-content: flex-start !important; }
}
.mara-site-links,
.mara-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.35rem;
}
.mara-site-links a,
.mara-footer-links a {
  color: inherit;
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: .35em;
}
.mara-site-links a:hover,
.mara-site-links a:focus-visible,
.mara-footer-links a:hover,
.mara-footer-links a:focus-visible {
  color: var(--mara-accent);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .mara-site-links { gap: .8rem; font-size: .85rem; }
  .mara-footer-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mara-related-guides .wp-block-column { transition: none; }
}
