/*
Theme Name: Hungaria Child
Template: alternate
Version: 1.0
Description: Child theme for hungaria.org archive
*/

/* #leftbar (Search) is float:left in the parent theme, while the
   two blocks below it are normal (non-floated) elements — mixing the
   two makes the browser stack them out of source order. Removing the
   float here fixes stacking for every sibling that follows. */
#leftbar {
    float: none;
    clear: both;
    overflow: hidden;
}

/* ── Kossuth photo, links to the 1848-49 collection ── */
.kossuth-photo {
    display: block;
    clear: left;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.kossuth-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ── 1956 Revolution photo (Stalin's Head), below the Kossuth photo ── */
.revolution-1956-photo {
    display: block;
    clear: left;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.revolution-1956-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ── Rákóczi Revolution photo, below the 1956 photo ── */
.rakoczi-photo {
    display: block;
    clear: left;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.rakoczi-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ── Save the Duna campaign logo, below Search ── */
.danube-campaign-logo {
    display: block;
    clear: left;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.danube-campaign-logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ── Székely photo, below the Save the Duna logo, links to a search
   for "szekely" ── */
.szekely-photo {
    display: block;
    clear: left;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.szekely-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ── Kalotaszeg wedding photo, below the Székely photo, links to the
   Pittsburgh Folk Dance & Music Symposium article ── */
.kalotaszeg-photo {
    display: block;
    clear: left;
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.kalotaszeg-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ── Logo — rose emblem with runic script, with the English site
   title next to it. ── */
#logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}

#leftside .site-description,
#leftside .site-title {
    display: none;
}

/* Site title above the content column, same placement as arpad's
   decorative title above its content. Geometric/angular sans with
   heavy letter-spacing to echo the runic script's carved feel,
   without actually being runic. Sized to fit on one line. */
.site-header-title {
    font-family: "URW Gothic", "Futura", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #15593a !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    white-space: nowrap;
    margin: 0 !important;
    line-height: 1.4;
}

.site-header-subtitle {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    color: #999;
    margin: 4px 0 25px;
}

/* Seasonal holiday/anniversary banner, shown for a few days around a
   national holiday or historic anniversary the site has dedicated
   content for — links straight to that category. */
.holiday-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4f1e8;
    border: 1px solid #d8cfa8;
    border-radius: 4px;
    padding: 10px 14px;
    margin: -12px 0 20px;
    text-decoration: none;
    color: #5a4a1f;
}
.holiday-banner:hover {
    background: #ede7d3;
}
.holiday-banner img {
    width: 28px;
    height: auto;
    flex-shrink: 0;
}
.holiday-banner span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* The one-line title fits on desktop's wider content column, but
   clips on narrow mobile screens — let it wrap there instead. */
@media screen and (max-width: 768px) {
    .site-header-title {
        white-space: normal;
        font-size: 17px !important;
    }

    /* On mobile the sidebar (nav, campaign images, quote/joke widgets,
       popular articles) stacks above the main content in source order,
       so tapping a menu item lands you back at the top of all that —
       the actual page you asked for is scrolled below the fold. Flex +
       order fixes this without touching the HTML: content first,
       sidebar second, on mobile only. */
    #wrapper {
        display: flex;
        flex-direction: column;
    }
    #rightside {
        order: 1;
    }
    #leftside {
        order: 2;
    }

    /* The hamburger button is absolutely positioned against .mmenu,
       which now sits below the content (see above) — pin it to the
       viewport instead so it stays visible at the top of the screen
       regardless of where its parent ends up in the flex order. */
    .mmenu .nav-bars {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        margin-left: 0 !important;
        z-index: 999 !important;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    }

    /* The button is pinned to the viewport now, but the menu list it
       opens is still wherever .mmenu physically sits (down at the
       bottom, after the content, since #leftside got reordered above)
       — jQuery just slides it open in place. Pin the open panel to the
       viewport too, as a proper dropdown below the button, instead of
       leaving it wherever its parent ended up. */
    .mmenu.mobile ul.navmenu {
        position: fixed !important;
        top: 58px !important;
        right: 12px !important;
        left: 12px !important;
        max-height: 75vh;
        overflow-y: auto;
        background: #fff !important;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        padding: 10px 15px !important;
        z-index: 998 !important;
    }
}

/* Reclaim most of the parent theme's 100px top margin. */
#leftside,
#rightside {
    margin-top: 20px !important;
}

/* ── Readable content ── */
.post,
.page,
#content {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
}

