/* Modern stylesheet for serranohat.com – CSS custom properties, Flexbox/Grid, responsive navigation, accessibility */
:root {
  --primary: #2d3748;
  --bg: #f7fafc;
  --text: #1a202c;
  /* Accessible accent red – #e53e3e is 4.13:1 (only passes for large text/UI);
     #c53030 gives 5.5:1 on white so it passes AA for normal text too. */
  --accent: #c53030;
  /* Warm bronze for links/headings – the theme's #b5a881 is only 2.36:1 on
     white. #7d6e33 keeps the warm gold feel at 5.06:1 (WCAG AA). */
  --bronze: #7d6e33;
  --success: #38a169;
  --font-primary: "Inter", system-ui, sans-serif;
  --font-secondary: "Inter", system-ui, sans-serif; /* serif accent removed – single modern face site-wide */
}

body {margin:0;font-family:var(--font-primary);background:var(--bg);color:var(--text);}

/* --- Accessible link colours ---
   The theme colours every link with the pale gold #b5a881 (2.36:1, fails AA).
   Links get the darker bronze; the header nav keeps its own dark colour via
   the more specific .nav/.wsite-menu rules below. */
a {color:var(--bronze);}
a:hover {color:var(--accent);}
/* Plain paragraph links get an underline so colour is never the only cue */
#wsite-content p a, .wsite-elements p a {text-decoration:underline;text-underline-offset:3px;}
#wsite-content a:hover, #wsite-content a:focus-visible {text-decoration:underline;}

/* Inner pages: slightly taller banner – the theme sets short-header
   banners to 240px (min-height + inner .container height). The landing
   pages keep their full-height hero untouched. */
.short-header-page .banner-wrap {min-height: 320px;}
.short-header-page .banner-wrap .container {height: 320px;}

/* ===== Footer (contact info + social) ===== */
.footer-wrap {
  background: #1a202c;
  color: #cbd5e0;
  padding: 2.4rem 0 1.2rem;
}
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.6rem;
}
.footer-block {display: flex; flex-direction: column; gap: .3rem;}
.footer-logo {font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: .04em;}
.footer-tagline {font-size: .85rem; color: #94a3b8;}
.footer-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #d4c79b; /* warm gold, 9.7:1 on the dark bar */
  margin-bottom: .15rem;
}
.footer a {color: #e2e8f0; text-decoration: none;}
.footer a:hover {color: #fff; text-decoration: underline;}
.footer-social-icons {display: flex; gap: .6rem;}
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background .2s ease, transform .1s ease;
}
.footer-social-icon:hover {background: var(--bronze); transform: translateY(-2px); text-decoration: none;}
.footer-social-icon svg {width: 20px; height: 20px;}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1rem;
  text-align: center;
  font-size: .82rem;
  color: #94a3b8;
}
@media (max-width: 767px) {
  .footer {flex-direction: column; align-items: center; text-align: center;}
  .footer-social-icons {justify-content: center;}
}

