/* ==========================================================================
   City and Aisle - global stylesheet
   Design: City and Aisle Editorial
   Loaded on every page. Page specific rules live with their templates.
   ========================================================================== */

:root{
  --ca-bg:#FAF9F6;
  --ca-surface:#FFFFFF;
  --ca-ink:#161A18;
  --ca-ink-soft:#3C433D;
  --ca-muted:#5E655F;
  --ca-line:#E2E3DD;
  --ca-accent:#1F5C46;
  --ca-accent-dark:#174936;
  --ca-accent-soft:#EDF3EF;
  --ca-flag:#8C4A2F;
  --ca-r-sm:4px;
  --ca-r-md:10px;
  --ca-gutter:20px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body{
  background:var(--ca-bg);
  color:var(--ca-ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
}

h1,h2,h3,h4,
.site-title,
.site-title a{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:700;
  color:var(--ca-ink);
  letter-spacing:-.01em;
}

a{color:var(--ca-accent);}
a:hover{color:var(--ca-accent-dark);}

img{max-width:100%;height:auto;}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

.site-header{
  background:var(--ca-bg);
  border-bottom:1px solid var(--ca-line);
}

/* Logo */
.site-logo{display:flex;align-items:center;}
.site-logo .header-image,
.site-logo img{
  width:auto;
  height:44px;
  max-width:none;
}
@media (max-width:768px){
  .site-logo .header-image,
  .site-logo img{height:36px;}
}

.site-title{font-size:26px;line-height:1.1;margin:0;}
.site-title a{text-decoration:none;}
.site-title a:hover{color:var(--ca-accent);}

.site-description{
  color:var(--ca-muted);
  font-size:14px;
  line-height:1.4;
  margin-top:4px;
  font-family:'Instrument Sans',system-ui,sans-serif;
  letter-spacing:0;
}

.main-navigation,
.main-navigation ul ul{background:var(--ca-bg);}
.main-navigation .main-nav ul li a{
  color:var(--ca-ink);
  font-weight:500;
  font-size:16px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a{
  background:transparent;
  color:var(--ca-accent);
}

.site-info{
  background:var(--ca-bg);
  border-top:1px solid var(--ca-line);
  color:var(--ca-muted);
  font-size:14px;
}
.site-info a{color:var(--ca-muted);text-decoration:underline;}
.site-info a:hover{color:var(--ca-accent);}

/* --------------------------------------------------------------------------
   Layout: no element should ever touch the screen edge

   GeneratePress zeroes horizontal padding on mobile by default, which is what
   pushed body copy against the viewport edge. Restore a gutter everywhere,
   including on full width and no-sidebar layouts.
   -------------------------------------------------------------------------- */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content{
  padding:40px;
  background:transparent;
}

@media (max-width:768px){
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content{
    padding:28px var(--ca-gutter);
  }

  .inside-header,
  .site-info .inside-site-info,
  .inside-navigation{
    padding-left:var(--ca-gutter);
    padding-right:var(--ca-gutter);
  }

  .site-title{font-size:23px;}
}

/* Archive pages render their content directly inside <main>, outside the
   theme's .inside-article wrapper, so they get no padding from it at all.
   Give them the same gutter explicitly. */
.site-main > .ca-arch,
.inside-article > .ca-arch{
  padding:40px;
}

@media (max-width:768px){
  .site-main > .ca-arch,
  .inside-article > .ca-arch{
    padding:28px var(--ca-gutter);
  }
}

/* --------------------------------------------------------------------------
   Venue details table

   Two columns on desktop, stacked label over value on mobile. The theme puts a
   border on every cell, which turns a stacked table into a column of half
   drawn boxes, so all cell borders are removed and the row rule does the work.
   -------------------------------------------------------------------------- */

.ca-venue table.ca-table{
  width:100%;
  border-collapse:collapse;
  border:0;
  margin:0;
  table-layout:auto;
}

.ca-venue table.ca-table tbody,
.ca-venue table.ca-table tr,
.ca-venue table.ca-table th,
.ca-venue table.ca-table td{
  border:0;
  background:transparent;
}

.ca-venue table.ca-table tr{
  border-bottom:1px solid var(--ca-line);
}
.ca-venue table.ca-table tr:first-child{
  border-top:1px solid var(--ca-line);
}

.ca-venue table.ca-table th{
  width:38%;
  text-align:left;
  vertical-align:top;
  font-weight:500;
  font-size:14px;
  line-height:1.45;
  color:var(--ca-muted);
  padding:14px 20px 14px 0;
}

.ca-venue table.ca-table td{
  vertical-align:top;
  font-size:16px;
  line-height:1.5;
  color:var(--ca-ink);
  padding:14px 0;
}

@media (max-width:600px){
  .ca-venue table.ca-table,
  .ca-venue table.ca-table tbody,
  .ca-venue table.ca-table tr,
  .ca-venue table.ca-table th,
  .ca-venue table.ca-table td{
    display:block;
    width:auto;
  }

  .ca-venue table.ca-table tr{
    padding:14px 0;
    border-bottom:1px solid var(--ca-line);
  }
  .ca-venue table.ca-table tr:first-child{
    border-top:1px solid var(--ca-line);
  }

  .ca-venue table.ca-table th{
    padding:0 0 3px;
    font-size:12px;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .ca-venue table.ca-table td{
    padding:0;
    font-size:16px;
  }
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.ca-form{max-width:640px;}
.ca-form label{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ca-muted);margin:0 0 6px;font-weight:500;}
.ca-form input[type=text],
.ca-form input[type=email],
.ca-form select,
.ca-form textarea{
  width:100%;
  background:var(--ca-surface);
  border:1px solid var(--ca-line);
  border-radius:var(--ca-r-sm);
  padding:12px 14px;
  font-family:inherit;
  font-size:16px;
  color:var(--ca-ink);
  box-shadow:none;
}
.ca-form input:focus,
.ca-form select:focus,
.ca-form textarea:focus{
  border-color:var(--ca-accent);
  outline:2px solid var(--ca-accent);
  outline-offset:0;
}
.ca-form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.ca-form p{margin:0 0 18px;}
.ca-hp{position:absolute !important;left:-9999px !important;height:0;overflow:hidden;}
button.ca-form-submit{
  background:var(--ca-accent);color:#FFFFFF;border:0;cursor:pointer;
  padding:13px 26px;border-radius:var(--ca-r-md);font-weight:600;font-size:17px;font-family:inherit;
}
button.ca-form-submit:hover{background:var(--ca-accent-dark);}
.ca-form-ok{background:var(--ca-accent-soft);border:1px solid var(--ca-accent);
  border-radius:var(--ca-r-md);padding:14px 18px;color:var(--ca-ink);}
.ca-form-err{background:#F7EDE8;border:1px solid var(--ca-flag);
  border-radius:var(--ca-r-md);padding:14px 18px;color:var(--ca-ink);}
@media (max-width:600px){.ca-form-2{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-info{padding:0;}
.site-info .inside-site-info{width:100%;max-width:100%;padding:0;}

.ca-footer{
  font-family:'Instrument Sans',system-ui,sans-serif;
  border-top:1px solid var(--ca-line);
  background:var(--ca-bg);
}
.ca-footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:44px;
  max-width:1120px;
  margin:0 auto;
  padding:52px var(--ca-gutter) 40px;
  text-align:left;
}
.ca-footer-logo{display:inline-block;margin:0 0 16px;}
.ca-footer-logo img{height:34px;width:auto;display:block;}
.ca-footer-brand p{font-size:15px;line-height:1.6;color:var(--ca-ink-soft);max-width:38ch;margin:0;}
.ca-footer-h{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;
  color:var(--ca-ink);margin:0 0 12px;}
.ca-footer-col ul{list-style:none;margin:0;padding:0;}
.ca-footer-col li{margin:0 0 9px;font-size:15px;color:var(--ca-ink-soft);}
.ca-footer-col a{color:var(--ca-ink-soft);text-decoration:none;}
.ca-footer-col a:hover{color:var(--ca-accent);text-decoration:underline;}
.ca-footer-legal{border-top:1px solid var(--ca-line);}
.ca-footer-legal p{max-width:1120px;margin:0 auto;padding:18px var(--ca-gutter);
  font-size:13px;color:var(--ca-muted);text-align:left;}

@media (max-width:900px){
  .ca-footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .ca-footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .ca-footer-top{grid-template-columns:1fr;gap:28px;padding:40px var(--ca-gutter) 32px;}
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.ca-i{width:20px;height:20px;flex:0 0 20px;display:inline-block;vertical-align:middle;color:var(--ca-accent);}
.ca-i-h{width:22px;height:22px;flex:0 0 22px;margin-right:10px;position:relative;top:-1px;}
.ca-i-f{width:15px;height:15px;flex:0 0 15px;margin-right:6px;color:var(--ca-muted);position:relative;top:2px;}
.ca-i-row{width:18px;height:18px;flex:0 0 18px;color:var(--ca-accent);}

.ca-venue h2{display:flex;align-items:center;}

/* --------------------------------------------------------------------------
   Venue details: a labelled data list, not a bare table

   Reads as a specification sheet. Each row carries an icon so the eye can find
   a field without reading every label, alternating grounds mark the rows, and
   the whole block sits in a bordered panel so it is obviously a data section
   rather than more prose.
   -------------------------------------------------------------------------- */

.ca-details{
  margin:22px 0 0;
  border:1px solid var(--ca-line);
  border-radius:var(--ca-r-md);
  overflow:hidden;
  background:var(--ca-surface);
}

.ca-drow{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:24px;
  padding:15px 22px;
  border-bottom:1px solid var(--ca-line);
}
.ca-drow:last-child{border-bottom:0;}
.ca-drow:nth-child(odd){background:#F6F6F1;}

.ca-drow dt{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0;
  font-weight:500;
  font-size:15px;
  color:var(--ca-muted);
  line-height:1.4;
}
.ca-drow dt span{display:block;}
.ca-drow dd{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--ca-ink);
  font-weight:500;
  align-self:center;
}

@media (max-width:640px){
  .ca-drow{grid-template-columns:1fr;gap:5px;padding:14px 16px;}
  .ca-drow dt{font-size:13px;letter-spacing:.05em;text-transform:uppercase;}
  .ca-drow dd{padding-left:29px;}
}

/* --------------------------------------------------------------------------
   Social profile links
   -------------------------------------------------------------------------- */

.ca-social{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;padding:0;list-style:none;}
.ca-social a{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ca-surface);border:1px solid var(--ca-line);border-radius:var(--ca-r-md);
  padding:9px 16px;text-decoration:none;color:var(--ca-ink);font-weight:500;font-size:15px;
}
.ca-social a:hover{border-color:var(--ca-accent);color:var(--ca-accent);}
.ca-social .ca-i{width:18px;height:18px;flex:0 0 18px;}

/* --------------------------------------------------------------------------
   Remote venue gallery

   Images load from the venue's own server. A broken one is swapped for the
   labelled library photograph, which is dimmed so it is visibly a stand-in.
   -------------------------------------------------------------------------- */

.ca-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:22px 0 0;
}
.ca-gitem{margin:0;overflow:hidden;border-radius:var(--ca-r-md);background:#EFEFE9;}
.ca-gitem img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.ca-gitem.is-fallback{position:relative;}
.ca-gitem.is-fallback img{opacity:.72;}
.ca-gitem.is-fallback:after{
  content:"Library photo";
  position:absolute;left:8px;bottom:8px;
  background:var(--ca-bg);color:var(--ca-muted);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--ca-r-sm);
}

@media (max-width:640px){
  .ca-gallery{grid-template-columns:repeat(2,1fr);gap:8px;}
}

/* --------------------------------------------------------------------------
   Single venue hero

   Shown at the image's own aspect ratio rather than cropped to a band, so the
   whole photograph is visible. When real venue photography replaces these,
   each venue's own framing is preserved instead of being cut to fit.
   -------------------------------------------------------------------------- */

.single-venue .ca-hero{margin:0 0 30px;}
.single-venue .ca-hero img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:var(--ca-r-md);
  display:block;
}

/* Review source citations under the synthesis block */
.ca-sources a{color:var(--ca-accent);text-decoration:underline;text-underline-offset:2px;}
.ca-sources a:hover{color:var(--ca-accent-dark);}

/* Very small screens: keep the gutter but tighten it slightly. */
@media (max-width:400px){
  :root{--ca-gutter:16px;}
}

/* --------------------------------------------------------------------------
   Shared components
   -------------------------------------------------------------------------- */

/* Any solid accent button, anywhere. Specificity is deliberately high so a
   theme link colour can never turn the label green on a green ground. */
a.ca-cta,
a.ca-btn,
.entry-content a.ca-cta,
.entry-content a.ca-btn{
  display:inline-block;
  background:var(--ca-accent);
  color:#FFFFFF;
  text-decoration:none;
  padding:13px 26px;
  border-radius:var(--ca-r-md);
  font-weight:600;
  line-height:1.2;
  border:0;
}
a.ca-cta:hover,
a.ca-btn:hover,
.entry-content a.ca-cta:hover,
.entry-content a.ca-btn:hover{
  background:var(--ca-accent-dark);
  color:#FFFFFF;
}

/* Image credits */
.ca-cred,
.ca-credit{
  font-size:12px;
  color:var(--ca-muted);
  margin:8px 0 0;
  line-height:1.45;
}
.ca-cred a,
.ca-credit a{color:var(--ca-muted);text-decoration:underline;}

/* Long unbroken strings (URLs, addresses) must not force a horizontal scroll. */
.entry-content{overflow-wrap:break-word;}

/* Maps and embeds */
iframe{max-width:100%;}

/* Focus state, keyboard users */
a:focus-visible,
summary:focus-visible,
button:focus-visible{
  outline:2px solid var(--ca-accent);
  outline-offset:2px;
  border-radius:var(--ca-r-sm);
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}