#content img {
    max-width: 100%;
    height: auto;
}

/* Single-post featured image (rendered outside #content, above it) */
#contentwrapper > img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Keep long titles from overflowing */
.entry-title,
.post-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ── Content headings (style shared with arpad/AHEA) — neutral dark
   rather than brand-colored; red/green stay reserved for accents
   (underlines, links) so repeated headers don't read as loud. ── */
#rightside h1 {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2c2c2c !important;
    border-bottom: 2px solid #d01305 !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

#rightside h2 {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #2c2c2c !important;
    margin-bottom: 14px !important;
    margin-top: 30px !important;
}

#rightside h3 {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #d01305 !important;
    margin-bottom: 10px !important;
    margin-top: 24px !important;
}

#rightside h4 {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #555555 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

/* ── Links (style shared with arpad/AHEA) ── */
#rightside a {
    color: #15593a !important;
    text-decoration: none !important;
    border-bottom: 1px solid #d01305 !important;
}

#rightside a:hover {
    color: #d01305 !important;
    border-bottom-color: #15593a !important;
}

/* ── Hide post listing dates (archive listings read cleaner without them) ── */
.postdate {
    display: none;
}

/* ── Copyright / designer credit — shaded so it reads as its own
   block instead of blending into the content above it ── */
#copyinfo {
    box-sizing: border-box;
    background: #f5f5f5;
    padding: 22px 20px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 2;
    color: #888888;
    text-align: center;
    clear: both;
}

#copyinfo br {
    content: "";
    display: block;
    margin-top: 6px;
}

#copyinfo a {
    color: #888888 !important;
    border-bottom: none !important;
}

#copyinfo a:hover {
    color: #15593a !important;
}

/* Parent theme sets #footer padding-bottom:120px, leaving a large empty
   gap below the copyright box. Trim it so the shaded box sits at the
   true bottom of the page (same fix as arpad and AHEA). */
#footer {
    padding-bottom: 20px !important;
}

/* ── Homepage sections (one featured post per top-level directory) ── */
.home-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.home-section-title a {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #2c2c2c !important;
    border-bottom: 2px solid #d01305 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-section-post {
    overflow: hidden;
}

.home-section-thumb {
    display: block;
    margin: 0 0 15px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: fit-content;
}

.home-section-thumb img {
    display: block;
    max-width: 180px;
    height: auto;
}

.home-section-post .entry-title a {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c2c2c !important;
    border-bottom: none !important;
}

.home-section-more {
    display: inline-block;
    margin-top: 10px;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 12px !important;
    color: #888 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none !important;
}

.home-section-more:hover {
    color: #15593a !important;
}

/* ── Category index / listing pages — clearly secondary to the
   site-wide title above it: smaller, not all-caps, gold instead of
   navy, thinner underline. ── */
.category-index-title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #d01305 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.category-hero {
    display: block;
    margin: 0 0 25px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

.category-hero img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Hub page (Resource Directory / Hír) — alphabetized table of sections */
.index-hub-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 480px;
}

.index-hub-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.index-hub-table-name {
    padding: 6px 0;
}

#rightside .index-hub-table-name a {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #2c2c2c !important;
    border-bottom: none !important;
}

#rightside .index-hub-table-name a:hover {
    color: #d01305 !important;
}

.index-hub-table-count {
    padding: 6px 0;
    text-align: right;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    color: #888;
    white-space: nowrap;
}

