/* =====================================================
   ZipLip UI – Blocksy Aligned
   Structure:
   1. Variables (easy control)
   2. Base styles (desktop + default)
   3. Mobile optimisations
   4. Print styles
   ===================================================== */


/* =====================================================
   1. ZIPLIP VARIABLES (TUNE HERE)
   ===================================================== */

:root {
    /* Spacing */
    --ziplip-card-padding: 1.25em;
    --ziplip-card-radius: 10px;
    --ziplip-card-gap: 2em;

    /* Typography */
    --ziplip-h1-size: clamp(1.6rem, 2.5vw, 2.2rem);
    --ziplip-h2-size: clamp(1.25rem, 2vw, 1.6rem);
    --ziplip-h3-size: 1.05rem;

    /* Buttons */
    --ziplip-btn-radius: var(--theme-button-border-radius, 6px);
    --ziplip-btn-padding: 0.55em 1em;

    /* Shadows */
    --ziplip-card-shadow: 0 6px 20px rgba(0,0,0,0.04);
    --ziplip-card-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
}


/* =====================================================
   2. BASE STYLES (DESKTOP / DEFAULT)
   ===================================================== */

/* Base wrapper */
.ziplip-location,
.ziplip-hub {
    font-family: var(--theme-font-family);
    font-size: var(--theme-font-size);
    line-height: var(--theme-line-height);
    color: var(--theme-text-color);
}

/* Headings */
.ziplip-location h1,
.ziplip-hub h1,
.ziplip-location h2,
.ziplip-hub h2,
.ziplip-location h3,
.ziplip-hub h3 {
    font-family: var(--theme-heading-font-family);
    font-weight: var(--theme-heading-font-weight);
    color: var(--theme-headings-color);
    line-height: 1.3;
}

.ziplip-location h1,
.ziplip-hub h1 {
    font-size: var(--ziplip-h1-size);
    margin-bottom: 0.75em;
}

