/* ============================================================
   CloudD10 — Custom overrides  (v1.7.7)
   ============================================================ */

/* ── 1. CTA banner: contained card, kept green ──────────────
   site.css already paints .site-cta-banner with the accent
   green. All we do here is constrain its width and round its
   corners so it reads as a card rather than a full-bleed band.
   We deliberately do NOT touch `background` — leaving site.css
   to win the specificity battle. (Earlier versions set
   `background: transparent` on `section.site-cta-banner`
   which silently broke the green fill.) */
   
.site-cta-banner {
    max-width:    1200px;
    margin-left:  auto;
    margin-right: auto;
    margin-top:   24px;
    margin-bottom: 48px;
    border-radius: 28px;
    padding:       72px 56px;
}
@media (max-width: 720px) {
    .site-cta-banner { padding: 48px 24px; border-radius: 20px; margin-bottom: 32px; }
}

/* ── 2. Centre standalone section headings ──────────────────
   Centres eyebrow / title / sub-text that introduce a card
   grid. Titles inside .card (e.g. "Need a domain?") are
   deliberately excluded so that layout stays left-aligned.    */
.site-section .site-section-head:not(.card .site-section-head) {
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
    max-width:    640px;
}
.site-section .site-section-eyebrow:not(.card .site-section-eyebrow) {
    display:    block;
    text-align: center;
}
.site-section .site-section-title:not(.card .site-section-title) {
    text-align: center;
}
.site-section .site-section-sub:not(.card .site-section-sub) {
    text-align:   center;
    max-width:    640px;
    margin-left:  auto;
    margin-right: auto;
}

/* ── 3. Footer address ──────────────────────────────────────
   Styled for the <address> tag added in _garden_footer.php.
   Populated from Admin → Settings → General → Billing address */
.site-foot-address {
    font-size:   13px;
    opacity:     0.55;
    margin-top:  10px;
    max-width:   260px;
    line-height: 1.65;
    font-style:  normal;      /* override browser default italic */
    white-space: pre-line;    /* preserves line-breaks from textarea */
    color:       var(--garden-text);
}

/* ── 4. "Trusted by..." logo strip (v1.7.5) ─────────────────
   Green accent strip with white logos that scroll. Replaces
   the dark-navy strip which clashed with the warm palette.
   Markup lives in home.php; this just themes it.             */
.cd10-logo-strip {
    background: var(--garden-accent);
    border-radius: 20px;
    padding: 28px 0;
    overflow: hidden;
    position: relative;
}
/* Soft fade-out at the strip edges so logos don't pop in/out abruptly */
.cd10-logo-strip::before,
.cd10-logo-strip::after {
    content: "";
    position: absolute; top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.cd10-logo-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--garden-accent), transparent);
}
.cd10-logo-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--garden-accent), transparent);
}
.cd10-logo-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: cd10-scroll 36s linear infinite;
}
.cd10-logo-track:hover { animation-play-state: paused; }
.cd10-logo-item {
    padding: 0 36px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    font-family: 'Fraunces', serif;
    letter-spacing: 0.2px;
}
.cd10-logo-item:last-child { border-right: none; }
@keyframes cd10-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 720px) {
    .cd10-logo-strip { padding: 22px 0; border-radius: 14px; }
    .cd10-logo-item { font-size: 13px; padding: 0 24px; }
    .cd10-logo-strip::before, .cd10-logo-strip::after { width: 32px; }
}

/* ── 5. Help-page FAQ list (v1.7.7) ─────────────────────────
   Each FAQ section on /help renders a list of <details> cards.
   The list itself caps at a comfortable reading width and
   centers so the questions don't slam against the left edge
   of the 1200px section. Heading uses .site-section-head
   (centred by rule above), this is the list under it.        */
.site-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── 6. Active nav highlight (v1.7.7) ───────────────────────
   The current page's nav link gets a soft underline + full
   opacity. Implemented via aria-current="page" set in
   _garden_nav.php — purely presentational here. */
.site-bar-links a[aria-current="page"] {
    opacity: 1;
    color: var(--garden-text);
    position: relative;
}
.site-bar-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 2px;
    background: var(--garden-accent);
    border-radius: 2px;
}

/* ── 7. Domain-search progress UI (v1.7.7) ──────────────────
   When a search is in flight, render an indeterminate
   progress bar above the results area + a few skeleton rows
   so the user can see the shape of what's coming. */
.domain-progress {
    height: 3px;
    background: var(--garden-soft);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    margin-bottom: 14px;
}
.domain-progress-bar {
    position: absolute;
    top: 0; left: -30%; bottom: 0;
    width: 30%;
    background: var(--garden-accent);
    border-radius: 3px;
    animation: domain-progress-slide 1.1s ease-in-out infinite;
}
@keyframes domain-progress-slide {
    0%   { left: -30%; width: 30%; }
    50%  { left:  35%; width: 40%; }
    100% { left: 100%; width: 30%; }
}
.domain-skeleton-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px;
    border-bottom: 1px solid var(--garden-border);
    gap: 12px;
}
.domain-skeleton-row:last-child { border-bottom: none; }
.domain-skeleton-bar {
    height: 14px;
    background: linear-gradient(90deg,
        var(--garden-soft) 0%,
        var(--garden-card) 50%,
        var(--garden-soft) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: domain-skeleton-shimmer 1.6s ease-in-out infinite;
}
.domain-skeleton-name { width: 180px; }
.domain-skeleton-btn  { width: 90px; height: 28px; border-radius: 999px; }
@keyframes domain-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── 5. Fix: button labels invisible on dashboard/client cards (v1.7.15) ──
   `.dashboard-body .card a { color: var(--garden-accent) }` (dashboard.css)
   outranks `.dashboard-body .btn-primary { color:#fff }` because it ends in a
   type selector (a), so primary buttons rendered as <a> inside a .card showed
   green text on a green background — unreadable (e.g. "Open cPanel", "Renew
   now"). Re-assert the correct button text colours with higher specificity. */
.dashboard-body .card a.btn-primary,
.dashboard-body a.btn-primary,
.dashboard-body .card a.btn-danger,
.dashboard-body a.btn-danger   { color: #fff; }
.dashboard-body .card a.btn-ghost,
.dashboard-body a.btn-ghost    { color: var(--garden-text); }