/* Additions for admin-driven features the static template did not have. They reuse the template's tokens
   and only apply when that feature is used (dropdown menus, multiple banners, banner images, logo images,
   content pages, galleries, maps). The original site.css is untouched. */

/* Header dropdowns */
.nav-dd { position: relative; }
.nav-dd .dd-toggle { display: inline-flex; align-items: center; gap: .3rem; }
.nav-dd .dd-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-dd.open .dd-toggle svg { transform: rotate(180deg); }
.nav-dd .dd-menu { display: none; position: absolute; top: calc(100% + .6rem); left: -1rem; min-width: 200px; padding: .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; z-index: 30; }
.nav-dd.open .dd-menu, .nav-dd:focus-within .dd-menu { display: grid; gap: .2rem; }
.nav-dd .dd-menu a { padding: .45rem .6rem; border-radius: 8px; }
.nav-dd .dd-menu a:hover { background: var(--card); }
@media (hover: hover) and (min-width: 901px) { .nav-dd:hover .dd-menu { display: grid; gap: .2rem; } }
@media (max-width: 900px) { .nav-dd .dd-menu { position: static; border: 0; padding: .4rem 0 0 1rem; } }

/* Logo image (when uploaded in Website Settings) */
.logo img.logo-img { max-height: 48px; width: auto; }
.logo-lg img.logo-img { max-height: 90px; }

/* Hero banner slider and optional banner image */
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.hero-slide.on { opacity: 1; visibility: visible; }
.hero-slides.single .hero-slide { opacity: 1; visibility: visible; }
.hero-grid.has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.hero-media img { width: 100%; height: auto; border-radius: 26px; }
@media (max-width: 760px) { .hero-grid.has-media { grid-template-columns: 1fr; } }
.hdots { display: flex; gap: .45rem; margin-top: 1.6rem; }
.hdots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; }
.hdots button[aria-current="true"] { background: var(--ink); }

/* Brand logo images */
.logos a, .logos .lg { display: grid; place-items: center; padding: .6rem; text-decoration: none; }
.logos img { max-height: 44px; width: auto; margin: auto; }

/* Portfolio tiles linking somewhere */
.work a.work-link { text-decoration: none; color: inherit; display: block; }

/* Content pages created in the admin panel */
.page-head { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: 1rem; }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.035em; max-width: 18ch; }
.page-head p.lead { margin-top: 1rem; max-width: 60ch; color: var(--muted); font-size: 1.06rem; }
.page-feature { border-radius: 26px; overflow: hidden; margin-top: 1.5rem; }
.page-feature img { width: 100%; height: auto; }
.prose { max-width: 72ch; font-size: 1.02rem; }
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; margin: 2rem 0 .8rem; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin: 1.6rem 0 .6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.prose ul { list-style: disc; }
.prose a { color: var(--orange); }
.prose img { border-radius: 14px; height: auto; margin: 1rem 0; }
.prose blockquote { margin: 1.2rem 0; padding: 1rem 1.3rem; background: var(--yellow); color: var(--fixed-ink); border-radius: 14px; }

/* Galleries */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.5rem; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.gallery-grid figcaption { font-size: .85rem; margin-top: .5rem; color: var(--muted); }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Contact extras */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact .map { margin-top: 1.4rem; border-radius: 14px; overflow: hidden; border: 1px solid rgba(43, 34, 32, .35); }
.contact .map iframe { display: block; width: 100%; height: 220px; border: 0; }
.contact .cinfo { margin-top: 1rem; font-size: .92rem; display: grid; gap: .2rem; }
.contact .cinfo a { text-decoration: none; font-weight: 700; }

/* Error page */
.err { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.err h1 { font-size: clamp(3rem, 9vw, 6rem); font-weight: 800; }
.err p { color: var(--muted); margin: 1rem auto 1.6rem; max-width: 40ch; }

/* Footer social links with brand icons */
.social { flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem; }
.social a { display: inline-flex; align-items: center; gap: .5rem; }
.social .si { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); transition: background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.social .si svg { width: 17px; height: 17px; }
.social a:hover .si, .social a:focus-visible .si { color: #fff; border-color: transparent; transform: translateY(-3px) rotate(-8deg); }
.social a:hover .si-instagram, .social a:focus-visible .si-instagram { background: radial-gradient(circle at 30% 107%, #FDD86A 0%, #F9853B 25%, #E1306C 55%, #833AB4 90%); }
.social a:hover .si-facebook, .social a:focus-visible .si-facebook { background: #1877F2; }
.social a:hover .si-linkedin, .social a:focus-visible .si-linkedin { background: #0A66C2; }
.social a:hover .si-whatsapp, .social a:focus-visible .si-whatsapp { background: #25D366; }
.social a:hover .si-youtube, .social a:focus-visible .si-youtube { background: #FF0000; }
.social a:hover .si-x, .social a:focus-visible .si-x { background: #000; }
.social a:hover .si-phone, .social a:hover .si-email, .social a:hover .si-link,
.social a:focus-visible .si-phone, .social a:focus-visible .si-email, .social a:focus-visible .si-link { background: var(--orange); }
@media (prefers-reduced-motion: reduce) { .social .si { transition: none; } .social a:hover .si { transform: none; } }