/* Listing page — grouped compact index */
.index-group-title {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #d01305 !important;
    margin: 30px 0 10px !important;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
}

.index-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.index-list li {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.index-list li a {
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
    color: #15593a !important;
    border-bottom: none !important;
}

.index-list li a:hover {
    color: #d01305 !important;
}

.index-list li strong {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    color: #555;
}

.index-excerpt {
    display: block;
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

/* ── Hierarchical categories widget — indent nested levels so the
   directory's real section/sub-section structure reads as a tree
   instead of one flat alphabetical list. ── */
.wp-block-categories-list ul.children {
    list-style: none !important;
    margin-left: 16px !important;
    padding-left: 0 !important;
}

/* ── Mobile main menu: the parent theme's dropdown arrow (.arrow) is
   absolutely positioned at the right edge with no space reserved for
   it, so long top-level labels (e.g. "Székely Autonomy & Cserehát")
   run underneath and hide it. Reserve room on items that have a
   submenu, and let long labels wrap instead of overflowing. ── */
@media screen and (max-width: 768px) {
    .mmenu.mobile ul li.menu-item-has-children > a {
        padding-right: 28px !important;
        white-space: normal !important;
    }
}

/* ── Campaign images, back in the left sidebar (below Search): a
   full-width vertical stack sized to the 230px #leftside column. ── */
#sidebar-campaign-images {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    clear: both;
}

#sidebar-campaign-images a {
    display: block !important;
    clear: none !important;
    width: 100% !important;
    height: 160px !important;
    margin: 0 !important;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Portrait-oriented source photos need a taller box so the subject
   (faces, the párta headdress) isn't force-cropped out. */
#sidebar-campaign-images a.kossuth-photo,
#sidebar-campaign-images a.szekely-photo {
    height: 220px !important;
}

/* Crockwell's freedom-fighter teens need extra height, or the boy's hair
   gets cropped by object-fit:cover before his legs come into frame. */
#sidebar-campaign-images a.revolution-1956-photo {
    height: 260px !important;
}

/* The párta bride needs extra height too, so the embroidered skirt below
   the headdress isn't force-cropped out. */
#sidebar-campaign-images a.kalotaszeg-photo {
    height: 280px !important;
}

#sidebar-campaign-images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    #sidebar-campaign-images a {
        height: 120px !important;
    }
}

.szekely-banner-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.szekely-banner-row img {
    width: calc((100% - 16px) / 3);
    height: 200px;
    object-fit: cover;
    border-radius: 3px;
}

.szekely-banner-row img.contain-fit {
    object-fit: contain;
    background: #fff;
    border: 1px solid #e0e0e0;
}

.hargita-gallery-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.hargita-gallery-row figure {
    margin: 0;
}

.hargita-gallery-row img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

.hargita-gallery-row figcaption {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 4px;
}

@media screen and (max-width: 600px) {
    .szekely-banner-row {
        flex-wrap: wrap;
    }
    .szekely-banner-row img {
        width: calc((100% - 8px) / 2);
        height: 140px;
    }
    .szekely-banner-row img:last-child {
        width: 100%;
    }
    .hargita-gallery-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.karpatok-gallery {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.karpatok-gallery img {
    width: calc((100% - 20px) / 3);
    height: 220px;
    object-fit: cover;
    border-radius: 3px;
}

@media screen and (max-width: 600px) {
    .karpatok-gallery {
        flex-wrap: wrap;
    }
    .karpatok-gallery img {
        width: calc((100% - 10px) / 2);
        height: 160px;
    }
}

/* Submenu items inherit the parent theme's bold/uppercase Main Menu style
   with nothing to tell them apart. Distinguish them: normal weight, no
   uppercase — same size as the Main Menu otherwise. */
.mmenu ul li ul li a {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
}

/* Small flag icon in front of "English" / "Magyar" language-split
   sub-headings on category listing pages. */
.index-group-flag {
    display: inline-block;
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-right: 6px;
    border: 1px solid #ddd;
}

/* Small Transylvania coat-of-arms icon in front of the "Regions of
   Hungary" (Erdély / Transylvania Guide) Main Menu item. */
#menu-item-9867 > a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 16px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/erdely-menu-icon.png) no-repeat center / contain;
    vertical-align: middle;
}

/* Small Kossuth-címer icon in front of the "Kossuth & 1848-49
   Revolution" menu item (child of Freedom & Human Rights). */
#menu-item-8626 > a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 18px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/kossuth-flag-icon.png) no-repeat center / contain;
    vertical-align: middle;
}

