/*
Theme Name: SPM Cabinet
Theme URI: https://infocabinet.cm
Author: Bosassa Global
Author URI: https://bosassaglobal.com
Description: Official custom theme for the Services du Premier Ministre — glass-morphism design with a 3D building hero, bilingual-ready, built by Bosassa Global.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: spm-cabinet
*/

  @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

  :root{
    --cream: #f7f3ee;
    --cream-deep: #efe8df;
    --brown: #5c3a21;
    --brown-deep: #3d2716;
    --caramel: #a9724f;
    --glass-brown: rgba(92,58,33,0.07);
    --glass-brown-border: rgba(92,58,33,0.16);
    --text-hi: #2c1e12;
    --text-lo: rgba(44,30,18,0.62);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{
    min-height:100%;
    font-family:'Inter', sans-serif;
    color: var(--text-hi);
    background: var(--cream);
    scroll-behavior:smooth;
  }
  a{ color:inherit; }

  /* Safety net: nothing in the theme constrained a plain <img> with no
     inline size — most images here have their own specific CSS, but any
     photo dropped into a blog post/page through the editor had zero size
     limit and could render at its full native pixel width, blowing out
     the layout and forcing horizontal scroll on phones. This is the
     default floor; specific rules elsewhere (e.g. .member-photo img)
     still win because a class selector is always more specific than this
     bare element selector, regardless of order. */
  img, svg, canvas, video{ max-width:100%; height:auto; }

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px 48px;
    background: rgba(247,243,238,0.65);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--glass-brown-border);
  }
  .brand{
    font-family:'Fraunces', serif;
    font-size:19px; font-weight:600;
    letter-spacing:0.01em;
  }
  .brand span{ color: var(--caramel); }

  nav.links{ display:flex; gap:36px; }
  nav.links a{
    font-size:13.5px; font-weight:500;
    text-decoration:none;
    color: var(--text-lo);
    transition: color .2s ease;
  }
  nav.links a:hover{ color: var(--brown); }

  .menu-btn{
    display:none;
    flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer;
    padding:8px;
  }
  .menu-btn i{ width:24px; height:2px; background: var(--brown); border-radius:2px; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    padding: 0 48px;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0;
    background:
      radial-gradient(900px 600px at 85% 20%, rgba(169,114,79,0.14), transparent 60%),
      radial-gradient(700px 600px at 10% 90%, rgba(92,58,33,0.08), transparent 55%),
      var(--cream);
  }

  #hero-canvas{
    position:absolute;
    top:0; right:0;
    width:56%; height:100%;
    z-index:1;
  }

  .hero-content{
    position:relative; z-index:2;
    max-width: 560px;
  }
  .eyebrow{
    font-size:12px; font-weight:600;
    letter-spacing:0.14em; text-transform:uppercase;
    color: var(--caramel);
    margin-bottom:18px;
  }
  .hero h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size: 52px;
    line-height:1.08;
    margin-bottom:22px;
    color: var(--brown-deep);
  }
  .hero p.lead{
    font-size:16px;
    line-height:1.65;
    color: var(--text-lo);
    margin-bottom:34px;
    max-width:440px;
  }
  .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 14px 26px;
    border-radius: 14px;
    font-size:14px; font-weight:600;
    text-decoration:none;
    cursor:pointer;
    border:1px solid transparent;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-solid{ background: var(--brown); color: var(--cream); }
  .btn-solid:hover{ background: var(--brown-deep); }
  .btn-ghost{
    background: var(--glass-brown);
    border-color: var(--glass-brown-border);
    color: var(--brown-deep);
    backdrop-filter: blur(10px);
  }
  .btn-ghost:hover{ background: rgba(92,58,33,0.12); }

  /* ---------- Glass card grid (services) ---------- */
  .section{ padding: 110px 48px; position:relative; }
  .section-head{ max-width:560px; margin-bottom:56px; }
  .section-head .eyebrow{ margin-bottom:14px; }
  .section-head h2{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:34px;
    color: var(--brown-deep);
    margin-bottom:14px;
  }
  .section-head p{ color: var(--text-lo); font-size:14.5px; line-height:1.6; }

  .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .glass-card{
    background: var(--glass-brown);
    border: 1px solid var(--glass-brown-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 20px;
    padding: 30px;
    transition: transform .22s ease, border-color .22s ease;
  }
  .glass-card:hover{
    transform: translateY(-4px);
    border-color: rgba(169,114,79,0.45);
  }
  .glass-card .icon{
    width:44px; height:44px;
    border-radius:12px;
    background: var(--brown);
    color: var(--cream);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif;
    font-size:18px;
    margin-bottom:20px;
  }
  .glass-card h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size:18px;
    margin-bottom:10px;
    color: var(--brown-deep);
  }
  .glass-card p{
    font-size:13.5px;
    color: var(--text-lo);
    line-height:1.6;
  }

  /* ---------- Posts & Blogs preview strip ---------- */
  .posts-strip{
    background: var(--cream-deep);
    padding: 100px 48px;
  }
  .tab-row{ display:flex; gap:10px; margin-bottom:34px; }
  .tab-btn{
    padding: 10px 22px;
    border-radius: 999px;
    border:1px solid var(--glass-brown-border);
    background: transparent;
    color: var(--text-lo);
    font-size:13px; font-weight:600;
    cursor:pointer;
  }
  .tab-btn.active{ background: var(--brown); color: var(--cream); border-color: var(--brown); }

  .posts-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
  }
  .post-card{
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--glass-brown-border);
    border-radius:18px;
    overflow:hidden;
    backdrop-filter: blur(10px);
  }
  .post-card .thumb{
    height:130px;
    background: linear-gradient(150deg, #cdb59d, #8a6142);
  }
  .post-card .body{ padding:20px; }
  .post-card .tag{
    font-size:10.5px; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase;
    color: var(--caramel);
    margin-bottom:8px;
  }
  .post-card h4{
    font-family:'Fraunces', serif;
    font-size:16px; font-weight:500;
    margin-bottom:8px;
    color: var(--brown-deep);
  }
  .post-card p{ font-size:12.5px; color: var(--text-lo); line-height:1.5; }

  /* ---------- Footer ----------
     Deliberately breakpoint-free: flex-wrap + centered content means it
     looks right from the narrowest phone up through laptop and desktop
     widths without needing a row->column switch at some magic width. */
  footer{
    padding: 36px 24px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 32px;
    text-align: center;
    border-top:1px solid var(--glass-brown-border);
    font-size:12.5px;
    color: var(--text-lo);
    box-sizing: border-box;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }
  footer > div{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  @media (max-width: 900px){
    .grid, .posts-grid{ grid-template-columns: 1fr; }
    #hero-canvas{ width:100%; opacity:0.5; }
    .hero h1{ font-size:38px; }
    .menu-btn{ display:flex; }
  }

/* ---------- Inner page header (About / Blogs / Contact) ---------- */
.page-hero{
  padding: 170px 48px 70px;
  position:relative;
}
.page-hero .eyebrow{ margin-bottom:14px; }
.page-hero h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:44px;
  color: var(--brown-deep);
  margin-bottom:16px;
  max-width:640px;
}
.page-hero p.lead{
  font-size:15px;
  color: var(--text-lo);
  line-height:1.6;
  max-width:520px;
}

/* ---------- Team / Cabinet grid ---------- */
.team-section{ padding: 20px 48px 110px; }
.team-group{ margin-bottom: 56px; }
.team-group h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:20px;
  color: var(--brown-deep);
  margin-bottom:22px;
  padding-bottom:12px;
  border-bottom:1px solid var(--glass-brown-border);
}
.team-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.team-card{
  background: var(--glass-brown);
  border:1px solid var(--glass-brown-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius:18px;
  padding:24px;
  display:flex; gap:16px; align-items:flex-start;
}
.team-card .avatar{
  width:52px; height:52px; flex:none;
  border-radius:14px;
  background: linear-gradient(150deg, #cdb59d, #8a6142);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif;
  color: var(--cream);
  font-size:17px; font-weight:600;
  overflow:hidden;
  position:relative;
}
.team-card .avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:14px;
}
.team-card .role{
  font-size:10.5px; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  color: var(--caramel);
  margin-bottom:6px;
}
.team-card h4{
  font-family:'Fraunces', serif;
  font-size:15.5px; font-weight:500;
  color: var(--brown-deep);
  margin-bottom:6px;
}
.team-card p{
  font-size:12.5px; color: var(--text-lo); line-height:1.5;
}
.team-card .name-tbd{
  font-size:11.5px;
  font-style:italic;
  color: rgba(44,30,18,0.4);
}

/* ---------- Blogs / Posts archive ---------- */
.archive-section{ padding: 10px 48px 110px; }

/* ---------- Contact page ---------- */
.contact-wrap{
  padding: 10px 48px 110px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items:start;
}
.contact-card{
  background: var(--glass-brown);
  border:1px solid var(--glass-brown-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius:22px;
  padding:36px;
}
.contact-card h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:19px;
  color: var(--brown-deep);
  margin-bottom:22px;
}
.form-field{ margin-bottom:18px; }
.form-field label{
  display:block; font-size:11.5px;
  color: var(--text-lo); margin-bottom:7px;
  letter-spacing:0.02em;
}
.form-field input, .form-field textarea{
  width:100%; padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--glass-brown-border);
  background: rgba(255,255,255,0.5);
  color: var(--text-hi);
  font-size:13.5px;
  font-family:'Inter',sans-serif;
  resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{
  outline:2px solid var(--caramel); outline-offset:1px;
}

.info-block{ margin-bottom:28px; }
.info-block .label{
  font-size:11px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  color: var(--caramel);
  margin-bottom:8px;
}
.info-block .value{
  font-size:14.5px;
  color: var(--brown-deep);
  line-height:1.6;
}
.map-box{
  height:260px;
  border-radius:18px;
  background: radial-gradient(circle at 50% 45%, rgba(201,162,93,0.14), rgba(239,228,212,0.6) 70%);
  border:1px solid var(--glass-brown-border);
  overflow:hidden;
}
.map-box canvas{ width:100%; height:100%; display:block; }

@media (max-width: 900px){
  .team-grid{ grid-template-columns: 1fr; }
  .contact-wrap{ grid-template-columns: 1fr; }
}

/* ---------- Cabinet member cards v2: photo-first, modern ---------- */
.member-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.member-card{
  display:block;
  text-decoration:none;
  color: inherit;
}
.member-photo{
  width:100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow:hidden;
  position:relative;
  background: linear-gradient(150deg, #cdb59d, #8a6142);
  margin-bottom:14px;
  border: 1px solid var(--glass-brown-border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.member-card:hover .member-photo{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(92,58,33,0.18);
}
.member-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.member-photo .initials-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif;
  font-size:42px;
  color: rgba(247,243,238,0.9);
}
.member-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:16.5px;
  color: var(--brown-deep);
  margin-bottom:4px;
}
.member-role-link{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  color: var(--caramel);
  text-decoration:none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.member-card:hover .member-role-link{
  border-color: var(--caramel);
  color: var(--brown-deep);
}

/* ---------- Single cabinet member page ---------- */
.member-detail{
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 48px 110px;
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items:start;
}
.member-detail-photo{
  width:100%;
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow:hidden;
  background: linear-gradient(150deg, #cdb59d, #8a6142);
  border: 1px solid var(--glass-brown-border);
}
.member-detail-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.member-detail h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:30px;
  color: var(--brown-deep);
  margin-bottom:8px;
}
.member-detail .role-badge{
  display:inline-block;
  background: var(--glass-brown);
  border:1px solid var(--glass-brown-border);
  color: var(--brown-deep);
  font-size:12.5px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:22px;
}
.member-detail .bio{
  font-size:14.5px;
  line-height:1.75;
  color: var(--text-hi);
}
.member-detail .bio p{ margin-bottom:14px; }
.member-detail .bio:empty::before{
  content: "No biography added yet — edit this Cabinet Member in wp-admin to add one.";
  color: var(--text-lo);
  font-style:italic;
}

@media (max-width: 900px){
  .member-grid{ grid-template-columns: repeat(2, 1fr); }
  .member-detail{ grid-template-columns: 1fr; }
  .member-detail-photo{ max-width: 240px; }
}

/* ---------- Bio preview on card hover ---------- */
.member-bio-preview{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 14px 14px 16px;
  background: linear-gradient(0deg, rgba(20,12,5,0.88) 10%, rgba(20,12,5,0.55) 70%, transparent 100%);
  color: #f4ece0;
  font-size:11.5px;
  line-height:1.5;
  transform: translateY(100%);
  opacity:0;
  transition: transform .28s ease, opacity .28s ease;
}
.member-card:hover .member-bio-preview{
  transform: translateY(0);
  opacity:1;
}

/* ---------- Sticky header (solid on scroll) ---------- */
header.scrolled{
  background: rgba(247,243,238,0.94);
  box-shadow: 0 2px 20px rgba(92,58,33,0.08);
}

/* ---------- Mobile nav ---------- */
.menu-btn{ position:relative; z-index:60; }
.menu-btn.open i:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-btn.open i:nth-child(2){ opacity:0; }
.menu-btn.open i:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  nav.links{
    display:flex;
    position:fixed;
    top:0; right:0;
    height:100vh;
    width: 78%;
    max-width: 320px;
    background: rgba(247,243,238,0.98);
    backdrop-filter: blur(20px);
    flex-direction:column;
    align-items:flex-start;
    gap: 26px;
    padding: 110px 34px 40px;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    z-index:55;
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
  }
  nav.links.mobile-open{ transform: translateX(0); }
  nav.links a{ font-size:16px; }
}

/* ---------- Scroll-reveal ---------- */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-in{
  opacity:1;
  transform: translateY(0);
}

/* ---------- Search ---------- */
.search-btn{
  background:none; border:none; cursor:pointer;
  padding:8px; color: var(--brown-deep);
  display:flex; align-items:center;
}
.search-modal{
  position:fixed; inset:0;
  background: rgba(20,12,5,0.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 14vh;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
  z-index:100;
}
.search-modal.open{ opacity:1; pointer-events:auto; }
.search-modal-inner{
  background: var(--cream);
  border-radius:18px;
  padding:28px;
  width:90%; max-width:560px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position:relative;
}
.search-modal-close{
  position:absolute; top:16px; right:20px;
  background:none; border:none; cursor:pointer;
  font-size:22px; color: var(--text-lo);
}
.search-modal h3{
  font-family:'Fraunces', serif;
  font-size:18px; color: var(--brown-deep);
  margin-bottom:16px;
}
.search-modal form{ display:flex; gap:10px; }
.search-modal input{
  flex:1;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid var(--glass-brown-border);
  background: rgba(255,255,255,0.6);
  font-size:14px;
  font-family:'Inter',sans-serif;
}
.search-modal button[type="submit"]{
  padding:12px 20px;
  border-radius:10px;
  background: var(--brown);
  color: var(--cream);
  border:none;
  font-weight:600;
  cursor:pointer;
}

/* ---------- Newsletter block ---------- */
.newsletter{
  background: var(--brown-deep);
  padding: 60px 48px;
  text-align:center;
}
.newsletter h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:24px;
  color: var(--cream);
  margin-bottom:10px;
}
.newsletter p{
  color: rgba(247,243,238,0.7);
  font-size:14px;
  margin-bottom:24px;
}
.newsletter form{
  display:flex; gap:10px;
  max-width:420px;
  margin:0 auto;
}
.newsletter input{
  flex:1;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(247,243,238,0.25);
  background: rgba(247,243,238,0.08);
  color: var(--cream);
  font-size:14px;
  font-family:'Inter',sans-serif;
}
.newsletter input::placeholder{ color: rgba(247,243,238,0.5); }
.newsletter button{
  padding:13px 22px;
  border-radius:10px;
  background: var(--gold, #c9a25d);
  color: #1a1206;
  border:none;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

/* ---------- Related entries ---------- */
.related-section{
  max-width:720px; margin:0 auto;
  padding: 40px 48px 20px;
}
.related-section h3{
  font-family:'Fraunces', serif;
  font-size:18px;
  color: var(--brown-deep);
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--glass-brown-border);
}

/* ---------- 404 page ---------- */
.error-404{
  min-height:70vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding: 40px;
}
.error-404 .code{
  font-family:'Fraunces', serif;
  font-size:88px;
  font-weight:600;
  color: var(--caramel);
  line-height:1;
  margin-bottom:10px;
}
.error-404 h1{
  font-family:'Fraunces', serif;
  font-size:26px;
  color: var(--brown-deep);
  margin-bottom:12px;
}
.error-404 p{
  color: var(--text-lo);
  margin-bottom:26px;
  max-width:420px;
}

/* ---------- Brand crest ---------- */
.brand-crest{
  height: 30px;
  width: auto;
  display:block;
  /* The coat of arms is full-color (green/red/gold) by default, which
     clashes against the site's brown/cream palette. Muting saturation and
     pulling the hue/brightness toward brown lets it read as part of the
     header instead of a bright sticker on top of it. */
  filter: saturate(0.55) sepia(0.35) hue-rotate(-8deg) brightness(0.92) contrast(1.05);
}

/* ---------- Building mark (Immeuble Étoile), sits before "SPM CABINET" ---------- */
.brand-building{
  height: 32px;
  width: auto;
  display:block;
  /* Photo is already mostly brown/black on a transparent cut-out, so this
     is a light touch rather than a heavy recolor — just enough to sit at
     the same warmth/darkness as the rest of the header instead of reading
     as a separate photo pasted on top. */
  filter: sepia(0.25) saturate(0.85) brightness(0.95) contrast(1.05);
}

/* ---------- Sr-only utility (accessible hidden-until-focus content) ---------- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.sr-only-focusable:focus{
  position:fixed; top:12px; left:12px;
  width:auto; height:auto; margin:0;
  padding:12px 18px; clip:auto; overflow:visible;
  white-space:normal; z-index:200;
  background: var(--brown-deep); color: var(--cream);
  border-radius:10px; font-size:13px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}

/* ---------- Quick-task bar (homepage, below hero — not part of hero itself) ---------- */
.task-bar{
  padding: 36px 48px;
  background: var(--cream-deep);
  border-bottom: 1px solid var(--glass-brown-border);
}
.task-bar-inner{
  max-width: 1100px;
  margin: 0 auto;
  display:grid;
  /* auto-fit instead of a fixed 3/2/1 column count tied to breakpoints —
     there was a gap between the 480px and 601px breakpoints where this
     stayed squeezed into 3 columns. This adapts continuously so there's
     no width it can misbehave at. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}
.task-btn{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  background: var(--glass-brown);
  border:1px solid var(--glass-brown-border);
  border-radius:14px;
  text-decoration:none;
  color: var(--brown-deep);
  font-size:13.5px;
  font-weight:600;
  transition: transform .2s ease, background .2s ease;
}
.task-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.5);
}
.icon-canvas{
  width:34px; height:34px; flex:none;
  display:block;
  object-fit: contain;
}
.icon-canvas-lg{
  width:46px; height:46px;
  margin-bottom:20px;
  object-fit: contain;
}

/* ---------- Tilt-on-hover (JS sets transform via inline style) ---------- */
.glass-card, .post-card, .member-card, .team-card, .contact-card{
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- PM featured block ---------- */
.pm-feature{
  display:block;
  max-width: 320px;
  margin: 0 auto;
  text-decoration:none;
  color: inherit;
  text-align:center;
}
.pm-feature-photo{
  width:100%;
  aspect-ratio: 4/5;
  border-radius:22px;
  overflow:hidden;
  background: linear-gradient(150deg, #cdb59d, #8a6142);
  border: 1px solid var(--glass-brown-border);
  margin-bottom:16px;
  box-shadow: 0 14px 40px rgba(92,58,33,0.16);
  transition: transform .25s ease;
}
.pm-feature:hover .pm-feature-photo{ transform: translateY(-4px); }
.pm-feature-photo img{ width:100%; height:100%; object-fit:cover; }
.pm-feature-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:20px;
  color: var(--brown-deep);
  margin-bottom:6px;
}
.pm-feature-role{
  font-size:13px;
  font-weight:600;
  color: var(--caramel);
}

/* ---------- Org chart section ---------- */
.org-chart-section{
  padding: 30px 48px 10px;
  max-width: 900px;
  margin: 0 auto;
}
#org-chart-canvas{
  width:100%; height:360px;
  display:block;
}

/* ---------- Embossed crest (wherever the coat of arms appears standalone) ---------- */
.crest-emboss{
  filter:
    saturate(0.3) sepia(0.5) hue-rotate(-8deg) brightness(0.85) contrast(1.1)
    drop-shadow(0 1px 0 rgba(255,255,255,0.5))
    drop-shadow(0 -1px 1px rgba(0,0,0,0.25))
    drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}

/* ---------- Footer hardening for large / odd desktop widths ---------- */
html, body{ overflow-x:hidden; max-width:100%; }
header, .hero, .section, .posts-strip, .newsletter, footer,
.page-hero, .team-section, .archive-section, .contact-wrap, .org-chart-section{
  box-sizing:border-box;
}
.newsletter, .posts-strip, .section{
  max-width: 1400px;
  margin-left:auto; margin-right:auto;
}

/* ---------- Tablet breakpoint (iPad-range, between phone and desktop) ---------- */
@media (min-width: 601px) and (max-width: 1024px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .member-grid{ grid-template-columns: repeat(2, 1fr); }
  .posts-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero h1{ font-size:40px; }
  #hero-canvas{ width:48%; }
  .member-detail{ grid-template-columns: 200px 1fr; gap:28px; }
}

@media (max-width: 600px){
  header .brand{ font-size:16px; }
  header{ padding: 18px 18px; }
}

/* ---------- Mobile: the 3D scenes are skipped in PHP (see functions.php,
   wp_is_mobile()) to keep phones fast, so hide the now-empty canvases and
   tighten up the layout around them instead of leaving blank space. Also
   cuts the huge 48px side padding used everywhere on desktop, which was
   the main reason pages felt oversized/zoomed-in on narrow phones. This
   breakpoint (900px) matches the one that switches the nav to the
   hamburger menu, so "mobile mode" is consistent everywhere instead of
   having a gap where the nav is mobile-style but the rest of the page
   (footer included) is still laid out for desktop. ---------- */
@media (max-width: 900px){
  #org-chart-canvas,
  #contact-globe,
  .map-box{ display:none; }

  /* Hero building stays on mobile (by request) — give it real height to
     render into instead of the auto/content-height used when it was
     text-only, and drop it behind the text at a low opacity so the
     heading/buttons stay readable on top of it. */
  .hero{
    min-height: 78vh;
    padding: 130px 20px 60px;
  }
  #hero-canvas{
    width: 100%;
    height: 100%;
    opacity: 0.55;
  }
  .hero-content{ max-width:100%; }
  .hero p.lead{ max-width:100%; }
  .hero h1{ font-size:32px; }

  .section,
  .posts-strip,
  .newsletter{ padding-left:20px; padding-right:20px; }
  .section{ padding-top:60px; padding-bottom:60px; }
  .posts-strip{ padding-top:56px; padding-bottom:56px; }

  .page-hero{ padding:120px 20px 44px; }
  .page-hero h1{ font-size:30px; }

  .team-section,
  .archive-section,
  .contact-wrap,
  .member-detail{ padding-left:20px; padding-right:20px; }

  .org-chart-section{ padding-left:20px; padding-right:20px; }

  .task-bar{ padding:24px 20px; }

  /* Footer sizing/layout is now handled by the breakpoint-free base rule
     above — no override needed here. */

  .newsletter form{
    flex-direction: column;
    max-width: 100%;
  }
  .newsletter button{ width:100%; }
}

@media (max-width: 560px){
  /* Cabinet member cards were still 2-up down to the smallest phones,
     squeezing photos and text into ~140px columns. One column reads much
     better below this width. */
  .member-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .member-photo{ max-width: 280px; margin-left:auto; margin-right:auto; }
  .member-name, .member-role-link{ text-align:center; display:block; }
}

@media (max-width: 480px){
  .pm-feature{ max-width: 240px; }
}

@media (max-width: 400px){
  .hero h1{ font-size:28px; }
  .page-hero h1{ font-size:26px; }
}