/*
 Theme Name:  Fruitefy Child
 Template:    twentytwentyfive
 Description: Schlankes Child-Theme mit Portal-Startseite und veredelter UI.
 Version:     1.2.1
 Author:      Fruitefy
*/

/* =========================
   0) Tokens & Global
   ========================= */
:root{
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2,6,23,.06);

  /* WordPress Content Breite (sanft erweitern) */
  --wp--style--global--content-size: 1120px;
  --wp--style--global--wide-size:    1760px;
}

body{ scroll-behavior:smooth; }

/* Startseiten-H1 (WP-Blocktitel) ausblenden – Inhalt kommt aus Shortcode */
.page-id-67 .wp-block-post-title{ display:none !important; }

/* WordPress-Global-Padding über dem Inhalt entfernen (Startseite) */
.page-id-67 main,
.page-id-67 .wp-block-group.has-global-padding{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* =========================
   1) Fruitefy Startseite
   ========================= */

/* Full-bleed sicherstellen – auch im Block-Theme-Wrapper */
.page-id-67 .entry-content .fruitefy-root{
  box-sizing:border-box;
  max-width:100vw; width:100vw;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:max(env(safe-area-inset-left), 0px);
  padding-right:max(env(safe-area-inset-right), 0px);
}

/* Sektionen – konsistenter Vertical Rhythm */
.fruitefy-section{ 
  padding-top: clamp(24px, 5vw, 56px);
  padding-bottom: clamp(24px, 5vw, 56px);
}
.fruitefy-section-head{ margin-bottom: var(--s4); }
.fruitefy-section-head h2{ margin:0; letter-spacing:-.015em; }

/* Cards */
.fruitefy-card{
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding: clamp(14px, 3.5vw, 18px);
  background:#fff;
}

/* Badges */
.fruitefy-badge,
.fruitefy-badge-amber{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 14px;
  border-radius:999px;
  white-space:nowrap; line-height:1; min-height:28px;
}

/* Pill-/CTA-Reihen */
.fruitefy-pill-row{ margin-top: var(--s2); margin-bottom: var(--s2); }
.fruitefy-cta-row{  margin-top: var(--s3); margin-bottom: var(--s3); }

/* mehr Abstand zwischen Überschrift und Teaser-Text */
.fruitefy-hero-copy h1{
  margin: 0 0 clamp(20px, 3.2vw, 42px) 0 !important; /* <— hier ggf. anpassen */
  line-height: 1.08;
}

/* optional: auf sehr kleinen Phones etwas weicher */
@media (max-width: 480px){
  .fruitefy-hero-copy h1{ margin-bottom: clamp(18px, 6vw, 28px) !important; }
}

.fruitefy-hero-copy p{ margin-top:0; }

/* Hardening in Grids */
.fruitefy-grid-3 > *,
.fruitefy-grid > *,
.fruitefy-card,
.fruitefy-cause-card{ min-width:0; max-width:100%; box-sizing:border-box; }
.fruitefy-card p,.fruitefy-card div,.fruitefy-cause-card p,.fruitefy-cause-card div{
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto; -webkit-hyphens:auto;
}

/* Tabs */
.fruitefy-tabs{
  display:flex; gap:8px; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.fruitefy-tabs::-webkit-scrollbar{ display:none; }

/* Donate-Grid: Handy 1 Spalte, ab 900px 1/2 */
#fruitefy-donate .fruitefy-grid-3{ grid-template-columns: 1fr; }
@media (min-width:900px){
  #fruitefy-donate .fruitefy-grid-3{ grid-template-columns: 1fr 2fr; }
  .fruitefy-card-wide{ grid-column: span 2 !important; }
}
.fruitefy-card-wide{ grid-column: auto !important; }

/* Donate-Section Highlight */
#fruitefy-donate.fruitefy-section{
  position:relative;
  background: linear-gradient(180deg, rgba(5,150,105,.05), rgba(5,150,105,.02));
  border-radius: 16px;
}
#fruitefy-donate .fruitefy-section-head{ position:relative; padding-left:14px; }
#fruitefy-donate .fruitefy-section-head::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:6px;
  border-radius:4px; background: linear-gradient(180deg,#34d399,#60a5fa);
}
#fruitefy-donate .fruitefy-badge{ background:#059669; color:#fff; box-shadow:0 2px 0 rgba(6,95,70,.15); }

/* Rewards */
.fruitefy-badgerow{ display:flex; align-items:center; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: nowrap; }
@media (max-width:640px){
  .fruitefy-rewards .fruitefy-badgerow{ flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:12px; }
  .fruitefy-rewards .fruitefy-bold{ font-size: clamp(18px, 5.2vw, 22px); line-height: 1.22; max-width: 30ch; }
}
.fruitefy-rewards .fruitefy-grid-3{ gap: var(--s2); }
.fruitefy-reward{ padding:12px 14px; margin:0; }

.fruitefy-h3, .fruitefy-section h3{ margin: var(--s3) 0; }

/* =========================
   2) Small Devices
   ========================= */
@media (max-width:480px){
  .fruitefy-cta-row .fruitefy-btn{ width:100%; }
  .fruitefy-grid{ grid-template-columns:1fr !important; }
  .fruitefy-hero-copy h1{ font-size: clamp(28px, 8vw, 46px); }
}

/* =========================
   3) Hardening & Safe Area
   ========================= */
.fruitefy-root{ overflow-x: visible; overscroll-behavior-x: contain; }
.page-id-67 .entry-content.alignfull,
.page-id-67 .entry-content .is-layout-constrained{ padding-left:0 !important; padding-right:0 !important; }

/* Abstand Logo-Zeile ↔ Headline */
.fruitefy-hero-grid{
  /* Hier feinjustieren, falls noch zu groß/klein */
  margin-top: clamp(10px, 2vw, 18px) !important;
}

/* =========================
   4) LOGO / BRAND
   ========================= */

/* Brand-Zeile */
.fruitefy-brand{ display:flex; align-items:center; gap:12px; }

/* Logo-Sizing
   - Mobile: sichtbar groß
   - Desktop: kleiner (war zu dominant)
   - Schärfe/„Transparenz“-Eindruck verbessern
*/
.fruitefy-brand-logo{
  display:block;
  width:auto;
  height: clamp(64px, 10vw, 80px);   /* mobile/Tablet */
  opacity:1 !important;              /* Safety, falls irgendwo vererbt */
  filter: none;                      /* kein ungewollter Filter */
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);          /* Safari: leicht schärfer */
}
@media (min-width:1024px){          /* Desktop */
  .fruitefy-brand-logo{ height: 60px; }   /* << Desktop deutlich kleiner */
}
@media (min-width:1440px){          /* große Monitore */
  .fruitefy-brand-logo{ height: 56px; }   /* noch etwas kompakter */
}

/* Optionales Micro-Finishing für PNG auf sehr kleinen iPhones */
@media (max-width:420px){
  .fruitefy-brand-logo{
    height: 74px;                        /* mobil etwas größer */
    filter: saturate(1.06) contrast(1.06); /* wirkt knackiger, ohne zu übertreiben */
  }
}