.ziplip-location h2,
.ziplip-hub h2 {
    font-size: var(--ziplip-h2-size);
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.ziplip-location h3,
.ziplip-hub h3 {
    font-size: var(--ziplip-h3-size);
    margin-top: 1.5em;
    margin-bottom: 0.25em;
}

/* Paragraphs & lists */
.ziplip-location p,
.ziplip-hub p {
    margin-bottom: 1em;
}

.ziplip-location ul,
.ziplip-hub ul {
    padding-left: 1.2em;
}

.ziplip-location li,
.ziplip-hub li {
    margin-bottom: 0.4em;
}

/* Muted text */
.ziplip-muted {
    color: var(--theme-text-color-muted, #777);
    font-size: 0.95em;
}

/* Internal breadcrumb-like links */
.ziplip-internal-links {
    font-size: 0.9em;
    margin: 0.5em 0 1.5em;
}

.ziplip-internal-links a {
    color: var(--theme-link-color);
    text-decoration: none;
}

.ziplip-internal-links a:hover {
    text-decoration: underline;
}

/* Card-style sections */
.ziplip-about,
.ziplip-areas,
.ziplip-map,
.ziplip-howto,
.ziplip-faq {
    background: var(--theme-background-color, #fff);
    border-radius: var(--ziplip-card-radius);
    padding: var(--ziplip-card-padding);
    margin-top: var(--ziplip-card-gap);
    box-shadow: var(--ziplip-card-shadow);
}

/* Header spacing */
.ziplip-header {
    margin-bottom: var(--ziplip-card-gap);
}

/* Popular codes grid */
.ziplip-popular-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6em;
    margin-top: 1em;
}

.ziplip-popular-codes li {
    list-style: none;
}

.ziplip-popular-codes a {
    display: block;
    padding: 0.45em 0.6em;
    background: var(--theme-background-color, #fff);
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    box-shadow: var(--ziplip-card-shadow-soft);
}

/* Buttons (Blocksy-style) */
.ziplip-hub-search button,
.ziplip-location button {
    background-color: var(--theme-button-background-color, var(--theme-link-color));
    color: var(--theme-button-text-color, #fff);
    border: none;
    border-radius: var(--ziplip-btn-radius);
    padding: var(--ziplip-btn-padding);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.ziplip-hub-search button:hover {
    background-color: var(--theme-button-background-hover-color, var(--theme-link-hover-color));
    transform: translateY(-1px);
}

.ziplip-hub-search button:active {
    transform: translateY(0);
}


/* ---------- MAP ---------- */
.ziplip-map-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ziplip-card-radius);
}

.ziplip-map-embed iframe {
    width: 100%;
    height: 100%;
}

.ziplip-map-link {
    margin-top: 0.75em;
    font-weight: 500;
}

.ziplip-map-coordinates {
    font-size: 0.9em;
    color: var(--theme-text-color-muted, #777);
}



/* Inputs */
.ziplip-hub-search {
    margin: 1.5em 0;
    display: flex;
    gap: 0.5em;
}

.ziplip-hub-search input {
    flex: 1;
    font-family: inherit;
    font-size: 1em;
    padding: 0.5em 0.6em;
    border-radius: var(--theme-form-field-border-radius, 6px);
    border: 1px solid var(--theme-form-field-border-color, #ddd);
    background: var(--theme-form-field-background-color, #fff);
}


/* =====================================================
   3. MOBILE OPTIMISATIONS
   ===================================================== */

@media (max-width: 768px) {

    :root {
        --ziplip-card-padding: 1em;
        --ziplip-card-gap: 1.2em;
    }

    .ziplip-location h2,
    .ziplip-hub h2 {
        margin-top: 1.2em;
    }

    .ziplip-hub-search {
        flex-direction: column;
    }

    .ziplip-hub-search button {
        width: 100%;
    }
}


/* =====================================================
   4. PRINT STYLES
   ===================================================== */

@media print {

    /* Remove cards & shadows */
    .ziplip-about,
    .ziplip-areas,
    .ziplip-map,
    .ziplip-howto,
    .ziplip-faq,
    .ziplip-popular-codes a {
        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Hide UI-only elements */
    .ziplip-hub-search,
    .ziplip-internal-links,
    .ziplip-map a {
        display: none !important;
    }

    /* Force print-friendly colours */
    body {
        color: #000 !important;
        background: #fff !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    section {
        page-break-inside: avoid;
    }
}

/* ---------- NEARBY PLACES ---------- */
.ziplip-nearby-actions {
    margin: 1em 0;
}

.ziplip-nearby-results ul {
    margin: 0.5em 0 1.2em;
}

.ziplip-nearby-results li {
    margin-bottom: 0.3em;
}

.ziplip-osm-credit {
    font-size: 0.85em;
    color: var(--theme-text-color-muted, #777);
}

/* ===== ZipLip Featured Image ===== */

.ziplip-featured-image {
  margin: 1.5rem 0 2.5rem;
}

.ziplip-featured-image svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}


.ziplip-featured-svg {
    margin-bottom: 1.5rem;
    border-radius: 16px;
    overflow: hidden;
}

.ziplip-featured-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 640px) {
    .ziplip-featured-svg text {
        font-size: 38px;
    }
}


.ziplip-toc {
    background: var(--ziplip-bg-soft, #f7f7f7);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.ziplip-toc strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.ziplip-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ziplip-toc li {
    margin: 0.35rem 0;
}

.ziplip-toc li.toc-h3 {
    padding-left: 1rem;
    opacity: 0.9;
}

.ziplip-toc a {
    text-decoration: none;
    color: inherit;
}

.ziplip-toc a:hover {
    text-decoration: underline;
}

.ziplip-toc li.toc-h1 {
    font-weight: 600;
}

.ziplip-toc li.toc-h2 {
    padding-left: 1rem;
    opacity: 0.95;
}


.ziplip-related-tags {
    margin: 1.5rem 0;
}

.ziplip-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ziplip-tag a {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
    background: var(--theme-palette-color-7, #f1f3f5);
    text-decoration: none;
}

.ziplip-tag a:hover {
    text-decoration: underline;
}