/*
Theme Name: Casa Carlouel
Theme URI: https://casacarlouel.com
Author: Curt Larson
Description: Custom theme for Casa Carlouel — the Hurricane Helene recovery story, room-by-room renovation, and the full photo/video archive.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: casa-carlouel
*/

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --banner-green: rgb(0,100,0);
  --ink: #232323;
  --ink-soft: #5a5a5a;
  --bg: #ffffff;
  --bg-alt: #f4f4f1;
  --line: #dcdcd6;
  --menu-divider: #a6a6a6;
  --nav-border: #b0b0b0;
  --menu-bg: linear-gradient(to bottom, #f7f7f7 0%, #dcdcdc 50%, #f7f7f7 100%);
  --menu-bg-hover: #ffffff;
  --menu-text: #2b2b2b;
  --accent: #b23e1c;
  --font-script: 'Alex Brush', 'Brush Script MT', cursive;
  --font-nav: 'Jost', 'Century Gothic', 'Futura', Arial, sans-serif;
  --font-body: 'Jost', Arial, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: var(--font-body);
  font-size:17px;
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
.wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }

/* ---------- Banner ---------- */
.site-banner{
  background: var(--banner-green);
  color:#fff;
  text-align:center;
  padding:22px 20px 26px;
}
.site-banner .site-title{
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin:0;
  line-height:1;
  font-weight:400;
}
.site-banner .site-title a{ color:#fff; text-decoration:none; }
.site-banner .site-tagline{
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.7vw, 2.1rem);
  margin:6px 0 0;
  color:#eaf5ea;
}

/* ---------- Nav ---------- */
.primary-nav{
  background: var(--menu-bg);
  border-top:1px solid #fff;
  border-bottom:2px solid var(--nav-border);
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
  font-family: var(--font-nav);
  position:relative;
  z-index:30;
}
.nav-inner{ max-width:1000px; margin:0 auto; display:flex; align-items:stretch; justify-content:center; }
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  padding:14px 18px; font-family:var(--font-nav); font-size:.95rem; color:var(--menu-text);
}
.nav-toggle .bar{ display:block; width:22px; height:2px; background:var(--menu-text); margin:4px 0; }

.menu{ list-style:none; margin:0; padding:0; display:flex; }
.menu > li{ position:relative; border-right:1px solid var(--menu-divider); }
.menu > li:first-child{ border-left:1px solid var(--menu-divider); }
.menu a{
  display:block;
  padding:14px 11px;
  color:var(--menu-text);
  text-decoration:none;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.menu > li > a:hover, .menu > li.current-menu-item > a{ background:var(--menu-bg-hover); color:var(--accent); }

.menu .sub-menu{
  list-style:none; margin:0; padding:6px 0;
  position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.12);
  display:none; z-index:40;
}
.menu li.menu-item-has-children:hover > .sub-menu,
.menu li.menu-item-has-children.open > .sub-menu{ display:block; }
.menu .sub-menu li{ position:relative; }
.menu .sub-menu a{ padding:10px 16px; font-size:.78rem; text-transform:none; letter-spacing:0; color:var(--ink); }
.menu .sub-menu a:hover{ background:var(--bg-alt); color:var(--accent); }

/* third level flyout */
.menu .sub-menu .sub-menu{ top:-7px; left:100%; }
.menu .sub-menu li.menu-item-has-children > a::after{ content:"›"; float:right; margin-left:8px; color:var(--ink-soft); }
.menu > li.menu-item-has-children > a::after{ content:"▾"; margin-left:6px; font-size:.65em; vertical-align:1px; color:var(--ink-soft); }

/* ---------- Page content ---------- */
.site-main{ padding:40px 0 64px; }
.page-title{ font-family:var(--font-nav); font-weight:600; font-size:1.9rem; color:var(--ink); margin:0 0 22px; }
.entry-content > *{ max-width:720px; margin-left:auto; margin-right:auto; }
.entry-content p{ margin:0 auto 1.1em; }
.entry-content figure{ margin:1.6em auto; }
.entry-content img{ border:1px solid var(--line); }
.entry-content figcaption{ font-size:.82rem; color:var(--ink-soft); margin-top:6px; font-family:var(--font-nav); text-align:center; }

/* image + text side-by-side pattern */
.cc-columns{ display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; margin:1.6em auto; }
.cc-columns > *{ flex:1 1 260px; min-width:0; }

/* ---------- Gallery pages ---------- */
.cc-gallery-intro, .cc-gallery-outro{ max-width:720px; margin-left:auto; margin-right:auto; }
.wp-block-gallery.cc-photo-gallery{ margin:1.8em auto; }
.wp-block-gallery.cc-photo-gallery figure img{ border-radius:4px; }

/* On the "Full Width (Gallery)" page template, let photo grids and video
   grids actually use the extra width — otherwise they'd still be capped
   at the same 720px column as regular body text, defeating the point of
   picking that template. Intro/outro paragraphs stay narrow and readable. */
.full-width-page .entry-content > *{ max-width:1100px; }
.full-width-page .entry-content .cc-gallery-intro,
.full-width-page .entry-content .cc-gallery-outro{ max-width:720px; }

/* ---------- Video gallery ---------- */
.cc-video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin:1.8em auto; }
.cc-video-grid .wp-block-embed{ margin:0; }
.cc-video-grid .wp-block-embed__wrapper{ position:relative; padding-top:56.25%; }
.cc-video-grid .wp-block-embed__wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; }
.cc-video-grid figcaption{ margin-top:8px; text-align:center; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bg-alt); border-top:1px solid var(--line);
  padding:26px 0; text-align:center; font-family:var(--font-nav); font-size:.8rem; color:var(--ink-soft);
}
.site-footer a{ color:var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .nav-toggle{ display:block; margin-left:auto; }
  .nav-inner{ flex-wrap:wrap; }
  .menu{ display:none; flex-direction:column; width:100%; }
  .primary-nav.nav-open .menu{ display:flex; }
  .menu > li{ border-right:none; border-left:none; border-bottom:1px solid var(--line); }
  .menu .sub-menu{ position:static; display:none; box-shadow:none; border:none; border-top:1px solid var(--line); }
  .menu li.menu-item-has-children.open > .sub-menu{ display:block; }
  .menu .sub-menu .sub-menu{ left:0; padding-left:14px; }
  .cc-columns{ flex-direction:column; }
}