/* =========================================================
   Spirit Portal — Site Refinement v1
   Shared visual + responsive layer loaded after page styles.
   ========================================================= */
:root{
  --sp-page-max:1480px;
  --sp-reading-max:1120px;
  --sp-gutter:clamp(16px,3vw,40px);
  --sp-space-1:.375rem;
  --sp-space-2:.625rem;
  --sp-space-3:.875rem;
  --sp-space-4:1.125rem;
  --sp-space-5:1.5rem;
  --sp-space-6:2rem;
  --sp-space-7:2.75rem;
  --sp-radius-control:12px;
  --sp-radius-card:18px;
  --sp-radius-panel:24px;
  --sp-control-height:44px;
  --sp-border-subtle:rgba(255,255,255,.10);
  --sp-border-hover:color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.10));
  --sp-panel-bg:linear-gradient(150deg,rgba(28,38,49,.94),rgba(14,21,29,.97));
  --sp-panel-shadow:0 16px 46px rgba(0,0,0,.22);
}

html{overflow-x:hidden;scroll-padding-top:88px}
body{min-width:320px;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%}
img{height:auto}
input,select,textarea,button{max-width:100%;font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}

/* Page rhythm and readable widths */
.section-shell,.content-page,.page-shell,.member-dashboard,.guide-reader{
  width:min(var(--sp-page-max),calc(100% - (var(--sp-gutter) * 2)));
  margin-inline:auto;
}
.section-shell,.content-page{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(36px,5vw,72px)}
.compact-section{padding-block:clamp(24px,3vw,42px)}
.page-heading,.member-welcome,.sp-banner{margin-bottom:clamp(20px,3vw,32px)}
.page-heading h1,.member-welcome h1,.sp-banner h1{font-size:clamp(2rem,4.2vw,3.45rem);line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.page-heading p,.member-welcome p,.sp-banner p{max-width:72ch;line-height:1.7}
h1,h2,h3{overflow-wrap:anywhere}
p,li,dd,td,th{overflow-wrap:break-word}
p{line-height:1.65}

/* Make surfaces feel like one design system */
.feature-card,.resource-card,.module-card,.auth-card,.tip-list article,.mini-grid article,
.community-card,.community-detail,.event-card,.notification-card,.guide-card,.guide-article,
.dashboard-panel,.announcement-panel,.server-card,.dashboard-section,.profile-card,
.sp-card,.content-card,.announcement-card{
  border-radius:var(--sp-radius-card)!important;
  border-color:var(--sp-border-subtle)!important;
  box-shadow:var(--sp-panel-shadow);
}
.feature-card,.resource-card,.module-card,.community-card,.event-card,.notification-card,.guide-card,.sp-card{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
@media (hover:hover){
  .feature-card:hover,.resource-card:hover,.module-card:hover,.community-card:hover,.event-card:hover,.notification-card:hover,.guide-card:hover,.sp-card:hover{
    transform:translateY(-2px);
    border-color:var(--sp-border-hover)!important;
    box-shadow:0 20px 54px rgba(0,0,0,.28);
  }
}

/* Shared section headings */
.section-intro,.section-heading,.dashboard-panel-heading,.sp-section-heading{
  gap:var(--sp-space-4);
}
.section-intro h2,.section-heading h2,.dashboard-panel-heading h2,.sp-section-heading h2{
  margin-top:0;
  font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.15;
  letter-spacing:-.025em;
  text-wrap:balance;
}

/* Buttons + form controls: one comfortable touch target everywhere */
.site-button,.button,.button-link,.sp-button,
button.primary,button.secondary,button.danger,
a.primary,a.secondary,a.danger{
  min-height:var(--sp-control-height);
  border-radius:var(--sp-radius-control);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),select,textarea{
  min-height:var(--sp-control-height);
  border-radius:var(--sp-radius-control)!important;
}
textarea{min-height:112px;resize:vertical}
label{line-height:1.35}
fieldset{min-width:0}

/* Generic grids should shrink instead of forcing sideways scrolling */
.path-grid,.resource-grid,.module-grid,.community-grid,.guide-card-grid,.dashboard-module-grid,.title-status-grid{
  min-width:0;
}
.path-grid>*,.resource-grid>*,.module-grid>*,.community-grid>*,.guide-card-grid>*,.dashboard-module-grid>*,.title-status-grid>*{min-width:0}

/* Tables: remain usable on narrow devices rather than widening the whole page */
table{max-width:100%}
.sp-table-wrap,.table-wrap,.responsive-table,.guide-body table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Header refinements */
.site-header.sp-nav-shell{
  width:100%;
  padding-left:max(var(--sp-gutter),env(safe-area-inset-left));
  padding-right:max(var(--sp-gutter),env(safe-area-inset-right));
}
.sp-brand-copy strong{letter-spacing:-.015em}
.sp-primary-nav a{min-height:44px;display:flex;align-items:center}

/* Footer: more deliberate and less like loose text */
.global-footer{
  width:min(var(--sp-page-max),calc(100% - (var(--sp-gutter) * 2)));
  margin:clamp(14px,3vw,36px) auto 0;
  padding:clamp(22px,3vw,34px) 0 max(28px,env(safe-area-inset-bottom));
  border-top:1px solid var(--sp-border-subtle);
}
.global-footer>div:first-child{max-width:52ch}
.footer-links{gap:8px 18px}
.footer-links a{min-height:40px;display:inline-flex;align-items:center}

/* Dashboard: fluid rather than dense */
.dashboard-main-grid,.dashboard-lower-grid{gap:clamp(14px,2vw,22px)}
.dashboard-stat-grid{gap:clamp(10px,1.7vw,16px)}
.dashboard-panel,.announcement-panel,.server-card,.dashboard-section{min-width:0}
.reservation-row{min-width:0}
.reservation-main{min-width:0}

/* Calendar + event list resilience */
.event-card{min-width:0}
.event-card-title{min-width:0;flex-wrap:wrap}
.rsvp-actions>*{flex:0 1 auto}

/* Long-form guide content */
.guide-body{font-size:clamp(.98rem,1.2vw,1.06rem)}
.guide-body pre,.guide-body code{max-width:100%}
.guide-body pre{overflow-x:auto;padding:1rem;border-radius:12px}
.guide-body iframe{max-width:100%}

/* Tablet */
@media(max-width:980px){
  :root{--sp-gutter:clamp(14px,3vw,24px)}
  html{scroll-padding-top:76px}
  .section-shell,.content-page{padding-top:30px;padding-bottom:46px}
  .site-header.sp-nav-shell{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .sp-brand-copy{max-width:min(38vw,230px)}
  .sp-primary-nav{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .global-footer{align-items:flex-start}
}

/* Phones */
@media(max-width:720px){
  :root{--sp-gutter:14px;--sp-radius-card:16px;--sp-radius-panel:18px}
  .section-shell,.content-page,.page-shell,.member-dashboard,.guide-reader{width:calc(100% - 28px)}
  .section-shell,.content-page{padding-top:22px;padding-bottom:36px}
  .page-heading,.member-welcome,.sp-banner{margin-bottom:18px}
  .page-heading h1,.member-welcome h1,.sp-banner h1{font-size:clamp(1.9rem,9vw,2.75rem)}
  .section-intro,.section-heading,.dashboard-panel-heading,.sp-section-heading{align-items:flex-start!important;flex-direction:column!important}
  .button-row,.hero-actions,.dashboard-actions,.actions,.rsvp-actions{width:100%}
  .button-row .site-button,.hero-actions .button,.dashboard-actions .compact-button{flex:1 1 160px}
  .path-grid,.resource-grid,.module-grid,.community-grid,.guide-card-grid{grid-template-columns:1fr!important}
  .mini-grid{grid-template-columns:1fr!important}
  .event-card{padding:1rem!important}
  .notification-card{padding:1rem!important}
  .global-footer{width:calc(100% - 28px);gap:18px;padding-top:24px}
  .footer-links{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-links a{justify-content:flex-start}
  .guide-article-header,.guide-layout{padding:1rem!important}
  .guide-body table{font-size:.9rem}
  .guide-body th,.guide-body td{padding:.55rem}
}

/* Small phones */
@media(max-width:520px){
  :root{--sp-control-height:46px}
  body{font-size:15px}
  .site-header.sp-nav-shell{min-height:62px;padding-top:max(7px,env(safe-area-inset-top));padding-bottom:7px}
  .sp-brand-copy{max-width:42vw}
  .sp-brand-copy strong{font-size:.96rem}
  .brand-mark{flex:0 0 36px!important;width:36px!important;height:36px!important}
  .sp-nav-actions{gap:4px}
  .sp-icon-button,.sp-profile-button{width:40px!important;height:40px!important;min-height:40px!important}
  .sp-notification-dropdown,.sp-profile-dropdown{top:calc(62px + env(safe-area-inset-top))!important}
  .page-heading h1,.member-welcome h1,.sp-banner h1{font-size:clamp(1.75rem,10vw,2.35rem)}
  .feature-card,.resource-card,.module-card,.community-card,.event-card,.notification-card,.guide-card,.sp-card{border-radius:14px!important}
  .footer-links{grid-template-columns:1fr}
  .button-row,.hero-actions,.dashboard-actions{display:grid!important;grid-template-columns:1fr!important}
  .button-row>*,.hero-actions>*,.dashboard-actions>*{width:100%!important}
  .sp-nav-dropdown{max-height:calc(100dvh - 80px);overflow:auto}
}

/* Motion/accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.feature-card,.resource-card,.module-card,.community-card,.event-card,.notification-card,.guide-card,.sp-card{transition:none}}


/* ==================================================
   Refinement v1.1 — footer + mobile drawer follow-up
   ================================================== */

/* Keep the footer bar truly edge-to-edge on desktop. The previous refinement
   constrained the footer element itself, which clipped its background/border
   at the page gutters. Content remains comfortably padded inside it. */
.global-footer{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:clamp(14px,3vw,36px) 0 0;
  padding-left:max(var(--sp-gutter),env(safe-area-inset-left));
  padding-right:max(var(--sp-gutter),env(safe-area-inset-right));
}

@media(max-width:980px){
  /* When the drawer is open, make the burger the drawer's close control and
     keep it in the reserved heading area instead of floating over links. */
  html.sp-mobile-nav-open .nav-toggle[data-sp-nav-toggle],
  body.sp-mobile-nav-open .nav-toggle[data-sp-nav-toggle]{
    position:fixed!important;
    top:max(12px,env(safe-area-inset-top))!important;
    left:calc(min(330px,86vw) - 56px)!important;
    right:auto!important;
    margin:0!important;
    z-index:230!important;
    background:rgba(255,255,255,.07)!important;
    border-color:rgba(255,255,255,.14)!important;
  }
}

@media(max-width:720px){
  .global-footer{
    width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
}

/* Spirit Portal custom icon system v1 */
.sp-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sp-icon use{pointer-events:none}
.sp-primary-nav>a{display:inline-flex;align-items:center;gap:.48rem}
.sp-nav-link-icon{width:1rem;height:1rem;opacity:.78}
.sp-primary-nav>a:hover .sp-nav-link-icon,.sp-primary-nav>a.active .sp-nav-link-icon{opacity:1}
.sp-icon-button>.sp-icon{width:1.25rem;height:1.25rem}
.sp-profile-chevron .sp-icon{width:.9rem;height:.9rem}
.admin-nav-icon .sp-icon,.sp-stat-icon .sp-icon,.sp-quick-icon .sp-icon{width:1.15rem;height:1.15rem}
.admin-nav-external .sp-icon{width:.85rem;height:.85rem}
.dv2-shortcut-icon .sp-icon{width:1.35rem;height:1.35rem}
@media(max-width:980px){.sp-primary-nav>a{gap:.7rem}.sp-nav-link-icon{width:1.1rem;height:1.1rem}}


/* Main mobile navigation closed-state repair v2.
   Keep the drawer, its border and its shadow completely outside the viewport
   until it is explicitly opened. This prevents the closed drawer from leaving
   a visible strip along the left edge of the site. */
@media (max-width:980px){
  #siteNavigation.sp-primary-nav:not(.open){
    transform:translate3d(calc(-100% - 80px),0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    box-shadow:none!important;
    border-right-color:transparent!important;
  }

  #siteNavigation.sp-primary-nav.open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    border-right-color:var(--sp-border)!important;
    box-shadow:24px 0 60px rgba(0,0,0,.42)!important;
  }
}

/* Phase 2 community/server switcher */
.sp-community-switcher{display:flex;align-items:center;gap:.55rem;margin-left:auto;padding:.35rem .45rem;border:1px solid var(--sp-border,rgba(255,255,255,.12));border-radius:12px;background:rgba(9,14,24,.5)}
.sp-community-switcher label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.72}
.sp-community-switcher select{max-width:180px;border:0;border-radius:8px;padding:.5rem .7rem;background:rgba(255,255,255,.08);color:inherit;font:inherit}
.sp-community-switcher option{color:#111}
@media(max-width:980px){.sp-community-switcher{margin:.7rem 1rem 1rem;align-items:stretch;flex-direction:column}.sp-community-switcher select{max-width:none;width:100%}}

.sp-community-switcher{margin-block-start:0;margin-block-end:0}