/* --- Header (paris-header) --- */
.paris-header {position:relative;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:#fff;opacity:1;z-index:12;}

/* The theme hides the header with opacity:0 until its JS adds body.fade-in-nav.
   We force opacity:1 so the logo and menu are always visible, even if that JS fails. */

/* Logo uses the secondary font; the logo image is white text, so invert it on the white header */
.logo a{display:inline-block;margin:0;font-family:var(--font-secondary);}
.paris-header .logo a img {filter:invert(1);}

/* Hamburger (already present in HTML) */
.hamburger {width:30px;height:20px;position:relative;cursor:pointer;}
.hamburger span{display:block;position:absolute;left:0;top:9px;width:100%;height:2px;background:var(--primary);transition:transform 0.3s;}
.hamburger span:nth-child(2){top:4px;}
.hamburger span:nth-child(3){top:12px;}

/* Mobile nav hidden by default */
#main-nav {position:absolute;top:100%;left:0;width:100%;background:#fff;display:none;flex-direction:column;padding:1rem;box-shadow:0 2px 6px rgba(0,0,0,0.1);}
#main-nav.open {display:flex;}
#main-nav a{padding:.5rem 1rem;color:var(--text);text-decoration:none;display:flex;align-items:center;width:100%;}
#main-nav a:hover{background:#f1f2f6;}

/* Desktop nav (keep existing) */
.wsite-menu-default {display:flex;list-style:none;margin:0;padding:0;}

/* Menu colour – match theme specificity (.nav li a) so the dark text wins over the theme's white */
.wsite-menu a,
.nav li a {color:var(--text);text-decoration:none;}
.wsite-menu a:hover,
.nav li a:hover {color:var(--accent);}

/* --- Language toggle button (last item in nav) --- */
#lang-toggle {
  background: none;
  border: 2px solid var(--primary);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#lang-toggle:hover { background: var(--primary); color: #fff; }

/* Align the toggle with the menu links: equal-height flex row + vertically centred button */
@media (min-width: 768px) {
  .nav ul.wsite-menu-default { display: flex; align-items: stretch; }
  .wsite-menu-default li.lang-toggle-wrap { display: flex; align-items: center; padding: 0 20px; }
}

/* --- Language hide/show (default = English) --- */
li[data-lang="es"],
a[data-lang="es"] { display: none !important; }
html.lang-es li[data-lang="en"],
html.lang-es a[data-lang="en"] { display: none !important; }
html.lang-es li[data-lang="es"],
html.lang-es a[data-lang="es"] { display: list-item !important; }

/* --- Accessibility focus outlines ---
   Show the ring only for keyboard users (:focus-visible), not mouse clicks */
a:focus,button:focus,input:focus,textarea:focus{outline:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* Skip link to main content (injected by modern.js) */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;overflow:visible;z-index:1000;padding:.6rem 1rem;background:#fff;color:var(--text);border:2px solid var(--accent);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);}

/* Touch ergonomics */
a,button,label.hamburger{-webkit-tap-highlight-color:rgba(197,48,48,.18);}
a,button{touch-action:manipulation;}

/* Typographic polish for content headings and paragraphs */
.wsite-content-title,h2.wsite-content-title,.blog-title,.blog-title a,.wsite-headline,.wsite-content h2{text-wrap:balance;}
#wsite-content p,.wsite-elements p{text-wrap:pretty;}

/* Honour the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* --- Image lazy load --- */
img[loading="lazy"]{display:block;}

/* --- Gallery grid --- */
.gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.gallery img{max-width:100%;height:auto;display:block;}

/* --- News / Noticias blog table (texture posts) ---
   The blog sidebar column is removed from the HTML; the post content now
   spans the full width and the texture photos render as a clean grid with
   their captions always visible (no hover needed). */
#blogTable { width: 100%; }
#blogTable .blog-body { float: none !important; width: 100%; }

@media (min-width: 768px) {
  #blogTable .imageGallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    line-height: normal !important;
  }
  #blogTable .imageGallery > div {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  #blogTable .galleryImageHolder {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden;
    background: #efece4;
  }
  /* Show the whole photo (no horizontal crop) at its natural ratio */
  #blogTable .galleryInnerImageHolder img.galleryImage {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block;
  }
  /* Captions: always-on subtle band at the bottom of each photo */
  #blogTable .imageGallery .galleryCaptionHolder {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    opacity: 1 !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 44px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)) !important;
  }
  #blogTable .imageGallery .galleryCaptionHolderInnerBg { display: none !important; }
  #blogTable .imageGallery .galleryCaptionHolderInner {
    display: block !important;
    height: auto !important;
    width: 100%;
    margin: 0 !important; /* Weebly's hover layout adds a huge negative margin */
  }
  #blogTable .imageGallery .galleryCaptionInnerTextHolder {
    display: block !important;
    position: static !important;
    box-sizing: border-box;
    padding: 6px 10px 8px;
    text-align: center;
  }
  #blogTable .imageGallery .galleryCaptionInnerText {
    display: block !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .08em !important;
    font-size: 13px;
    line-height: 1.3;
    margin: 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
  }
}

/* Phones / small tablets: 2 columns, same clean treatment */
@media (max-width: 767px) {
  #blogTable .imageGallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    line-height: normal !important;
  }
  #blogTable .imageGallery > div {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  #blogTable .galleryImageHolder {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden;
    background: #efece4;
  }
  #blogTable .galleryInnerImageHolder img.galleryImage {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block;
  }
  #blogTable .imageGallery .galleryCaptionHolder {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    opacity: 1 !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 36px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)) !important;
  }
  #blogTable .imageGallery .galleryCaptionHolderInnerBg { display: none !important; }
  #blogTable .imageGallery .galleryCaptionHolderInner {
    display: block !important;
    height: auto !important;
    width: 100%;
    margin: 0 !important; /* Weebly's hover layout adds a huge negative margin */
  }
  #blogTable .imageGallery .galleryCaptionInnerTextHolder {
    display: block !important;
    position: static !important;
    box-sizing: border-box;
    padding: 4px 6px 6px;
    text-align: center;
  }
  #blogTable .imageGallery .galleryCaptionInnerText {
    display: block !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .06em !important;
    font-size: 10px;
    line-height: 1.25;
    margin: 0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
  }
}

