:root{
    --navy:#0F2A44;
    --navy-deep:#0A1E32;
    --sail-blue:#1B5FA6;
    --sail-blue-dark:#134677;
    --compass-orange:#E85C33;
    --paper:#FDFBF8;
    --paper-alt:#F4F1EB;
    --line:#E4E1DA;
    --mist:#6C7A89;
    --ink:#0F2A44;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:9px;
    --shadow-soft:0 10px 30px -14px rgba(15,42,68,0.18);
    --shadow-card:0 6px 20px -10px rgba(15,42,68,0.16);
    --serif:'SailXSerif', Georgia, 'Times New Roman', serif;
    --sans:'SailXSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  }

  @font-face{
    font-family:'SailXSerif';
    src:local('Palatino Linotype'), local('Georgia');
  }

  *{box-sizing:border-box;}

  /* WordPress renders nav menus as <ul><li> — reset default list
     chrome so they lay out exactly like the design, no bullets/indents. */
  .nav-links, .footer-col ul, .utility-links, .nav-links ul{
    list-style:none;margin:0;padding:0;
  }
  .nav-links li, .footer-col li, .utility-links li{
    list-style:none;margin:0;padding:0;
  }
  .nav-links li, .utility-links li{display:flex;align-items:center;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--sans);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:var(--serif);
    color:var(--navy);
    margin:0;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font-family:var(--sans);cursor:pointer;}
  ::selection{background:var(--compass-orange);color:#fff;}

  .wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    text-transform:uppercase;font-size:11.5px;letter-spacing:0.14em;
    color:var(--compass-orange);font-weight:700;
  }

  /* ---------- Utility bar ---------- */
  .utility-bar{
    background:var(--navy-deep);color:#cfd9e3;font-size:12.5px;
  }
  .utility-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 32px;max-width:1240px;margin:0 auto;
  }
  .utility-left{opacity:0.85;letter-spacing:0.02em;}
  .utility-right{display:flex;align-items:center;gap:22px;}
  .utility-links{display:flex;gap:20px;}
  .utility-links a{opacity:0.85;transition:opacity .2s;}
  .utility-links a:hover{opacity:1;color:var(--compass-orange);}
  .utility-social{display:flex;gap:12px;}
  .utility-social a{opacity:0.85;transition:opacity .2s;}
  .utility-social a:hover{opacity:1;}

  /* ---------- Main nav ---------- */
  .main-nav{
    background:#fff;border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:200;
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 32px;max-width:1240px;margin:0 auto;gap:24px;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand .compass-icon{width:42px;height:42px;flex:none;}
  .brand .brand-logo-fallback,
  .brand .custom-logo-link{display:flex;align-items:center;}
  .brand .brand-logo-fallback,
  .brand .custom-logo{height:44px;width:auto;max-width:220px;object-fit:contain;display:block;}
  .brand-text{display:flex;flex-direction:column;line-height:1;}
  .brand-text .brand-name{
    font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:0.04em;
    color:var(--navy);
  }
  .brand-text .brand-tag{
    font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--mist);
    margin-top:3px;font-family:var(--sans);
  }
  .nav-links{display:flex;align-items:center;gap:26px;flex:1;justify-content:center;}
  .nav-links a{
    font-size:14.5px;font-weight:600;color:var(--navy);opacity:0.75;
    padding:6px 0;position:relative;transition:opacity .2s,color .2s;
  }
  .nav-links a:hover{opacity:1;color:var(--sail-blue);}
  .nav-links a.active{opacity:1;color:var(--sail-blue-dark);}
  .nav-links a.active::after{
    content:'';position:absolute;left:0;right:0;bottom:-14px;height:2px;background:var(--compass-orange);
  }
  .nav-actions{display:flex;align-items:center;gap:16px;}
  .nav-right{display:flex;align-items:center;gap:14px;}
  .icon-btn{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;background:#fff;
    transition:border-color .2s, background .2s;
  }
  .icon-btn:hover{border-color:var(--sail-blue);background:var(--paper-alt);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    border-radius:999px;font-weight:700;font-size:14px;border:none;
    padding:12px 22px;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px);}
  .btn-navy{background:var(--navy);color:#fff;}
  .btn-navy:hover{background:var(--sail-blue-dark);}
  .btn-blue{background:var(--sail-blue);color:#fff;}
  .btn-blue:hover{background:var(--sail-blue-dark);}
  .btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--navy);}
  .btn-outline:hover{background:var(--navy);color:#fff;}
  .btn-orange{background:var(--compass-orange);color:#fff;}
  .btn-orange:hover{background:#c94a25;}
  .btn-sm{padding:9px 16px;font-size:13px;}
  .hamburger{display:none;background:none;border:none;padding:6px;}
  .hamburger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;min-height:560px;display:flex;align-items:center;
    background:linear-gradient(120deg, rgba(10,30,50,0.35), rgba(10,30,50,0.05) 55%),
      url('https://images.unsplash.com/photo-1500627964684-141351970a7f?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;
    color:#fff;
  }
  .hero-inner{
    max-width:1240px;margin:0 auto;padding:60px 32px;width:100%;
    display:flex;justify-content:flex-end;
  }
  .hero-content{
    max-width:540px;background:rgba(10,26,44,0.34);backdrop-filter:blur(6px);
    padding:38px 40px;border-radius:var(--radius-lg);
  }
  .hero-content h1{
    color:#fff;font-size:46px;line-height:1.08;margin-bottom:16px;
  }
  .hero-content h1 .accent{color:#8FC1F2;}
  .hero-content p{font-size:16px;color:#E4ECF4;margin-bottom:26px;max-width:460px;}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

  /* ---------- Quick nav ---------- */
  .quick-nav-wrap{margin-top:-46px;position:relative;z-index:20;padding:0 32px;}
  .quick-nav{
    max-width:1176px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);padding:26px 20px;
    display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  }
  .quick-item{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
    padding:10px 6px;border-radius:var(--radius-md);cursor:pointer;transition:background .2s;
  }
  .quick-item:hover{background:var(--paper-alt);}
  .quick-item .qi-icon{
    width:44px;height:44px;border-radius:50%;background:var(--paper-alt);
    display:flex;align-items:center;justify-content:center;color:var(--sail-blue);
    transition:transform .25s ease;
  }
  .quick-item .qi-icon svg{width:22px;height:22px;}
  .quick-item:hover .qi-icon{transform:scale(1.1) rotate(-4deg);}
  .quick-item .qi-title{font-weight:700;font-size:14px;color:var(--navy);}
  .quick-item .qi-sub{font-size:12px;color:var(--mist);}

  /* ---------- Shared accent colors for icon badges ----------
     Reused by .qi-icon (quick-nav tiles) and .section-icon (section
     headings) so every icon across the homepage pulls from one palette. */
  .qi-icon.c-blue,   .section-icon.c-blue  { background:rgba(27,95,166,.12);  color:var(--sail-blue); }
  .qi-icon.c-orange, .section-icon.c-orange{ background:rgba(232,92,51,.12);  color:var(--compass-orange); }
  .qi-icon.c-navy,   .section-icon.c-navy  { background:rgba(15,42,68,.10);   color:var(--navy); }
  .qi-icon.c-teal,   .section-icon.c-teal  { background:rgba(30,143,130,.13); color:#1E8F82; }
  .qi-icon.c-gold,   .section-icon.c-gold  { background:rgba(201,154,46,.15); color:#B4842A; }
  .qi-icon.c-coral,  .section-icon.c-coral { background:rgba(214,90,90,.13);  color:#C94F4F; }
  .qi-icon.c-green,  .section-icon.c-green { background:rgba(62,142,90,.14);  color:#3E8E5A; }

  /* ---------- Section heading icon badges ---------- */
  .section-head h2, h2.section-title-solo{display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:6px;}
  .section-icon{
    width:38px;height:38px;border-radius:12px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .section-icon svg{width:20px;height:20px;}
  /* "Marketplace — Buy & Sell" style titles: keep inline on desktop, but on
     mobile the h2 wraps as a flex container (see rule above) which used to
     let the tail text run off the edge of the screen. title-line2 gives it
     a clean, deliberate second line on narrow screens instead. */
  .title-line2{display:inline;}

  /* Solo section titles (Interview of the Week, CauseX) live outside the
     .section-head wrapper other categories use, so they need their own
     matching font-size and breathing room above the content below them. */
  h2.section-title-solo{font-size:29px;margin-bottom:26px;}

  /* ---------- Hero live stats ---------- */
  .hero-stats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap;}
  .stat-pill{display:flex;flex-direction:column;}
  .stat-pill strong{font-family:var(--serif);font-size:23px;color:#fff;line-height:1;}
  .stat-pill span{font-size:11px;color:#C7D3E0;text-transform:uppercase;letter-spacing:.06em;margin-top:5px;}

  /* ---------- Sections ---------- */
  section.block{padding:64px 0 12px;}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;
    flex-wrap:wrap;gap:10px;
  }
  .section-head h2{font-size:29px;}
  .view-all{font-size:14px;font-weight:700;color:var(--sail-blue);white-space:nowrap;}
  .view-all:hover{color:var(--compass-orange);}

  .content-grid{
    display:grid;grid-template-columns:2fr 1fr;gap:34px;align-items:start;
  }
  .stories-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

  .card{
    background:#fff;border-radius:var(--radius-md);overflow:hidden;
    box-shadow:var(--shadow-card);border:1px solid var(--line);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -16px rgba(15,42,68,0.25);}
  .card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-alt);}
  .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .card:hover .card-img img{transform:scale(1.06);}
  .badge{
    position:absolute;top:12px;left:12px;background:var(--navy);color:#fff;
    font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    padding:6px 11px;border-radius:999px;
  }
  .badge.orange{background:var(--compass-orange);}
  .badge.blue{background:var(--sail-blue);}
  .card-body{padding:18px 18px 20px;}
  .card-body h3{font-size:19px;line-height:1.28;margin-bottom:8px;}
  .card-body p.excerpt{font-size:14px;color:var(--mist);margin:0 0 14px;}
  .author-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mist);}
  .avatar{
    width:30px;height:30px;border-radius:50%;background:var(--sail-blue);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;
  }

  /* Interview card */
  .interview-card{
    background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);
    box-shadow:var(--shadow-card);
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  }
  .interview-img{position:relative;min-height:340px;}
  .interview-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .quote-badge{
    position:absolute;bottom:-20px;left:20px;width:44px;height:44px;border-radius:50%;
    background:var(--compass-orange);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 14px -4px rgba(232,92,51,0.6);font-size:20px;font-family:Georgia,serif;
  }
  .interview-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
  .interview-body .lbl{font-size:12px;color:var(--mist);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;}
  .interview-body h3{font-size:23px;margin:8px 0 12px;line-height:1.25;}
  .interview-body p{font-size:14.5px;color:var(--mist);margin:0 0 18px;line-height:1.6;}
  .link-arrow{font-weight:700;color:var(--sail-blue);font-size:14px;}
  .link-arrow:hover{color:var(--compass-orange);}
  @media (max-width:820px){
    .interview-card{grid-template-columns:1fr;}
    .interview-img{min-height:0;aspect-ratio:16/10;}
  }

  /* Events sidebar */
  .events-list{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
  .event-item{
    display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:14px;align-items:center;transition:border-color .2s, box-shadow .2s;
  }
  .event-item:hover{border-color:var(--sail-blue);box-shadow:var(--shadow-card);}
  .event-date{
    flex:none;width:56px;height:56px;border-radius:10px;background:var(--navy);color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .event-date .mon{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--compass-orange);}
  .event-date .day{font-size:19px;font-weight:700;line-height:1;}
  .event-info h4{font-size:14.5px;margin-bottom:3px;}
  .event-info .meta{font-size:12.5px;color:var(--mist);}

  /* Marketplace */
  .market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .market-card .card-body{padding:14px 15px 16px;}
  .market-card h3{font-size:16px;margin-bottom:4px;}
  .market-loc{font-size:12.5px;color:var(--mist);display:flex;align-items:center;gap:6px;margin-bottom:4px;}
  .price-tag{font-weight:700;color:var(--sail-blue-dark);font-size:14px;}

  /* Watersports */
  .water-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .water-card .card-img{aspect-ratio:5/4;}
  .water-card .card-body{padding:14px 16px 18px;}

  /* partners */
  .partners-panel{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);padding:30px 26px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }
  .partner-logo{
    font-family:var(--serif);font-weight:700;font-size:19px;color:var(--navy);opacity:0.55;
    letter-spacing:0.02em;transition:opacity .2s;
  }
  .partner-logo:hover{opacity:1;color:var(--sail-blue);}

  /* CauseX */
  .causex-card{
    display:grid;grid-template-columns:1fr 1.1fr;gap:0;border-radius:var(--radius-md);overflow:hidden;
    border:1px solid var(--line);box-shadow:var(--shadow-card);background:#fff;
  }
  .causex-img{position:relative;min-height:300px;max-height:400px;background:var(--paper-alt);}
  .causex-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .causex-img-fallback{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(62,142,90,.14),rgba(30,143,130,.10));
  }
  .causex-img-fallback .section-icon{width:64px;height:64px;}
  .causex-img-fallback .section-icon svg{width:32px;height:32px;}
  .causex-copy{padding:32px 36px;display:flex;flex-direction:column;justify-content:center;gap:12px;}
  .causex-copy h3{font-size:22px;line-height:1.25;}
  .causex-copy p{font-size:14.5px;color:var(--mist);line-height:1.6;margin:0;}

  /* Two column layout right rail */
  .right-rail{display:flex;flex-direction:column;gap:40px;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-deep);color:#c7d3de;margin-top:70px;}
  .footer-top{
    max-width:1240px;margin:0 auto;padding:60px 32px 34px;
    display:grid;grid-template-columns:1.4fr 0.9fr 0.9fr 0.9fr 0.9fr 1.3fr;gap:30px;
  }
  .footer-brand .brand-name{color:#fff;}
  .footer-brand .brand-tag{color:#93a2b3;}
  .footer-brand p{font-size:13.5px;color:#9DAAB8;margin-top:14px;line-height:1.6;}
  .footer-social{display:flex;gap:12px;margin-top:18px;}
  .footer-social a{
    width:34px;height:34px;border-radius:50%;border:1px solid #2C4256;display:flex;
    align-items:center;justify-content:center;transition:background .2s,border-color .2s;
  }
  .footer-social a:hover{background:var(--compass-orange);border-color:var(--compass-orange);}
  .footer-col h4{color:#fff;font-family:var(--sans);font-size:13.5px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;}
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .footer-col a{font-size:13.5px;color:#AEBACA;transition:color .2s;}
  .footer-col a:hover{color:#fff;}
  .footer-news h4{color:#fff;font-family:var(--sans);font-size:13.5px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;}
  .footer-news p{font-size:13px;color:#9DAAB8;margin-bottom:16px;}
  .news-form{display:flex;gap:8px;}
  .news-form input{
    flex:1;border-radius:999px;border:1px solid #2C4256;background:#0F2338;color:#fff;
    padding:11px 16px;font-size:13px;
  }
  .news-form input::placeholder{color:#7C8CA0;}
  .footer-bottom{
    border-top:1px solid #1D3247;padding:18px 32px;display:flex;justify-content:space-between;
    max-width:1240px;margin:0 auto;font-size:12px;color:#7C8CA0;flex-wrap:wrap;gap:8px;
  }
  .footer-bottom a{color:#7C8CA0;opacity:0.8;}
  .footer-bottom a:hover{opacity:1;color:#fff;}

  /* ---------- Generic inner page ---------- */
  .page-hero{
    background:var(--navy);color:#fff;padding:56px 0;
  }
  .page-hero .eyebrow{color:#8FC1F2;}
  .page-hero h1{color:#fff;font-size:36px;margin-top:8px;}
  .page-hero p{color:#C7D3E0;margin-top:10px;max-width:560px;font-size:15px;}
  .breadcrumb{font-size:13px;color:#9BB3C9;margin-bottom:14px;}
  .breadcrumb a:hover{color:#fff;}

  /* ---------- Single article body (news/story/interview/event/watersport/cause) ----------
     .wrap already sets the page's horizontal padding — article-wrap only adds
     the vertical spacing that single articles need, so the content never
     bleeds edge-to-edge on mobile the way it did before. */
  .article-wrap{max-width:820px;padding-top:40px;padding-bottom:70px;}

  /* Featured/hero image at the top of a single article: fixed, consistent
     size on every post instead of showing each upload at its native size. */
  .single-hero-img{
    aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-md);
    margin-bottom:28px;background:var(--paper-alt);
  }
  .single-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
  @media (max-width:760px){
    .single-hero-img{aspect-ratio:4/3;margin-bottom:20px;}
  }

  /* Images placed inside the article body (via the block/classic editor)
     all render at the same consistent width/style, whatever size they
     were uploaded at. */
  .article-body{font-size:16px;line-height:1.75;color:var(--ink);}
  .article-body img{
    width:100%;height:auto;display:block;border-radius:var(--radius-md);
    margin:26px 0;object-fit:cover;
  }
  .article-body figure{margin:26px 0;}
  .article-body figure img{margin:0;}
  .article-body figcaption{font-size:13px;color:var(--mist);text-align:center;margin-top:8px;}
  .article-body h2,.article-body h3{margin:32px 0 14px;}
  .article-body p{margin:0 0 18px;}
  .article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px;}
  .article-body a{color:var(--sail-blue);text-decoration:underline;}

  /* =========================================================
     Article page designs — selectable at
     wp-admin → SailX Settings → Article Layout.
     body.layout-classic / .layout-minimal / .layout-cinematic /
     .layout-sidebar is added by inc/article-layout-settings.php.
     Only "classic" is the original design; the rest re-arrange the
     exact same markup (.page-hero, .single-hero-img, .author-row,
     .article-body, .tag-row) so no template edits are needed to
     switch styles.
     ========================================================= */

  /* ---------- Minimal Editorial: no dark banner, light airy title ---------- */
  .layout-minimal .page-hero{
    background:transparent;padding:48px 0 22px;border-bottom:1px solid var(--line);
  }
  .layout-minimal .page-hero .breadcrumb{color:var(--mist);}
  .layout-minimal .page-hero .breadcrumb a:hover{color:var(--navy);}
  .layout-minimal .page-hero h1{color:var(--navy);font-size:34px;letter-spacing:-0.01em;}
  .layout-minimal .page-hero p{color:var(--mist);}
  .layout-minimal .article-wrap{padding-top:32px;}
  .layout-minimal .single-hero-img{aspect-ratio:16/9;border-radius:10px;}
  .layout-minimal .author-row{
    text-transform:uppercase;letter-spacing:0.06em;font-size:11.5px;font-weight:700;
    color:var(--navy);opacity:0.6;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px;
  }
  .layout-minimal .article-body{font-size:17px;}

  /* ---------- Wide Cinematic: full-bleed hero photo, narrow text column ---------- */
  .layout-cinematic .article-wrap{max-width:1120px;}
  .layout-cinematic .single-hero-img{aspect-ratio:21/9;margin-bottom:32px;}
  .layout-cinematic .author-row,
  .layout-cinematic .article-body,
  .layout-cinematic .tag-row{
    max-width:760px;margin-left:auto;margin-right:auto;
  }
  @media (max-width:900px){
    .layout-cinematic .single-hero-img{aspect-ratio:4/3;}
  }

  /* ---------- Sidebar: content left, sticky author/meta panel right ---------- */
  .layout-sidebar .article-wrap{
    max-width:1080px;
    display:grid;grid-template-columns:1fr 300px;column-gap:44px;row-gap:24px;align-items:start;
  }
  .layout-sidebar .single-hero-img{grid-column:1 / -1;grid-row:1;margin-bottom:6px;}
  .layout-sidebar .article-body{grid-column:1;grid-row:2;}
  .layout-sidebar .tag-row{grid-column:1;grid-row:3;}
  .layout-sidebar .author-row{
    grid-column:2;grid-row:2 / span 2;align-self:start;position:sticky;top:100px;
    flex-direction:column;align-items:flex-start;gap:6px;
    background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:20px;font-size:13px;
  }
  @media (max-width:900px){
    .layout-sidebar .article-wrap{display:block;max-width:820px;}
    .layout-sidebar .author-row{position:static;flex-direction:row;padding:0;background:none;border:none;}
  }

  .filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0;}
  .chip{
    padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;
    background:#fff;color:var(--navy);
  }
  .chip.active{background:var(--navy);color:#fff;border-color:var(--navy);}
  .listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:60px;}

  /* ---------- Forms ---------- */
  .form-page{padding:56px 0 90px;}
  .form-card{
    max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:38px 40px;
  }
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
  .field.full{grid-column:1/-1;}
  .field label{font-size:13px;font-weight:700;color:var(--navy);}
  .field input,.field select,.field textarea{
    border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;
    font-family:var(--sans);color:var(--ink);background:var(--paper);
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--sail-blue);background:#fff;
  }
  .field textarea{resize:vertical;min-height:100px;}
  .file-drop{
    border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
    font-size:13px;color:var(--mist);background:var(--paper);
  }
  .success-box{
    max-width:560px;margin:60px auto;text-align:center;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:44px 36px;
  }
  .success-box .check{
    width:56px;height:56px;border-radius:50%;background:#E9F5EC;color:#2F8F4E;display:flex;
    align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px;
  }

  /* ---------- Admin ---------- */
  .admin-login-wrap{
    min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy-deep);
    padding:20px;
  }
  .admin-login-card{
    background:#fff;border-radius:var(--radius-lg);padding:40px 38px;max-width:380px;width:100%;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
  }
  .admin-login-card h2{font-size:22px;margin-bottom:6px;}
  .admin-login-card p.sub{font-size:13px;color:var(--mist);margin-bottom:24px;}
  .admin-shell{min-height:100vh;display:flex;background:var(--paper-alt);}
  .admin-sidebar{
    width:250px;flex:none;background:var(--navy-deep);color:#C7D3E0;padding:26px 18px;
    display:flex;flex-direction:column;gap:4px;
  }
  .admin-sidebar .a-brand{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:26px;padding:0 8px;}
  .admin-sidebar .a-brand .compass-icon{width:30px;height:30px;}
  .admin-sidebar .a-brand span{font-family:var(--serif);font-size:18px;font-weight:700;}
  .a-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;color:#5C7186;margin:16px 10px 8px;}
  .a-link{
    padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:#C7D3E0;
    display:flex;align-items:center;justify-content:space-between;transition:background .15s,color .15s;
  }
  .a-link:hover{background:#122B45;color:#fff;}
  .a-link.active{background:var(--sail-blue);color:#fff;}
  .a-link .pill{background:var(--compass-orange);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;}
  .admin-main{flex:1;padding:30px 36px 60px;overflow-x:hidden;}
  .admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
  .admin-topbar h1{font-size:24px;}
  .stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:34px;}
  .stat-card{
    background:#fff;border-radius:var(--radius-md);padding:18px 16px;border:1px solid var(--line);
    box-shadow:var(--shadow-card);
  }
  .stat-card .num{font-size:26px;font-weight:700;color:var(--navy);font-family:var(--serif);}
  .stat-card .lbl{font-size:12px;color:var(--mist);margin-top:4px;}
  .admin-panel{
    background:#fff;border-radius:var(--radius-md);border:1px solid var(--line);box-shadow:var(--shadow-card);
    padding:24px 24px 10px;margin-bottom:28px;
  }
  .admin-panel h3{font-size:17px;margin-bottom:16px;}
  table.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;}
  table.admin-table th{
    text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--mist);
    border-bottom:1px solid var(--line);padding:10px 8px;
  }
  table.admin-table td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
  .status-pill{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
  .status-pill.pending{background:#FDF1E6;color:var(--compass-orange);}
  .status-pill.approved{background:#E9F5EC;color:#2F8F4E;}
  .status-pill.rejected{background:#FBEAEA;color:#C33;}
  .status-pill.published{background:#E7F0FA;color:var(--sail-blue-dark);}
  .row-actions{display:flex;gap:8px;}
  .row-actions button{
    border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:700;
  }
  .row-actions button.approve{color:#2F8F4E;border-color:#bfe4c9;}
  .row-actions button.approve:hover{background:#E9F5EC;}
  .row-actions button.reject{color:#C33;border-color:#f3c9c9;}
  .row-actions button.reject:hover{background:#FBEAEA;}
  .row-actions button.edit{color:var(--sail-blue-dark);border-color:#c7dcf0;}
  .row-actions button.edit:hover{background:#E7F0FA;}
  .empty-note{color:var(--mist);font-size:13.5px;padding:18px 4px;}
  .admin-toast{
    position:fixed;bottom:26px;right:26px;background:var(--navy);color:#fff;padding:13px 20px;
    border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,0.4);
    z-index:999;opacity:0;transform:translateY(10px);transition:opacity .25s, transform .25s;pointer-events:none;
  }
  .admin-toast.show{opacity:1;transform:translateY(0);}

  .hidden-admin-link{opacity:0.35;font-size:11px;}
  .hidden-admin-link:hover{opacity:0.9;}

  /* ---------- Responsive ---------- */
  @media (max-width:1080px){
    .stories-row{grid-template-columns:repeat(2,1fr);}
    .content-grid{grid-template-columns:1fr;}
    .market-grid{grid-template-columns:repeat(3,1fr);}
    .water-grid{grid-template-columns:repeat(2,1fr);}
    .quick-nav{grid-template-columns:repeat(3,1fr);}
    /* Keep the footer looking like columns (not one long vertical
       stack) down to tablet widths — it only drops to a single
       column at true mobile widths, in the 760px breakpoint below. */
    .footer-top{grid-template-columns:repeat(3,1fr);}
    .stat-grid{grid-template-columns:repeat(3,1fr);}
    .listing-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:760px){
    .wrap{padding:0 18px;}
    .utility-links{display:none;}
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
      align-items:flex-start;padding:14px 20px 20px;border-bottom:1px solid var(--line);gap:2px;
      box-shadow:0 20px 30px -20px rgba(0,0,0,0.2);}
    .nav-links.open{display:flex;}
    .nav-links a{width:100%;padding:11px 0;opacity:1;}
    .nav-links a.active::after{display:none;}
    .hamburger{display:block;}
    .nav-actions .btn-navy span.txt{display:none;}
    .title-sep{display:none;}
    .title-line2{display:block;margin-top:2px;}
    .hero{min-height:auto;}
    .hero-inner{padding:40px 18px;justify-content:center;}
    .hero-content{padding:26px 22px;max-width:100%;}
    .hero-content h1{font-size:32px;}
    .quick-nav-wrap{padding:0 18px;margin-top:-30px;}
    .quick-nav{grid-template-columns:repeat(2,1fr);padding:18px 12px;}
    .stories-row{grid-template-columns:1fr;}
    .market-grid{grid-template-columns:repeat(2,1fr);}
    .water-grid{grid-template-columns:1fr;}
    section.block{padding:44px 0 6px;}
    /* 2-column stack on mobile — columns are ordered in footer.php so
       each row pairs sections of similar length (Explore+Community are
       both long lists; Marketplace+Info are both short), instead of a
       single 1-item column sitting awkwardly next to a 4-item one. */
    .footer-top{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:32px;padding:44px 18px 20px;}
    .footer-brand,.footer-news{grid-column:1 / -1;}
    .causex-card{grid-template-columns:1fr;}
    .form-grid{grid-template-columns:1fr;}
    .form-card{padding:26px 20px;}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .admin-sidebar{position:fixed;left:-260px;top:0;bottom:0;z-index:500;transition:left .25s;}
    .admin-sidebar.open{left:0;}
    .admin-main{padding:18px 16px 50px;}
    .listing-grid{grid-template-columns:1fr;}
    .partners-panel{justify-content:center;}
  }

/* =========================================================
   Marketplace additions (categories, filters, single listing,
   pricing) — colors/fonts pulled from :root vars set in
   inc/marketplace-settings.php (wp_head), so Design Settings
   changes apply here automatically.
   ========================================================= */

.section-subtitle{color:var(--mist);margin:-8px 0 20px;font-size:15px;}

/* ---------- Category grid ---------- */
.market-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:24px 0 36px;}
.market-category-card{display:block;border-radius:var(--radius-md);overflow:hidden;background:#fff;box-shadow:var(--shadow-card);text-decoration:none;transition:transform .15s ease;}
.market-category-card:hover{transform:translateY(-3px);}
.mcc-img{height:130px;background-size:cover;background-position:center;background-color:var(--paper-alt);}
.mcc-img--placeholder{display:flex;align-items:center;justify-content:center;color:var(--sail-blue);}
.mcc-body{padding:14px 16px;}
.mcc-body h3{font-size:17px;margin:0 0 4px;color:var(--sailx-heading-color,var(--navy));}
.mcc-body p{font-size:13px;color:var(--mist);margin:0 0 8px;}
.mcc-count{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--sail-blue);font-weight:700;}

/* ---------- Filter bar ---------- */
.market-filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:14px;background:var(--paper-alt);border-radius:var(--radius-md);}
.market-filter-bar input[type="text"],
.market-filter-bar select{padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--line);font-size:14px;font-family:var(--sans);background:#fff;}
.market-filter-bar input[type="text"]{flex:1 1 220px;}

/* ---------- Listing card extras ---------- */
.market-card .card-img{position:relative;}
.badge{position:absolute;top:10px;z-index:2;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;}
.badge-price{right:10px;background:var(--sailx-button-bg,var(--sail-blue));}
.badge-featured{left:10px;background:var(--compass-orange);}
.market-cat-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sail-blue);font-weight:700;margin-bottom:4px;}
.market-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--mist);margin:4px 0 10px;}
.card-img--placeholder{display:flex;align-items:center;justify-content:center;height:100%;min-height:140px;color:var(--sail-blue);opacity:.5;background:var(--paper-alt);}

.btn-whatsapp{display:inline-block;background:#25D366;color:#fff;padding:9px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:700;text-decoration:none;}
.btn-whatsapp:hover{opacity:.9;}
.btn-block{display:block;width:100%;text-align:center;margin-top:8px;box-sizing:border-box;}
.btn-outline.btn-block{border:1px solid var(--line);color:var(--navy);padding:9px 14px;border-radius:var(--radius-sm);}

/* ---------- Category page ---------- */
.category-hero{background-size:cover;background-position:center;}
.category-desc{max-width:640px;color:var(--mist);}
.category-long-desc{max-width:760px;margin:0 0 24px;line-height:var(--sailx-line-height,1.6);}

/* ---------- Single listing ---------- */
.listing-single{padding:32px 0 60px;}
.listing-gallery-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-alt);margin-bottom:10px;}
.listing-gallery-main img{width:100%;max-height:480px;object-fit:cover;display:block;}
.listing-img-placeholder{min-height:320px;}
.listing-gallery-thumbs{display:flex;gap:8px;overflow-x:auto;}
.listing-gallery-thumbs img{width:84px;height:64px;object-fit:cover;border-radius:var(--radius-sm);}
.listing-layout{display:grid;grid-template-columns:2fr 1fr;gap:36px;margin-top:24px;}
.listing-meta-row{display:flex;align-items:center;gap:16px;margin:6px 0 18px;}
.listing-price{font-size:22px;font-weight:700;color:var(--sailx-button-bg,var(--sail-blue));}
.listing-location{color:var(--mist);}
.listing-description{line-height:var(--sailx-line-height,1.6);margin-bottom:20px;}
.listing-specs-table{width:100%;border-collapse:collapse;}
.listing-specs-table th,.listing-specs-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px;}
.listing-specs-table th{color:var(--mist);font-weight:600;width:40%;}
.listing-contact-card{background:var(--paper-alt);border-radius:var(--radius-md);padding:20px;position:sticky;top:20px;}
.listing-contact-card h3{margin-top:0;}
.seller-name{font-weight:600;margin:0 0 10px;}

/* ---------- Post an Ad form ---------- */
.sailx-ad-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sailx-ad-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--navy);}
.sailx-ad-form input,.sailx-ad-form select,.sailx-ad-form textarea{font-family:var(--sans);padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line);font-weight:400;}
.sailx-ad-form button{grid-column:1/-1;justify-self:start;background:var(--sailx-button-bg,var(--sail-blue));color:#fff;border:none;padding:12px 26px;border-radius:var(--radius-sm);font-weight:700;}
.sailx-ad-packages{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 16px;}
.sailx-package-option{display:block;font-weight:400;margin:6px 0;}
.sailx-ad-instructions,.sailx-ad-disclaimer{grid-column:1/-1;color:var(--mist);font-size:13.5px;}
.sailx-ad-success{padding:20px;background:var(--paper-alt);border-radius:var(--radius-md);}

/* ---------- Pricing ---------- */
.sailx-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0;}
.pricing-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-card);}
.pricing-card--highlight{border-color:var(--sailx-button-bg,var(--sail-blue));box-shadow:0 12px 30px -14px rgba(27,95,166,.35);}
.pricing-amount{font-size:32px;font-weight:700;color:var(--sailx-heading-color,var(--navy));margin:6px 0 10px;}
.pricing-desc{color:var(--mist);font-size:13.5px;}
.pricing-features{list-style:none;padding:0;margin:14px 0 20px;font-size:13.5px;}
.pricing-features li{padding:5px 0;border-top:1px solid var(--line);}

@media (max-width:820px){
  .listing-layout{grid-template-columns:1fr;}
  .listing-contact-card{position:static;}
  .sailx-ad-form{grid-template-columns:1fr;}
}

/* ---------- Mobile marketplace category drawer ---------- */
.sailx-mobile-cat-bar{display:none;}
.sailx-cat-drawer-toggle{
  display:none;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 16px;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--navy-deep);cursor:pointer;
}
.sailx-cat-drawer-toggle-icon{display:flex;flex-direction:column;gap:3px;width:18px;}
.sailx-cat-drawer-toggle-icon span{display:block;width:100%;height:2px;background:var(--navy-deep);border-radius:2px;}
.sailx-cat-drawer-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,20,30,0.45);z-index:900;opacity:0;
  transition:opacity .25s;
}
.sailx-cat-drawer-overlay.open{display:block;opacity:1;}
.sailx-cat-drawer{
  position:fixed;top:0;bottom:0;left:0;width:82%;max-width:320px;background:#fff;z-index:901;
  transform:translateX(-100%);transition:transform .28s ease;box-shadow:20px 0 40px rgba(0,0,0,0.2);
  display:flex;flex-direction:column;overflow-y:auto;
}
.sailx-cat-drawer.open{transform:translateX(0);}
.sailx-cat-drawer-head{
  display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--line);font-family:var(--sans);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--navy-deep);
}
.sailx-cat-drawer-close{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--navy-deep);padding:4px 8px;}
.sailx-cat-drawer ul{list-style:none;margin:0;padding:8px 8px 24px;}
.sailx-cat-drawer li a{
  display:block;padding:13px 12px;font-size:15px;color:var(--navy-deep);border-radius:8px;
}
.sailx-cat-drawer li a:hover,
.sailx-cat-drawer li a:focus{background:#F3F6F9;}
body.sailx-drawer-open{overflow:hidden;}

/* ---------- Newsletter inline status ---------- */
.sailx-newsletter-msg{font-size:13px;margin-top:10px;min-height:1em;}
.sailx-newsletter-msg.is-success{color:#7CE0B8;}
.sailx-newsletter-msg.is-error{color:#FF9A8B;}

/* ---------- Mobile footer spacing polish ---------- */
@media (max-width:760px){
  .sailx-mobile-cat-bar{display:block;margin:16px 0 4px;}
  .sailx-cat-drawer-toggle{display:flex;}
  .footer-col,.footer-brand,.footer-news{padding-bottom:8px;}
  .footer-top > *{width:100%;max-width:100%;}
}

/* ---------- Related Articles (end of every article page) ---------- */
.sailx-related-articles{padding-top:36px;margin-top:36px;border-top:1px solid var(--line);}
.sailx-related-heading{font-family:var(--serif,serif);font-size:22px;margin:0 0 18px;color:var(--navy-deep);}
.sailx-related-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  max-width:640px;
}
.sailx-related-card{display:block;text-decoration:none;color:inherit;}
.sailx-related-thumb{
  aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#F3F6F9;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.sailx-related-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sailx-related-thumb-fallback{width:36px;height:36px;opacity:.5;}
.sailx-related-title{
  font-size:14.5px;font-weight:600;color:var(--navy-deep);line-height:1.35;margin-bottom:4px;
}
.sailx-related-card:hover .sailx-related-title{color:var(--sail-blue);}
.sailx-related-date{font-size:12px;color:var(--mist);}

@media (max-width:520px){
  .sailx-related-grid{grid-template-columns:1fr;max-width:100%;}
}

/* ---------- Marketplace listing image lightbox ---------- */
.sailx-lightbox-trigger{
  display:block;width:100%;height:100%;padding:0;margin:0;border:none;background:none;cursor:zoom-in;
}
.listing-gallery-main .sailx-lightbox-trigger{position:relative;}
.listing-gallery-thumbs .sailx-lightbox-trigger{
  width:84px;height:64px;flex:none;border-radius:var(--radius-sm);overflow:hidden;
}
.listing-gallery-thumbs .sailx-lightbox-trigger img{width:100%;height:100%;object-fit:cover;display:block;}
.sailx-lightbox-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,14,20,0.92);z-index:1000;
  align-items:center;justify-content:center;
}
.sailx-lightbox-overlay.open{display:flex;}
.sailx-lightbox-img{max-width:88vw;max-height:86vh;object-fit:contain;border-radius:6px;}
.sailx-lightbox-close,.sailx-lightbox-prev,.sailx-lightbox-next{
  position:absolute;background:rgba(255,255,255,0.12);border:none;color:#fff;cursor:pointer;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.sailx-lightbox-close{top:20px;right:20px;width:42px;height:42px;font-size:26px;line-height:1;}
.sailx-lightbox-prev,.sailx-lightbox-next{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:18px;}
.sailx-lightbox-prev{left:16px;}
.sailx-lightbox-next{right:16px;}
.sailx-lightbox-close:hover,.sailx-lightbox-prev:hover,.sailx-lightbox-next:hover{background:rgba(255,255,255,0.24);}
@media (max-width:600px){
  .sailx-lightbox-prev,.sailx-lightbox-next{width:40px;height:40px;}
}