/* Small Csíksomlyó Madonna icon in front of the "Csíksomlyói Búcsú"
   menu item (child of Erdély / Transylvania Guide). */
#menu-item-9834 > a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/csiksomlyo-menu-icon.jpg) no-repeat center / cover;
    border-radius: 2px;
    vertical-align: middle;
}

/* Székely flag icon for the Main Menu items specific to Székelyföld /
   autonomy topics under In the Shadows of Trianon, and Erdély's own
   Székelyföld submenu item. */
#menu-item-10419 > a::before,
#menu-item-10332 > a::before,
#menu-item-10333 > a::before,
#menu-item-10422 > a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/flag-of-szekely-land.png) no-repeat center / contain;
    vertical-align: middle;
}

/* "Lyukas zászló" (hole-in-the-flag) icon for the "1956 Revolution"
   Main Menu item — the Hungarian tricolor with the Soviet-era coat of
   arms cut out, the defining symbol of the revolution. */
#menu-item-8641 > a::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 12px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/lyukas-zaszlo-icon.png) no-repeat center / contain;
    vertical-align: middle;
}

/* Random quote sidebar block, above Popular Articles. */
#sidebar-random-quote {
    padding: 15px 0;
}
#sidebar-random-quote .quote-icon {
    display: block;
    width: 22px;
    height: auto;
    margin: 0 0 8px;
    opacity: 0.6;
}
#sidebar-random-quote blockquote {
    margin: 0;
    padding: 0;
    border-left: none;
    font-size: 12px;
    line-height: 1.5;
    font-style: italic;
    color: #555;
}

/* Random joke sidebar block, next to the random quote. */
#sidebar-random-joke {
    padding: 15px 0;
}
#sidebar-random-joke .joke-icon {
    display: block;
    width: 22px;
    height: auto;
    margin: 0 0 8px;
    opacity: 0.6;
}
#sidebar-random-joke .sidebar-joke-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}
#sidebar-random-joke .sidebar-joke-text a {
    color: #555;
    text-decoration: none;
}
#sidebar-random-joke .sidebar-joke-text a:hover {
    text-decoration: underline;
}

/* "Popular Articles" sidebar block, below the campaign images. */
#sidebar-popular-articles {
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
}
#sidebar-popular-articles h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
}
#sidebar-popular-articles ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#sidebar-popular-articles li {
    margin: 0 0 8px;
    padding-left: 14px;
    position: relative;
    font-size: 12px;
    line-height: 1.4;
}
#sidebar-popular-articles li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #999;
}

/* Rákóczi / Kuruc banner icon for the "Rákóczi Revolution" Main Menu item. */
#menu-item-8643 > a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 14px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/rakoczi-kuruc-icon.png) no-repeat center / contain;
    vertical-align: middle;
}

/* "Save the Duna" campaign logo icon for the "Environmental Issues"
   Main Menu item. */
#menu-item-10334 > a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/magyar.jpg) no-repeat center / contain;
    vertical-align: middle;
}

/* Coat of Arms of the Lands of the Holy Hungarian Crown, for the
   "In the Shadows of Trianon" Main Menu item. */
#menu-item-10329 > a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 16px;
    margin-right: 5px;
    background: url(../../uploads/2026/08/trianon-cimer-icon.png) no-repeat center / contain;
    vertical-align: middle;
}