/* --- Responsive adjustments --- */
@media (max-width:767px){
  .hamburger{display:block;}
  #main-nav{position:fixed;left:0;top:0;height:100vh;width:100%;background:#fff;flex-direction:column;padding:2rem;box-shadow:0 4px 12px rgba(0,0,0,.15);}
  .wsite-menu-default{display:none;}
}

/* Headings: Inter is narrower than the old Quattrocento serif – give page
   titles a firmer presence with a semibold weight (letter-spacing trimmed
   in the page styles from 5px to 2px). */
body #wsite-content h2 {font-weight:600;}

/* Kill the tiny horizontal scroll caused by fixed-width theme containers */
html, body {overflow-x:hidden;}

/* Justified body prose on the History pages (EN + ES) – the inline style in
   the page says text-align:left, so this needs !important. hyphens make the
   justified lines set tighter (html lang is set by modern.js). */
body.wsite-page-history #wsite-content .paragraph,
body.wsite-page-historia #wsite-content .paragraph {
  text-align: justify !important;
  hyphens: auto;
}

/* Contact pages: info strip, form, map */

/* Info strip above the form/map columns */
#wsite-content .contact-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 3.5rem;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.4rem;
  background: #fff;
  border: 1px solid #e8e5de;
  border-left: 4px solid var(--bronze);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
#wsite-content .contact-info .contact-info-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
#wsite-content .contact-info .contact-info-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--bronze);
}
#wsite-content .contact-info .contact-info-value {
  font-size: .98rem;
  color: var(--text);
}
#wsite-content .contact-info a.contact-info-value:hover {color: var(--accent);}

/* Contact form: full-width fields with breathing room */
#wsite-content .formlist {list-style:none;}
#wsite-content .wsite-form-field {
  margin: 0 0 1.15rem !important;
  max-width: none !important; /* base css caps fields at 400px – let them fill the column */
}
#wsite-content .wsite-form-field .wsite-form-label,
#wsite-content .wsite-form-field > label {
  display: block;
  margin: 0 0 .4rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--text);
}
#wsite-content .wsite-form-label.wsite-form-fields-required-label {
  font-weight: 400;
  font-size: .8rem;
  font-style: normal;
  color: #4a5568;
  margin: 0 0 1rem;
}
#wsite-content .form-required {color: var(--accent) !important;}

/* Name first/last side-by-side */
#wsite-content .wsite-name-field .wsite-form-input-container.wsite-form-input-first-name {width: 48.5%; float: left; margin-right: 3%;}
#wsite-content .wsite-name-field .wsite-form-input-container.wsite-form-input-last-name {width: 48.5%; float: right;}

/* Inputs / textarea: fill their column, modern borders & focus */
#wsite-content .wsite-form-input-container .wsite-input,
#wsite-content textarea.wsite-input {
  width: 100% !important;
  max-width: none !important;
  padding: .68rem .85rem !important;
  margin-bottom: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#wsite-content .wsite-input:focus,
#wsite-content textarea.wsite-input:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(125, 110, 51, .15);
}
#wsite-content textarea.wsite-input {resize: vertical; min-height: 160px;}

/* Invalid fields (Weebly marks .form-field-error) */
#wsite-content .form-field-error .wsite-input {border-color: var(--accent) !important;}

/* Submit: replace the grey theme pill with a dark modern button that
   spans the full form width, matching the fields above it */
#wsite-content .wsite-button {display: block; width: 100%; text-align: center;}
#wsite-content .wsite-button .wsite-button-inner {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .9rem 2.1rem !important;
  background: #1a202c !important;
  color: #fff !important;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: background .2s ease, transform .1s ease;
}
#wsite-content .wsite-button:hover .wsite-button-inner {background: var(--bronze) !important;}
#wsite-content .wsite-button:active .wsite-button-inner {transform: translateY(1px);}
#wsite-content .wsite-button:focus-visible .wsite-button-inner {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Map: card look, responsive height */
.wsite-map iframe {
  display: block;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
@media (max-width: 767px) {
  .wsite-map iframe {height: 340px !important;}
  #wsite-content .contact-info {justify-content: flex-start; text-align: left;}
  #wsite-content .contact-info .contact-info-item {text-align: left;}
}

/* Dark mode improvements – switch the header to a dark bar so white text stays legible */
@media (prefers-color-scheme: dark) {
  .paris-header {background:#1a202c;}
  .paris-header .logo a img {filter:none;}
  .wsite-menu a,
  .nav li a {color:#f5f5f5;}
  #lang-toggle {border-color:#f5f5f5;color:#f5f5f5;}
  #lang-toggle:hover {background:#f5f5f5;color:#1a202c;}
}