/*
Theme Name: Salisbury
Author: Rachel Leung
Description: Custom theme for The Ordinariate in Salisbury, built from the Figma prototype.
Version: 1.2.0
Text Domain: salisbury
Requires PHP: 7.4
*/
/* Mobile-first; desktop from 640px. Colours, fonts, type sizes: assets/css/content.css */

*,*::before,*::after{box-sizing:border-box}
body{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;background:linear-gradient(rgba(0,0,0,.55),transparent);color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand-logo img{height:28px;width:auto;display:block}
.brand-name{font-family:var(--f-head);font-size:16px;line-height:1.2}
.brand-tag{display:none;font-size:14px;line-height:1.2}
.brand-text{display:flex;flex-direction:column}
.nav-toggle{background:none;border:0;padding:0;width:46px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:26px;height:2px;background:#fff;content:"";position:relative}
.nav-toggle .bars::before{position:absolute;top:-8px}
.nav-toggle .bars::after{position:absolute;top:8px}
.primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--so-blue);padding:8px 20px 20px}
.primary-nav.is-open{display:block}
.primary-nav ul{list-style:none;margin:0;padding:0}
.primary-nav a{display:block;padding:10px 0;color:#fff;text-decoration:none;font-size:16px}
.primary-nav .sub-menu{padding-left:16px}
.primary-nav .sub-menu a{font-size:14px;color:var(--so-grey)}

/* ---------- Hero ---------- */
.hero{position:relative;height:360px;display:flex;align-items:center;justify-content:center;background:var(--so-blue) center/cover no-repeat;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.hero h1{position:relative;z-index:1;color:#fff;text-align:center;margin:0;padding:0 20px;max-width:700px}
.home .hero h1{font-size:var(--fs-h1)}

/* ---------- Content ---------- */
.page-body{padding:40px 0 56px;background:var(--so-cream);container-type:inline-size}
.entry-content{max-width:700px;margin:0 auto}
.section-title{text-align:center;margin:0 0 28px}
.section-events{padding:48px 0;background:var(--so-cream)}
.more-link{text-align:center;margin:28px 0 0}

/* Event cards */
.events-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
a.event-card,a.event-card:hover,a.event-card:focus,.event-card *{text-decoration:none!important}
a.event-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;background:#fff;border-radius:var(--img-radius);overflow:hidden}
.event-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.event-body{padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.event-meta{font-size:14px;line-height:1.6;margin:0 0 6px;color:var(--so-charcoal)}
.event-card h3{margin:0;font-size:var(--fs-h3);text-align:left}
.event-filter{display:flex;justify-content:center;gap:10px;font-size:14px;margin:0 0 20px}
.event-filter a{color:var(--so-charcoal);text-decoration:none}
.event-filter a.is-active{font-weight:700}
.event-filter span{opacity:.7}

/* WPForms (Gift Aid) */
.wpforms-container .wpforms-field-label{font-family:var(--f-body);font-weight:700}
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container input[type=tel],
.wpforms-container input[type=number],.wpforms-container input[type=date],.wpforms-container select,.wpforms-container textarea{
  width:100%;max-width:100%;padding:10px 12px;border:1px solid var(--so-grey);border-radius:8px;background:#fff;font:inherit}
.wpforms-container .wpforms-submit{background:var(--so-gold)!important;color:#fff!important;border:0!important;padding:12px 22px!important;border-radius:8px!important;cursor:pointer}

/* ---------- Footer ---------- */
.site-footer{container-type:inline-size;background:var(--so-blue);color:#fff;text-align:center;padding:36px 0 28px}
.site-footer a{color:#fff;text-decoration:none}
.f-name{font-family:var(--f-head);font-size:24px;line-height:1.2;margin:0}
.f-tag{margin:6px auto 24px;max-width:220px;font-size:14px;line-height:1.4}
.f-contact{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:320px;margin:0 auto 24px;font-family:var(--f-head);color:var(--so-grey);font-size:16px;text-align:left}
.f-contact a{color:var(--so-grey)}
.f-contact div{display:flex;gap:14px;align-items:center}
.f-contact .f-ep{display:flex;flex-direction:column;align-items:flex-start;gap:50px}
.f-contact svg{flex:none;width:22px;height:22px;stroke:var(--so-grey);fill:none;stroke-width:1.5}
.f-cols{display:none}
.f-legal{display:flex;justify-content:center;gap:40px;margin:0 0 24px;padding:0;list-style:none;font-size:14px}
.f-copy{font-size:14px;margin:0}

/* ---------- Desktop ---------- */
@media (min-width:640px){
  .site-header{position:relative;background:var(--so-blue)}
  .header-inner{flex-direction:column;padding:10px 20px 0;gap:0}
  .brand{gap:14px}
  .brand-logo img{height:55px}
  .brand-name{font-size:25px}
  .brand-tag{display:block}
  .nav-toggle{display:none}
  .primary-nav{display:block;position:static;background:none;padding:0}
  .primary-nav>ul{display:flex;justify-content:center}
  .primary-nav>ul>li{display:flex;align-items:center}
  .primary-nav>ul>li+li::before{content:"/";color:#fff;padding:0 18px}
  .primary-nav a{padding:6px 0;font-size:14px}
  .primary-nav>ul>li:hover>a,.primary-nav>ul>li:focus-within>a{color:var(--so-gold)}
  /* Dropdown = full-width gold bar directly under the header */
  .primary-nav .sub-menu{display:flex;flex-wrap:wrap;justify-content:center;position:absolute;left:0;right:0;top:100%;background:var(--so-gold);padding:0 20px;z-index:30;
    opacity:0;visibility:hidden;transition:opacity .25s ease .4s,visibility 0s linear .65s} /* dissolve out after a .4s delay */
  .primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
  /* another dropdown is opened -> the others vanish immediately */
  .primary-nav>ul:has(>li:is(:hover,:focus-within))>li:not(:is(:hover,:focus-within))>.sub-menu{opacity:0;visibility:hidden;transition:none}
  .primary-nav .sub-menu li{display:flex;align-items:center;padding:0}
  .primary-nav .sub-menu li+li::before{content:"/";color:#fff;padding:0 18px}
  .primary-nav .sub-menu a{padding:12px 0;color:#fff;font-size:14px}
  .primary-nav a,.primary-nav a:hover{text-decoration:none}
  .hero{height:700px}
  .page-body{padding:72px 0 80px}
  .section-events{padding:80px 0}
  a.event-card{flex-direction:row;height:200px}
  .event-card img{width:230px;height:100%;aspect-ratio:auto;flex:none}
  .event-body{padding:0 24px}
  .event-meta{font-size:14px}
  .event-filter{justify-content:flex-end;margin-top:-30px;max-width:800px;margin-left:auto;margin-right:auto}
  .f-name{font-size:32px}
  .f-tag{max-width:none;font-size:16px}
  .f-contact{align-items:center;max-width:none;font-size:20px}
  .f-contact .f-addr{justify-content:center}
  .f-contact .f-ep{flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap}
  .f-cols{display:flex;justify-content:center;gap:56px;margin:0 auto 28px;max-width:820px;text-align:center;align-items:flex-start}
  .f-col{display:flex;flex-direction:column;align-items:center;gap:14px}
  .f-col .fh{font-family:var(--f-head);font-size:20px;color:var(--so-grey)}
  .f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:120px;font-size:14px;line-height:1.3}
}

/* Footer separator = same ornament separator as the body */
.site-footer hr.wp-block-separator{margin-top:0;margin-bottom:24px}

/* Single event page */
.single-tribe_events .site-header{position:relative;background:var(--so-blue)}
.event-single .wrap{max-width:1000px}
.event-single h1{margin:0 0 24px}
.event-single .ev-when,.event-single .ev-where{text-align:center;margin:0 0 12px;line-height:1.6}
.event-single .ev-img{max-width:800px;margin:32px auto}
.event-single .ev-img img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block}
.event-single .ev-nav{display:flex;justify-content:space-between;max-width:700px;margin:0 auto;font-size:14px;line-height:1.6}
.event-single .ev-nav a{color:var(--so-charcoal);text-decoration:none}

/* Mobile menu helpers hidden on desktop */
.nav-close{display:none}
.primary-nav li.menu-back{display:none!important}

/* ---------- Mobile menu: full-screen panel (matches Figma) ---------- */
@media (max-width:639px){
  body.menu-open{overflow:hidden}
  .primary-nav{display:block;position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;background:var(--so-blue);padding:0;border:0;overflow-x:hidden;overflow-y:auto;z-index:100;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .primary-nav.is-open{opacity:1;visibility:visible;transition:opacity .3s ease}
  /* the X sits exactly where the hamburger is */
  .nav-close{display:block;position:absolute;top:8px;right:20px;width:46px;height:44px;background:none;border:0;cursor:pointer;z-index:3}
  .nav-close::before,.nav-close::after{content:"";position:absolute;left:10px;top:21px;width:26px;height:2px;background:#fff}
  .nav-close::before{transform:rotate(45deg)}
  .nav-close::after{transform:rotate(-45deg)}
  .primary-nav>ul{padding:82px 0 40px 50px}
  .primary-nav a{padding:14px 0;font-size:16px;line-height:24px;color:#fff;text-decoration:none}
  .primary-nav>ul>li>a{display:flex;justify-content:space-between;align-items:center;padding-right:56px}
  .primary-nav .menu-item-has-children>a::after{content:">"}
  /* submenu panel slides in from the right */
  .primary-nav .sub-menu{display:block;position:absolute;top:0;left:0;right:0;min-height:100%;margin:0;padding:82px 0 40px 50px;background:var(--so-blue);z-index:2;
    transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .primary-nav li.is-sub-open>.sub-menu{transform:none;visibility:visible;transition:transform .3s ease}
  .primary-nav .sub-menu a{display:block;max-width:180px}
  .primary-nav .sub-menu>li.menu-back{display:block!important;margin:16px 0 0 -12px}
  .menu-back button{background:none;border:0;color:#fff;font:inherit;font-size:16px;line-height:24px;padding:14px 0;cursor:pointer}
  /* pressed = gold */
  .primary-nav a:active,.menu-back button:active{color:var(--so-gold)}
}

/* ---------- Event cards / link cards: max 250px on mobile ---------- */
@media (max-width:639px){
  a.event-card{max-width:250px;margin-left:auto;margin-right:auto;width:100%}
}

/* ---------- Thank-you page ---------- */
.hero-thanks{height:480px}
.hero-thanks .hero-inner{position:relative;z-index:1;text-align:center;padding:0 20px}
.hero-thanks h1{font-size:36px;line-height:1.2;max-width:800px;margin:0 auto 28px;padding:0}
.hero-thanks .button{position:relative}
@media (min-width:640px){
  .hero-thanks{height:760px}
  .hero-thanks h1{font-size:96px;margin-bottom:40px}
}

/* ---------- Single event: Previous / All / Next ---------- */
.event-single .ev-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.event-single .ev-nav>span:first-child{justify-self:start}
.event-single .ev-nav>span:last-child{justify-self:end}

/* ---------- Hover (desktop): lift up + soft shadow left at the original position ---------- */
.button,.wp-block-button__link,.wpforms-submit,a.event-card,.entry-content .wp-block-media-text.is-style-card,.entry-content .wp-block-gallery.is-style-tiles figure.wp-block-image{
  transition:transform .2s ease,box-shadow .2s ease,opacity .15s ease}
@media (min-width:640px){
  .button:hover,.wp-block-button__link:hover,.wpforms-submit:hover{transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.28)}
  a.event-card:hover,.entry-content .wp-block-media-text.is-style-card:has(a):hover,.entry-content .wp-block-gallery.is-style-tiles figure.wp-block-image:has(a):hover{
    transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
}
/* Pressed (mobile): dim a little */
@media (max-width:639px){
  .button:active,.wp-block-button__link:active,.wpforms-submit:active,a.event-card:active,
  .entry-content .wp-block-media-text.is-style-card:has(a):active,.entry-content .wp-block-gallery.is-style-tiles figure.wp-block-image:has(a):active{opacity:.7}
}
/* Links-page cards: whole card is clickable (front end only, so the editor stays editable) */
.entry-content .wp-block-media-text.is-style-card{position:relative}
.entry-content .wp-block-media-text.is-style-card a::after{content:"";position:absolute;inset:0;z-index:1}
.entry-content .wp-block-media-text.is-style-card a{text-decoration:none;color:inherit}

/* Dropdown text identical to the main menu (font size, line height, "/" spacing) */
@media (min-width:640px){
  .primary-nav a,.primary-nav .sub-menu a{font-size:14px;line-height:35px;letter-spacing:normal;font-weight:400}
  .primary-nav li+li::before,.primary-nav .sub-menu li+li::before{font-size:14px;line-height:35px}
}
.events-list{gap:30px}

/* Brand block: no stray line-height space above/below the text, so the logo is level with the whole brand */
.brand-logo{display:flex;line-height:0}
.brand-text{line-height:1.2}

/* Desktop: footer menu links turn gold on hover */
@media (min-width:640px){
  .f-cols a,.f-legal a{transition:color .2s ease}
  .f-cols a:hover,.f-legal a:hover{color:var(--so-gold)}
}
/* Placeholder links (href="#"): not clickable on desktop, no pointer cursor (hover on the menu item itself still works) */
@media (min-width:640px){
  a[href="#"]{pointer-events:none;cursor:default}
}

/* ===== Event / archive cards with excerpt ===== */
.event-excerpt{font-size:14px;line-height:1.6;text-align:justify;margin:8px 0 0}
.event-card .more{white-space:nowrap}
.event-filter{display:flex;justify-content:center;gap:14px;margin:0 auto 30px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:700px;margin:0 auto;font-size:14px;line-height:1.6}
.pager-prev{justify-self:start}
.pager-next{justify-self:end}
.pager-nums{display:flex;gap:18px;justify-content:center}
.pager a{color:var(--so-charcoal);text-decoration:none}
.pager .is-current{color:var(--so-gold)}
.pager .is-disabled,.ev-nav .is-disabled{color:var(--so-grey)}
@media (min-width:640px){
  .pager a:hover{color:var(--so-gold)}
  .event-filter{justify-content:center;margin:0 auto 30px;max-width:800px}
  a.event-card{height:auto;min-height:200px}
  .event-card img{height:auto;align-self:stretch}
  .event-body{padding:20px 24px}
}

/* ===== Single event / single post ===== */
.event-single .ev-cat{text-align:center;margin:0 0 30px;line-height:1.6}
.event-single .ev-cat a{color:inherit;text-decoration:none}
.event-single .ev-first{margin-top:0}
.event-single .ev-when{margin-bottom:0}
.event-single .ev-when+.ev-when{margin-top:6px}
@media (min-width:640px){ .event-single .ev-cat a:hover{color:var(--so-gold)} }
.event-single .ev-nav>a{justify-self:center}
.event-single .ev-nav a{color:var(--so-charcoal);text-decoration:none}
/* read-only post pages: no text selection */
.single-post main{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.single-post main img{-webkit-user-drag:none}

/* ===== Footer email: a bit larger than body text, smaller than before ===== */
.f-contact .f-email{font-size:14px}
@media (min-width:640px){ .f-contact .f-email{font-size:18px} }

/* ===== Links page cards: whole card clickable (image link stretches over the card) ===== */
.entry-content .wp-block-media-text.is-style-card:has(a){cursor:pointer}

/* ===== Archive cards: min height 245px (grows with content), image anchored to the top (crops the bottom only) ===== */
@media (min-width:640px){
  .archive-cards a.event-card{min-height:245px}
}
.archive-cards .event-card img{object-position:top}

/* ===== Single event / post: rounded featured image, gold hover on Previous / All / Next ===== */
.event-single .ev-img img{border-radius:var(--img-radius)}
.event-single .ev-nav a,.event-single .ev-nav a:hover{text-decoration:none}
.event-single .ev-nav a{transition:color .2s ease}
@media (min-width:640px){ .event-single .ev-nav a:hover{color:var(--so-gold)} }

/* ===== Cards with excerpt (Masses and Events, Archive): no minimum height, max 250px; excerpt trimmed by script to fit ===== */
.has-excerpt a.event-card{max-height:360px;overflow:hidden}
@media (min-width:640px){
  .events-list.has-excerpt a.event-card{display:block;position:relative;height:250px!important;min-height:250px!important;max-height:250px;padding-left:230px}
  .events-list.has-excerpt .event-card img{position:absolute;left:0;top:0;width:230px;height:100%;aspect-ratio:auto;object-fit:cover}
}

/* ===== Previous / All / Next: gold on hover on any device that has hover (not tied to screen width) ===== */
@media (hover:hover){
  .event-single .ev-nav a:hover,.event-single .ev-nav a:focus-visible{color:var(--so-gold)!important}
}
.event-single .ev-nav a{transition:color .2s ease}

/* ===== Footer address = Google Maps link ===== */
.f-contact .f-maps{display:flex;gap:14px;align-items:center;color:var(--so-grey)}
@media (min-width:640px){ .f-contact .f-maps{justify-content:center} .f-contact .f-maps:hover{color:var(--so-gold)} }

/* ===== Event card: category tag in the top right corner ===== */
.event-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.event-meta .event-tag{text-align:right;flex:none}

/* ===== Hover colours (desktop/hover devices) ===== */
@media (hover:hover){
  .event-filter a:hover{color:var(--so-gold)}
  .primary-nav .sub-menu a:hover,.primary-nav .sub-menu a:focus-visible{color:var(--so-charcoal)}
}

/* ===== One animated hover effect for all text, same as the footer links (.2s colour fade) ===== */
a,.menu-back button{transition:color .2s ease}
.event-card .event-body{flex:1 1 auto;min-width:0}

/* ===== Hero + page heading banners keep the proportion of the hero video (1920 x 1080 = 16:9) at every screen width ===== */
.hero{height:auto!important;aspect-ratio:16/9}
/* thank-you banner needs room for heading + button on phones, so it is a fixed 300px tall there */
@media (max-width:639px){ .hero.hero-thanks{aspect-ratio:auto;height:300px!important} }

/* ===== Footer email + phone links: gold on hover ===== */
@media (hover:hover){
  .f-contact a:hover,.f-contact a:focus-visible{color:var(--so-gold)}
}

/* ===== Desktop: all event + homily cards are exactly 250px tall, whatever the text length (text centred vertically) ===== */
@media (min-width:640px){
  .events-list.has-excerpt .event-body{min-height:250px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
}

/* ===== Image tiles: the whole tile (image + caption) is clickable ===== */
.entry-content .wp-block-gallery.is-style-tiles figure.wp-block-image{position:relative}
.entry-content .wp-block-gallery.is-style-tiles figure.wp-block-image:has(a){cursor:pointer}
.entry-content .wp-block-gallery.is-style-tiles figure.wp-block-image a::after{content:"";position:absolute;inset:0;z-index:1}