/* SATC shared theme components.
   Pages compose these classes in their markup instead of styling their own
   headings, kickers, descriptions and buttons. Font sizes come from the fluid
   scale in typography.css; text colors follow the surface rules in
   brand-2026.css. This file owns structure, spacing, decoration and buttons. */

/* Spacing between a kicker and the title under it, site-wide. */
:root{--satc-kicker-gap:5px}

/* Section head: kicker + title + description, optionally beside an action. */
.satc-section-head{margin-bottom:clamp(28px,3vw,42px)}
.satc-section-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.satc-section-head--split>:first-child{flex:1 1 420px;max-width:760px}

.satc-kicker{display:flex;align-items:center;gap:12px;width:fit-content;margin:0 0 var(--satc-kicker-gap)}
.satc-kicker::before{content:"";flex:0 0 32px;height:1px;background:currentColor}
.satc-kicker:has(>i)::before{display:none}
.satc-kicker>i{color:var(--satc-gold)}

.satc-title{margin:0}
.satc-title>span{color:var(--satc-wild-hillside)}

.satc-desc{max-width:68ch;margin-bottom:0}

.satc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.satc-actions--center{justify-content:center}

/* Buttons: one geometry, three variants (primary, secondary, outline).
   Each variant only swaps three color variables, so a context such as
   .satc-on-dark can retune it. Older action classes in the templates are
   mapped onto the same variants below, so every button on the site is one
   of the three. */
.satc-btn{
  --satc-btn-bg:transparent;
  --satc-btn-line:currentColor;
  --satc-btn-fg:inherit;
  min-height:var(--btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--pc-space-xs);
  padding:var(--btn-py) var(--btn-px);
  border:1px solid var(--satc-btn-line);
  border-radius:var(--radius-control);
  background:var(--satc-btn-bg);
  color:var(--satc-btn-fg);
  -webkit-text-fill-color:currentColor;
  font-weight:var(--btn-weight);
  line-height:1.45;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) ease;
}
.satc-btn:hover,.satc-btn:focus-visible{transform:translateY(var(--btn-lift))}

/* Primary (--solid is the older name of the same variant). */
.satc-btn:is(.satc-btn--primary,.satc-btn--solid){--satc-btn-bg:var(--btn-primary-bg);--satc-btn-line:var(--btn-primary-bg);--satc-btn-fg:var(--btn-primary-fg)}
.satc-btn:is(.satc-btn--primary,.satc-btn--solid):is(:hover,:focus-visible){--satc-btn-bg:var(--btn-primary-bg-hover);--satc-btn-line:var(--btn-primary-bg-hover)}

/* Secondary. */
.satc-btn.satc-btn--secondary{--satc-btn-bg:var(--btn-secondary-bg);--satc-btn-line:var(--btn-secondary-bg);--satc-btn-fg:var(--btn-secondary-fg)}
.satc-btn.satc-btn--secondary:is(:hover,:focus-visible){--satc-btn-bg:var(--btn-secondary-bg-hover);--satc-btn-line:var(--btn-secondary-bg-hover);--satc-btn-fg:var(--btn-secondary-fg-hover)}

/* Outline. */
.satc-btn.satc-btn--outline{--satc-btn-bg:transparent;--satc-btn-line:var(--btn-outline-line);--satc-btn-fg:var(--btn-outline-fg)}
.satc-btn.satc-btn--outline:is(:hover,:focus-visible){--satc-btn-bg:var(--btn-outline-fill-hover);--satc-btn-line:var(--btn-outline-fill-hover);--satc-btn-fg:var(--btn-outline-fg-hover)}

/* On dark surfaces and photography the outline turns white. */
.satc-on-dark .satc-btn.satc-btn--outline{--satc-btn-bg:transparent;--satc-btn-line:var(--btn-outline-dark-line);--satc-btn-fg:var(--btn-outline-dark-fg)}
.satc-on-dark .satc-btn.satc-btn--outline:is(:hover,:focus-visible){--satc-btn-bg:var(--btn-outline-dark-fill-hover);--satc-btn-line:var(--btn-outline-dark-fill-hover);--satc-btn-fg:var(--btn-outline-dark-fg-hover)}

