/* FAQ - konten dari vocabulary FAQ, markup di view faq */
/* Di template FAQ memakai <section class="bg-cream">, yaitu pita cream
   SELEBAR LAYAR. Blok Drupal cuma selebar container, jadi pitanya dipasang
   lewat ::after yang dilebarkan 100vw. Cara ini tidak mengubah tata letak
   isinya, jadi perataan kiri-kanan tetap sama dengan section lain.
   Aman dari scroll horizontal karena html sudah overflow-x:clip. */
#block-tammia-theme-faq-homepage { background:transparent; padding:100px 0; position:relative; }
#block-tammia-theme-faq-homepage::after { content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw; background:#faf9f7; z-index:0; pointer-events:none; }
#block-tammia-theme-faq-homepage > * { position:relative; z-index:1; }
#block-tammia-theme-faq-homepage > .view, #block-tammia-theme-faq-homepage .view-id-faq { position:relative; z-index:1; max-width:none; margin:0 -8px; padding:0; display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,5vw,72px); align-items:start; }
#block-tammia-theme-faq-homepage .view-content { display:flex; flex-direction:column; gap:14px; }
#block-tammia-theme-faq-homepage .views-row, #block-tammia-theme-faq-homepage .views-field, #block-tammia-theme-faq-homepage .field-content { display:block; }
.tm-faq__eyebrow { color:#e11d25; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin:0 0 14px; }
#block-tammia-theme-faq-homepage h2.tm-faq__title { font-size:clamp(1.9rem,3.4vw,2.7rem)!important; font-weight:600!important; line-height:1.18!important; color:#1a1512!important; letter-spacing:-.01em!important; text-transform:none!important; text-align:left!important; margin:0 0 18px!important; }
#block-tammia-theme-faq-homepage h2.tm-faq__title span { color:#e11d25!important; }
.tm-faq__lead { color:#6f645e; font-size:.97rem; line-height:1.65; margin:0 0 28px; max-width:380px; }
.tm-faq__cta { display:inline-flex; align-items:center; gap:10px; background:#e11d25; color:#fff!important; text-decoration:none!important; font-weight:600; font-size:.95rem; padding:14px 28px; border-radius:999px; box-shadow:0 8px 22px rgba(225,29,37,.28); transition:transform .2s,box-shadow .2s,background .2s; }
.tm-faq__cta:hover { background:#c0161d; transform:translateY(-2px); }
/* margin:0 penting. Tanpa itu tiap item kena margin 14px atas-bawah dan
   jaraknya jadi 14+14+14 = 42px, padahal template cuma gap 14px. */
.tm-faq__item { background:#fff; border:1px solid #e6e2dd; border-radius:18px; margin:0; padding:4px 30px; cursor:default; transition:box-shadow .3s ease, border-color .3s ease; }
.tm-faq__item[open] { border-color:#e11d25; box-shadow:0 16px 38px -28px rgba(225,29,37,.32); }
.tm-faq__q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:21px 0; font-family:"Comfortaa","Poppins",sans-serif; font-weight:500; font-size:clamp(15px,1.55vw,18px); color:#1a1a1a; transition:color .25s ease; }
.tm-faq__item[open] .tm-faq__q { color:#e11d25; }
.tm-faq__q::-webkit-details-marker { display:none; }
.tm-faq__q::marker { content:""; }
.tm-faq__q::after { content:"+"; flex:0 0 auto; font-size:22px; font-weight:300; line-height:1; color:#e11d25; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.tm-faq__item[open] .tm-faq__q::after { transform:rotate(45deg); }
.tm-faq__a { padding:2px 0 24px; color:#414042; font-size:15px; line-height:1.74; max-width:560px; }
.tm-faq__a p { margin:0; }
@media (max-width:991px){ #block-tammia-theme-faq-homepage > .view, #block-tammia-theme-faq-homepage .view-id-faq { grid-template-columns:1fr; gap:36px; } .tm-faq__lead { max-width:none; } }
@media (max-width:575px){ #block-tammia-theme-faq-homepage { padding:60px 0; } .tm-faq__q { padding:18px 0; } }

/* Injector base punya .tm-faq__q { font-family:Poppins } dan ternyata dia
   yang menang. Diberi prefix id block supaya font pertanyaan ikut template,
   yaitu Comfortaa. */
#block-tammia-theme-faq-homepage .tm-faq__q { font-family:"Comfortaa","Poppins",sans-serif; }