/* GroupMico's directory UI. The supplied mascot is the brand illustration. */
:root {
    --green: #177343;
    --green-dark: #126136;
    --green-soft: #eff6ef;
    --ink: #222a25;
    --muted: #566159;
    --line: #e1e5e0;
    --surface: #f7f8f5;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
body:not([data-admin="1"]) { background: #fff; }
body:not([data-admin="1"]) .container { max-width: 1184px; padding-left: 32px; padding-right: 32px; }
.site-header, body[data-member="1"] .site-header { background: #f4f4ec; border-bottom: 1px solid var(--line); }
.navbar { height: 80px; gap: 24px; }
.brand { gap: 9px; font-size: 24px; letter-spacing: -1.1px; font-weight: 760; }
.brand img { width: 46px; height: 40px; object-fit: contain; flex: none; }
.brand span { color: #193024; }
.brand .brand-accent { color: var(--green-dark); }
.desktop-nav { gap: 25px; }
.desktop-nav a { font-size: 14px; font-weight: 550; }
.nav-actions { gap: 14px; }
.site-header .submit-button { background: var(--green-dark); color: #fff; border-color: var(--green-dark); padding: 10px 14px; }
.site-header .submit-button .icon { color: inherit; }
.site-header .submit-button:hover { background: #0a4b29; }
.language-picker summary { border-color: transparent; min-height: 38px; width: 72px; }
.language-picker summary:hover { background: var(--surface); border-color: var(--line); }
.account-button { border-radius: 7px; }
.button { border-radius: 6px; letter-spacing: 0; box-shadow: none; }
.button:hover { transform: none; }
.button-primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.button-primary:hover { background: #0a4b29; border-color: #0a4b29; }
.button-outline:hover { background: #f3f6f0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #176d41; outline-offset: 3px; }
/* Treat each filter as one control, including its icons and focus indicator. */
.discovery-form .filter-field:has(> select), .discovery-form .sort-field { border-radius: 5px; transition: border-color .16s ease, background-color .16s ease; }
.discovery-form .filter-field:has(> select) { cursor: pointer; }
.discovery-form .filter-field > select { height: 100%; min-width: 0; border-radius: inherit; }
.discovery-form .filter-field > select:focus, .discovery-form .filter-field > select:focus-visible, .discovery-form .sort-field > select:focus, .discovery-form .sort-field > select:focus-visible { outline: none; box-shadow: none; }
@media (hover: hover) {
    .discovery-form .filter-field:has(> select):hover { border-color: #829787; background: #f4f7f2; }
    .discovery-form .sort-field:hover { background: #f4f7f2; }
}
.discovery-form .filter-field:has(> select:focus) { border-color: #177343; }
.discovery-form .filter-field:has(> select:focus-visible), .discovery-form .sort-field:has(> select:focus-visible) { outline: 2px solid #176d41; outline-offset: 3px; }
.community-card { border-radius: 8px; box-shadow: none; }
.community-card:hover { box-shadow: none; transform: translateY(-2px); border-color: #a8b8a9; }
.card-title { font-weight: 700; letter-spacing: -.2px; }
.card-description { color: #566159; }
.tags span { color: #465348; background: #f4f5f1; border-color: transparent; border-radius: 4px; }
.platform-hero { background: #f7f8f4; border-color: #e1e5de; border-radius: 9px; box-shadow: none; }
.storefront-stats > div, .category-discovery-card { border-radius: 7px; box-shadow: none; }
.category-discovery-card:hover { box-shadow: none; border-color: #a8b8a9; }
.directory-home h1, .directory-home h2, .directory-home h3 { color: var(--ink); }
.home-intro { padding-top: 54px; padding-bottom: 36px; }
.home-kicker { color: #4b6152; font-size: 13px; font-weight: 600; margin-bottom: 15px; }
.home-intro h1 { max-width: 790px; font-size: clamp(34px, 3.5vw, 48px); line-height: 1.14; font-weight: 700; letter-spacing: -1.8px; margin-bottom: 17px; }
.home-lead { max-width: 720px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.home-search-panel { margin-top: 29px; }
.home-search-panel .discovery-form { margin: 0; }
.home-search-panel .search-field { height: 58px; border: 1px solid #bac6bc; border-radius: 7px; padding: 6px 6px 6px 17px; box-shadow: 0 2px 4px #1b362407; }
.home-search-panel .search-field:focus-within { border-color: #176d41; outline: 2px solid #176d411a; box-shadow: none; }
.home-search-panel .search-field > .icon { width: 21px; height: 21px; color: #69766c; }
.home-search-panel .search-field input { font-size: 15px; background: transparent; }
.home-search-panel .search-field button { min-height: 44px; padding-inline: 25px; }
.home-search-panel .filter-bar { justify-content: flex-start; gap: 20px; margin-top: 13px; flex-wrap: wrap; }
.home-search-panel .filter-controls { gap: 9px; flex-wrap: wrap; }
.home-search-panel .filter-field { box-shadow: none; border-color: var(--line); border-radius: 5px; height: 36px; }
.home-search-panel .filter-language-label { border: 0; color: #566159; font-size: 12px; padding-right: 0; }
.home-search-panel .sort-field { margin-left: auto; }
.home-search-panel .filter-submit { margin-top: 9px; }
.home-search-panel .filter-submit > span { display: none; }
.home-search-panel .filter-submit .button { padding: 5px 10px; min-height: 29px; font-size: 12px; color: #3e5043; }
.home-platform-links { display: flex; flex-wrap: wrap; gap: 10px 27px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.home-platform-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 550; }
.home-platform-links a > span { display: inline-flex; width: 21px; height: 21px; flex: 0 0 21px; }
.home-platform-links a > span svg { display: block; width: 21px; height: 21px; flex: none; }
.home-platform-links a > .icon { width: 14px; height: 14px; color: #788478; }
.home-platform-links a:hover { color: var(--green-dark); }
.directory-home .section-heading { margin-bottom: 21px; align-items: center; gap: 16px; }
.directory-home .section-heading h2, .home-practical h2, .home-reading h2, .home-questions h2 { font-size: 23px; letter-spacing: -.6px; font-weight: 680; }
.directory-home .section-heading p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.home-listings { padding-top: 21px; padding-bottom: 46px; }
.directory-home .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.directory-home .community-card { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-content: start; gap: 18px; padding: 21px; min-height: 216px; background: #fff; position: relative; overflow: visible; }
.directory-home .card-cover { width: 80px; height: 80px; border-radius: 10px; position: relative; background: #f2f4ef; overflow: visible; }
.directory-home .card-cover > img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 10px; }
.directory-home .card-platform { position: absolute; right: -5px; bottom: -5px; top: auto; left: auto; height: 27px; width: 27px; border: 3px solid white; border-radius: 7px; padding: 3px; display: grid; place-items: center; }
.directory-home .card-platform svg { width: 15px; height: 15px; }
.directory-home .multi-platform-label { display: none; }
.directory-home .sample-badge { top: -10px; left: -10px; bottom: auto; right: auto; font-size: 9px; }
.directory-home .card-body { display: flex; flex-direction: column; min-width: 0; padding: 0; }
.directory-home .card-title-row { gap: 12px; padding-right: 26px; }
.directory-home .card-title-row h3 { min-width: 0; font-size: 17px; line-height: 1.35; }
.directory-home .card-title { font-size: 17px; line-height: 1.35; display: block; }
.directory-home .bookmark-button { position: absolute; right: 12px; top: 14px; width: 31px; height: 31px; }
.directory-home .card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.65; margin-top: 8px; min-height: 42px; }
.directory-home .card-body > .tags { display: flex; margin: 11px 0 13px; gap: 5px; flex-wrap: wrap; }
.directory-home .tags span { font-size: 10px; padding: 2px 7px; }
.directory-home .tags span:nth-child(n+4) { display: none; }
.directory-home .card-bottom { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 0; border: 0; }
.directory-home .card-bottom > .text-button { order: 2; font-size: 11px; margin-left: auto; }
.directory-home .card-bottom .member-count { order: 1; font-size: 11px; flex-basis: auto; max-width: 100%; white-space: normal; }
.directory-home .member-count > span { display: none; }
.directory-home .card-bottom .button { order: 3; position: static; min-height: 30px; padding: 5px 11px; margin-left: 0; font-size: 11px; background: #f0f5ee; border-color: #e1e9dd; color: #205332; }
.directory-home .card-bottom .button:hover { background: #e3eddf; }
.directory-home .empty-state { border: 1px dashed #c7d2c5; border-radius: 8px; background: #f8faf6; }
.directory-home .empty-state > .icon { margin-bottom: 12px; width: 30px; height: 30px; color: #43634d; }
.directory-home .empty-state .button { margin-top: 18px; }
.directory-home .ad-slot-home { display: none; }
.directory-home .ad-slot-home:has(.adsbygoogle) { display: block; }
.home-topics { padding-top: 30px; padding-bottom: 44px; border-top: 1px solid var(--line); }
.directory-home .category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.directory-home .category-tile { display: flex; justify-content: flex-start; gap: 13px; min-height: 66px; padding: 18px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; font-size: 14px; }
.directory-home .category-tile > .icon:first-child { width: 19px; height: 19px; color: #56735d; }
.directory-home .category-tile > .icon:last-child { margin-left: auto; width: 14px; height: 14px; color: #788478; }
.directory-home .category-tile:hover { background: #f7f9f3; transform: none; }
.home-practical { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 75px; padding-top: 30px; padding-bottom: 48px; }
.home-steps ol { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 23px; }
.home-steps li { display: flex; gap: 16px; align-items: flex-start; }
.home-steps li > span { font-size: 13px; color: #41624b; border: 1px solid #cbd9c9; border-radius: 50%; width: 27px; height: 27px; flex: none; display: grid; place-items: center; margin-top: 2px; }
.home-steps h3 { font-size: 15px; letter-spacing: -.1px; }
.home-steps p { color: var(--muted); font-size: 14px; line-height: 1.75; margin-top: 4px; }
.home-owner-note { align-self: start; padding: 28px; border: 1px solid #e2e7db; border-radius: 8px; background: #f6f8f0; }
.owner-note-icon { display: block; color: #557548; margin-bottom: 14px; }
.owner-note-icon .icon { width: 27px; height: 27px; }
.home-owner-note h2 { font-size: 21px; }
.home-owner-note p { font-size: 14px; line-height: 1.75; margin-top: 12px; color: #4f5d4e; }
.home-owner-note .button { margin-top: 22px; white-space: normal; text-align: left; }
.home-reading { padding-top: 35px; padding-bottom: 42px; border-top: 1px solid var(--line); }
.home-reading > div:first-child { max-width: 750px; }
.home-reading p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 12px; }
.home-reading-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 50px; margin-top: 26px; }
.home-reading h3 { font-size: 16px; letter-spacing: -.2px; }
.home-questions { padding-top: 19px; padding-bottom: 60px; }
.home-questions .faq-items { margin-top: 21px; max-width: 900px; }
.faq-items summary { font-size: 14px; }
.site-footer { background: #f4f4ec; border-top: 1px solid var(--line); }
.footer-intro { align-items: center; padding-top: 30px; padding-bottom: 26px; }
.footer-full-logo { display: inline-block; line-height: 0; }
.footer-full-logo img { width: 145px; height: 105px; object-fit: contain; }
.footer-intro p { margin-top: 12px; color: #536151; }
.footer-columns { gap: 35px; }
.footer-columns h2 { font-size: 13px; font-weight: 700; }
.footer-columns a { color: #4d5b51; font-size: 13px; }
.cookie-banner { box-shadow: 0 4px 24px #1b362412; border-color: #d7dfd3; border-radius: 9px; }
@media (max-width:1000px) {
    .navbar { gap: 18px; }
    .desktop-nav { gap: 16px; }
    .nav-actions { gap: 8px; }
    .favorites-nav { display: none; }
    .home-practical { gap: 35px; }
    .directory-home .community-card { grid-template-columns: 66px minmax(0,1fr); gap: 14px; padding: 18px; }
    .directory-home .card-cover, .directory-home .card-cover > img { width: 66px; height: 66px; }
}
@media (max-width:800px) {
    .desktop-nav { display: none; }
    .nav-actions { margin-left: auto; }
    .menu-button { display: grid; }
    .directory-home .community-grid { grid-template-columns: 1fr; }
    .directory-home .community-card { min-height: 190px; }
    .directory-home .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .home-practical { grid-template-columns: 1fr 1fr; gap: 25px; }
}
@media (max-width:600px) {
    body:not([data-admin="1"]) .container { padding-left: 20px; padding-right: 20px; }
    .navbar { height: 66px; gap: 12px; }
    .brand { font-size: 22px; gap: 7px; }
    .brand img { width: 40px; height: 35px; }
    .nav-actions { gap: 5px; }
    .nav-actions .language-picker summary { width: 58px; padding: 6px 4px; font-size: 11px; }
    .nav-actions .language-picker summary > .icon:first-child { display: none; }
    .account-button, .submit-button { display: none; }
    .home-intro { padding-top: 32px; padding-bottom: 24px; }
    .home-kicker { font-size: 12px; margin-bottom: 12px; }
    .home-intro h1 { font-size: 34px; line-height: 1.16; letter-spacing: -1.1px; max-width: 410px; margin-bottom: 13px; }
    .home-lead { font-size: 14px; line-height: 1.7; }
    .home-search-panel { margin-top: 22px; }
    .home-search-panel .search-field { height: 54px; padding-left: 12px; }
    .home-search-panel .search-field input { font-size: 13px; min-width: 0; }
    .home-search-panel .search-field button { min-width: 40px; min-height: 40px; padding: 9px; }
    .home-search-panel .search-button-label { display: none; }
    .home-search-panel .search-button-icon { display: inline-flex; }
    .home-search-panel .filter-bar { gap: 8px; }
    .home-search-panel .filter-controls { width: 100%; gap: 7px; }
    .home-search-panel .filter-field { flex: 1; min-width: 0; }
    .home-search-panel .filter-field select { min-width: 0; max-width: 100%; width: 100%; font-size: 11px; padding-left: 7px; }
    .home-search-panel .filter-field > .icon:first-child { margin-left: 8px; width: 13px; height: 13px; }
    .home-search-panel .filter-language-label { flex-basis: 100%; order: 3; font-size: 11px; height: 24px; }
    .home-search-panel .sort-field { margin-left: 0; }
    .home-search-panel .filter-submit { margin-top: 8px; }
    .home-platform-links { gap: 9px 17px; margin-top: 18px; padding-top: 16px; }
    .home-platform-links a { font-size: 12px; min-height: 32px; gap: 6px; }
    .home-platform-links a > span svg { width: 18px; height: 18px; }
    .home-platform-links a > .icon { display: none; }
    .home-listings { padding-top: 16px; padding-bottom: 30px; }
    .directory-home .section-heading { gap: 12px; margin-bottom: 17px; }
    .directory-home .section-heading h2, .home-practical h2, .home-reading h2, .home-questions h2 { font-size: 21px; }
    .directory-home .section-heading p { font-size: 12px; }
    .directory-home .section-heading > .text-button { flex: none; font-size: 12px; gap: 5px; }
    .directory-home .community-card { padding: 16px; grid-template-columns: 56px minmax(0,1fr); gap: 13px; min-height: 192px; }
    .directory-home .card-cover, .directory-home .card-cover > img { width: 56px; height: 56px; border-radius: 8px; }
    .directory-home .card-title, .directory-home .card-title-row h3 { font-size: 15px; line-height: 1.4; }
    .directory-home .card-description { font-size: 12px; line-height: 1.65; min-height: 39px; }
    .directory-home .card-platform { width: 24px; height: 24px; }
    .directory-home .card-bottom .member-count { font-size: 10px; }
    .directory-home .card-bottom > .text-button { font-size: 10px; }
    .directory-home .card-bottom .button { font-size: 11px; }
    .directory-home .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .directory-home .category-tile { gap: 9px; font-size: 12px; padding: 13px 12px; min-height: 58px; }
    .directory-home .category-tile > .icon:first-child { width: 17px; height: 17px; }
    .directory-home .category-tile > .icon:last-child { display: none; }
    .home-topics { padding-top: 25px; padding-bottom: 28px; }
    .home-practical { grid-template-columns: 1fr; padding-top: 15px; padding-bottom: 35px; gap: 26px; }
    .home-steps ol { gap: 20px; margin-top: 21px; }
    .home-steps p { font-size: 13px; }
    .home-owner-note { padding: 23px; }
    .home-reading { padding-top: 28px; padding-bottom: 32px; }
    .home-reading-columns { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
    .home-reading p { font-size: 13px; }
    .home-questions { padding-top: 8px; padding-bottom: 40px; }
    .footer-intro { gap: 24px; flex-wrap: wrap; }
    .footer-full-logo img { width: 132px; height: 96px; }
    .footer-columns { column-gap: 25px; }
    .cookie-banner { border-radius: 8px; }
}
@media (prefers-reduced-motion:reduce) {
    .community-card:hover { transform: none; }
}
/* Keep search controls together without taking over a small screen. */
.home-search-panel .discovery-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 16px; }
.home-search-panel .search-field { grid-column: 1 / -1; }
.home-search-panel .filter-bar { margin-top: 0; }
.home-search-panel .filter-submit { margin-top: 0; align-self: center; }
.directory-home .community-card { min-height: 190px; }
@media (max-width:600px) {
    .home-search-panel .discovery-form { gap: 10px; }
    .home-search-panel .filter-bar { display: contents; }
    .home-search-panel .filter-controls { grid-column: 1 / -1; }
    .home-search-panel .sort-field { grid-column: 1; font-size: 0; justify-self: start; }
    .home-search-panel .sort-field select { font-size: 11px; padding-left: 0; }
    .home-search-panel .filter-submit { grid-column: 2; }
    .directory-home .community-card { min-height: 172px; }
}