/* Older action classes, each assigned to one of the three variants. */
.shared-layout :is(
  .btn.dark,.about-cta,.contact-form button[type="submit"],.auth-submit,.model-info>a,
  .faq-layout aside a,.project-inquiry button,.opportunity-submit,.interest-submit,
  .contact-box a,.model-card-link,.archive-search button
),
.shared-layout :is(
  .projects-primary-btn,.project-hero-btn,.investor-hero-action
),
.shared-layout :is(
  .btn.light,.projects-all,.profile-download a,.shared-site-header .outline,.project-showcase-controls button
){
  min-height:var(--btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--pc-space-xs);
  padding:var(--btn-py) var(--btn-px);
  border:1px solid var(--legacy-btn-line);
  border-radius:var(--radius-control);
  background:var(--legacy-btn-bg);
  color:var(--legacy-btn-fg);
  -webkit-text-fill-color:var(--legacy-btn-fg);
  font-weight:var(--btn-weight);
  text-decoration:none;
  transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease;
}
.shared-layout :is(
  .btn.dark,.about-cta,.contact-form button[type="submit"],.auth-submit,.model-info>a,
  .faq-layout aside a,.project-inquiry button,.opportunity-submit,.interest-submit,
  .contact-box a,.model-card-link,.archive-search button
){--legacy-btn-bg:var(--btn-primary-bg);--legacy-btn-line:var(--btn-primary-bg);--legacy-btn-fg:var(--btn-primary-fg)}
.shared-layout :is(
  .btn.dark,.about-cta,.contact-form button[type="submit"],.auth-submit,.model-info>a,
  .faq-layout aside a,.project-inquiry button,.opportunity-submit,.interest-submit,
  .contact-box a,.model-card-link,.archive-search button
):is(:hover,:focus-visible){--legacy-btn-bg:var(--btn-primary-bg-hover);--legacy-btn-line:var(--btn-primary-bg-hover)}
/* Hero call-to-action buttons use the unified primary button (they were secondary gold). */
.shared-layout :is(.projects-primary-btn,.project-hero-btn,.investor-hero-action){--legacy-btn-bg:var(--btn-primary-bg);--legacy-btn-line:var(--btn-primary-bg);--legacy-btn-fg:var(--btn-primary-fg)}
.shared-layout :is(.projects-primary-btn,.project-hero-btn,.investor-hero-action):is(:hover,:focus-visible){--legacy-btn-bg:var(--btn-primary-bg-hover);--legacy-btn-line:var(--btn-primary-bg-hover);--legacy-btn-fg:var(--btn-primary-fg)}
.shared-layout :is(.btn.light,.projects-all,.profile-download a,.shared-site-header .outline,.project-showcase-controls button){--legacy-btn-bg:transparent;--legacy-btn-line:var(--btn-outline-line);--legacy-btn-fg:var(--btn-outline-fg)}
.shared-layout :is(.btn.light,.projects-all,.profile-download a,.shared-site-header .outline,.project-showcase-controls button):is(:hover,:focus-visible){--legacy-btn-bg:var(--btn-outline-fill-hover);--legacy-btn-line:var(--btn-outline-fill-hover);--legacy-btn-fg:var(--btn-outline-fg-hover)}
/* Outline over the header glass, hero photography and dark panels. */
.shared-layout :is(.shared-site-header,.hero-slider,.satc-on-dark) :is(.btn.light,.outline,.profile-download a){--legacy-btn-line:var(--btn-outline-dark-line);--legacy-btn-fg:var(--btn-outline-dark-fg)}
.shared-layout :is(.shared-site-header,.hero-slider,.satc-on-dark) :is(.btn.light,.outline,.profile-download a):is(:hover,:focus-visible){--legacy-btn-bg:var(--btn-outline-dark-fill-hover);--legacy-btn-line:var(--btn-outline-dark-fill-hover);--legacy-btn-fg:var(--btn-outline-dark-fg-hover)}
/* Icon-only arrows: a square outline button of the same height. */
.shared-layout .project-showcase-controls button{width:var(--btn-h);padding:0}

/* `translate` (not `transform`) so the nudge composes with the LTR arrow
   mirror that localization.css applies through `transform`. */
.satc-btn :is(.fa-arrow-left,.fa-arrow-right){transition:translate var(--motion-fast) ease}
.satc-btn:hover .fa-arrow-left{translate:-4px 0}
[dir=ltr] .satc-btn:hover .fa-arrow-left{translate:4px 0}


/* Image, badge and logo links: Bootstrap's link underline must not reach
   their badges, numbers or image alt text. */
:is(.project-media,.related-project-media,.article-card-media,.card-media,.news-media,.footer-logo,.footer-social>a){text-decoration:none}

/* Card titles stop at two lines with an ellipsis, so cards in one row keep
   the same rhythm whatever the title length. */
:is(.news-card,.article-card,.project-card,.archive-project-card,.related-project-card) :is(h2,h3){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* Project and news titles stand apart from their description: bold, in the
   dark Root Brew of the redesign, and filling
   each line instead of the balanced wrap used for large headings. The
   surface class lifts this above the older per-page card title rules. */
.shared-layout main :is(.news-card,.article-card,.project-card,.archive-project-card,.related-project-card).satc-surface :is(h2,h3),
.shared-layout main :is(.news-card,.article-card,.project-card,.archive-project-card,.related-project-card).satc-surface :is(h2,h3) a{font-weight:700;color:var(--satc-root-brew);-webkit-text-fill-color:var(--satc-root-brew);text-wrap:wrap}

/* Platforms Code card spacing: 16px padding on phones, 24px on tablets and
   32px on desktop (--card-padding in design-tokens.css). */
.shared-layout main :is(.news-content,.article-card-content,.archive-project-card .card-copy,.principle-card,.payment-card,.contact-panel,.contact-form-wrap){padding:var(--card-padding)!important}

/* Floating actions: WhatsApp and back-to-top stack in one corner (the
   inline end) at 48px, so they cover less of the page than two separate
   60px buttons on opposite corners. */
.shared-layout :is(.site-whatsapp,.site-back-to-top){width:48px;min-width:48px;height:48px;left:auto;right:auto;inset-inline-end:var(--pc-space-3xl)}
.shared-layout .site-back-to-top{bottom:var(--pc-space-3xl)}
.shared-layout .site-whatsapp{bottom:calc(var(--pc-space-3xl) + 48px + var(--pc-space-lg))}
.shared-layout .site-whatsapp i{font-size:22px}
@media(max-width:800px){
  .shared-layout :is(.site-whatsapp,.site-back-to-top){width:44px;min-width:44px;height:44px;inset-inline-end:var(--pc-space-xl)}
  .shared-layout .site-back-to-top{bottom:max(var(--pc-space-xl),env(safe-area-inset-bottom))}
  .shared-layout .site-whatsapp{bottom:calc(max(var(--pc-space-xl),env(safe-area-inset-bottom)) + 44px + var(--pc-space-md))}
}

/* Edges that a shadow used to draw (shadows are gone site-wide): a thin
   border in the news card colour. The project hero facts keep their lower
   edge open, since that strip docks into the white section below. */
.shared-layout .projects-stats .projects-page-wrap,
.shared-layout .site-confirm-dialog{border:1px solid #e2d8ca}
.shared-layout .project-hero-facts.satc-surface{border:1px solid #e2d8ca;border-bottom:0}

/* Primary action on the dark booking / inquiry panel (unit and project
   pages): the brown primary vanished on the brown panel, so it reverses to
   white with brown text, gold on hover. */
.shared-layout .project-inquiry :is(.model-card-link,button[type="submit"],.satc-btn--primary){--legacy-btn-bg:var(--satc-white);--legacy-btn-line:var(--satc-white);--legacy-btn-fg:var(--satc-root-brew);--satc-btn-bg:var(--satc-white);--satc-btn-line:var(--satc-white);--satc-btn-fg:var(--satc-root-brew);background:var(--satc-white)!important;border-color:var(--satc-white)!important;color:var(--satc-root-brew)!important;-webkit-text-fill-color:var(--satc-root-brew)}
.shared-layout .project-inquiry :is(.model-card-link,button[type="submit"],.satc-btn--primary):is(:hover,:focus-visible){background:var(--satc-veiling-waterfalls)!important;border-color:var(--satc-veiling-waterfalls)!important}

/* Spam trap fields: invisible and untouchable without being pushed off
   screen. The old left:-10000px widened Arabic (RTL) pages to 10,000px,
   because RTL pages can scroll toward the left. */
.hp-field{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;opacity:0!important;pointer-events:none!important}