/*
Theme Name: Vinesprit Child
Description: Childtheme van fArt voor de modernisering van Vinesprit, met behoud van de bestaande vormgeving als uitgangspunt.
Author: Megamerel
Template: fart
Version: 1.3.2
Text Domain: vinesprit-child
License: GNU General Public License v2.0 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Vinesprit layout, consolidated from the modified fArt/child_fart stylesheets,
 * Customizer background/header settings, Additional CSS and page formatting.
 * fArt's original layout is inherited; only site-specific differences live here.
 */

/* Site typography and background (previously set in the Customizer). */
body {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-size: 15px;
    background-color: #f1d7e4;
    background-image: url("assets/images/achtergrond.jpg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #000;
    letter-spacing: normal;
    line-height: normal;
}

/* Header text colour (previously the Customizer's header_textcolor). */
#header-main-fixed {
    color: #790fe2;
}

/* Keep Vinesprit's compact navigation and colours with the new parent defaults. */
#header-logo h1 {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: normal;
    color: #aaa;
}

#navmain > div > ul > li > a {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #333;
    border-bottom: 0;
}

#navmain > div > ul > li > a:hover,
#navmain > div > ul > .current-menu-item > a,
.header-social-widget li a:hover {
    color: #5fa81a;
    border-bottom: 0;
}

@media (min-width: 800px) {
    #navmain > div > ul > li { padding: 0; margin-right: 0; }
    #navmain > div > ul > li > a { padding: 12px 6px; }
    #header-logo { margin-top: 5px; }
}

/* Preserve the site's homepage areas after updating to fArt 1.6. */
#home-cols-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3%;
    padding: 0 2%;
}

#home-cols-inner > div {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    min-width: 0;
}

@media (max-width: 799px) {
    #home-cols-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    #home-cols-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Green accents: the nine original overrides in fArt and child_fart. */
a,
h1, h2, h3, h4, h5, h6,
#page-header a:hover {
    color: #5fa81a;
}

.navigation .page-dots,
.navigation .page-numbers {
    border-color: #5fa81a;
}

.navigation .current,
.navigation .current:hover {
    background: #5fa81a !important;
}

.camera_wrap .camera_pag .camera_pag_ul li,
.camera_wrap .camera_pag .camera_pag_ul li:hover > span {
    background: #5fa81a;
}

/* Preserve the existing translucent control background. */
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next,
.camera_commands, .camera_thumbs_cont {
    background: #5fa81a;
    background: rgba(253, 204, 8, 0.85);
}

/* Slider caption (previously Additional CSS in WordPress). */
.camera_caption > div {
    background: #5fa81a;
    background: rgba(95, 168, 26, 0.6);
}

/* Gallery instructions (previously four inline style attributes in page text). */
.vinesprit-gallery-instructions {
    color: #808080;
}

/*
 * A text widget also contained an invalid, ineffective <style> block with <br>
 * inside declarations (Harrington, 20px). It is archived in the migration backup.
 * It is intentionally not activated here: the rendered paragraphs use the 15px
 * Raleway typography above, which preserves the actual existing appearance.
 */

/* Approved Atelier layout: transparent colour washes and contrasting footer. */
body {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #35332f;
}

#header-main-fixed {
    background: rgba(251, 246, 251, .72);
    border-bottom: 1px solid rgba(95, 168, 26, .15);
    box-shadow: 0 3px 18px rgba(65, 49, 46, .04);
}

#header-content-wrapper {
    max-width: 1440px;
    margin: auto;
    padding: 10px 32px;
}

#header-logo h1 {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #77736d;
    line-height: 1.2;
    letter-spacing: .025em;
}

#site-identity strong {
    color: #790fe2;
    font-size: 14px;
    font-weight: 400;
}

#navmain > div > ul > li > a {
    font-size: 14px;
    line-height: 1.4;
    padding: 18px 10px;
}

#camera_wrap {
    float: none;
    width: calc(100% - 64px);
    max-width: 1440px;
    margin: 28px auto 58px !important;
    box-shadow: 0 12px 34px rgba(62, 39, 52, .13);
    border: 5px solid rgba(255, 250, 255, .65);
    box-sizing: border-box;
}

.camera_caption > div {
    background: rgba(95, 168, 26, .78);
    padding: 22px 30px;
    text-align: left;
}

.camera_caption h2 {
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-size: clamp(27px, 3.2vw, 42px);
    font-weight: 400;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: .01em;
    margin: 0 0 6px;
    color: #fff;
}

.camera_caption p { font-size: 16px; line-height: 1.6; margin: 0 0 8px; }
.camera_caption a { color: #fff !important; font-size: 14px; }
.camera_wrap .camera_pag .camera_pag_ul { text-align: center; }
.camera_wrap .camera_pag .camera_pag_ul li { width: 10px; height: 10px; margin: 15px 7px; }
.camera_wrap .camera_pag .camera_pag_ul li > span { top: 2px; left: 2px; width: 6px; height: 6px; }

#main-content-wrapper {
    display: flow-root;
    max-width: 1376px;
    width: calc(100% - 64px);
    box-sizing: border-box;
    margin: 0 auto 64px;
    padding: 0;
    background: linear-gradient(125deg, rgba(250, 239, 253, .46), rgba(242, 251, 230, .34));
    border: 1px solid rgba(255, 255, 255, .52);
    box-shadow: 0 8px 32px rgba(97, 48, 112, .07);
}

body:not(.home) #main-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 26%);
    gap: 24px;
    margin-top: 28px;
    padding: 28px 30px;
}

body:not(.home) #main-content-wrapper > #main-content,
body:not(.home) #main-content-wrapper > #sidebar {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
}

body:not(.home) #main-content-wrapper > #sidebar {
    align-self: start;
    padding: 18px 14px;
    background: linear-gradient(125deg, rgba(218, 190, 238, .52), rgba(237, 218, 249, .46));
    border: 1px solid rgba(179, 136, 207, .45);
    border-radius: 6px;
}

/* Let the shared purple sidebar show through the parent's white widget cards. */
#sidebar .widget,
#sidebar .widget_recent_entries,
#sidebar .widget_text {
    background: transparent;
    box-shadow: none;
}

#main-content-home { padding: 42px 34px; }
#home-cols-inner { gap: 30px; padding: 0; }
#home-cols p { font-size: 16px; line-height: 1.75; margin: 0 0 20px; }
#home-cols h2 { font-size: 26px; font-weight: 400; line-height: 1.3; text-transform: none; margin: 24px 0 14px; color: #5fa81a; }
#home-cols img { height: auto; border: 4px solid rgba(255, 250, 255, .7); box-shadow: 0 4px 15px rgba(57, 42, 43, .1); box-sizing: border-box; }
#home-cols .col4a img { transform: rotate(-1.2deg); }
#home-cols .col4b strong em { color: #790fe2; font-weight: 400; }
#home-cols a { color: #4e8c16; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#home-cols iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

#footer-main {
    background: rgba(73, 53, 82, .84);
    border-top: 3px solid rgba(95, 168, 26, .65);
    color: #f5eef7;
}
#footer-content-wrapper { max-width: 1376px; margin: auto; padding: 24px 32px; }
#footer-main h2 { text-transform: none; font-weight: 400; color: #c4e8a4; }
#footer-main a { color: #f5eef7; }
#footer-main a:hover { color: #c4e8a4; }
#footer-main #copyright { color: #e3d6e8; }

@media (max-width: 1050px) {
    #header-content-wrapper { padding: 8px 20px; }
    #navmain > div > ul > li > a { padding: 12px 6px; font-size: 13px; }
    #home-cols-inner { gap: 22px; }
    #main-content-home { padding: 30px 24px; }
}

@media (max-width: 799px) {
    #camera_wrap { width: calc(100% - 28px); margin-top: 14px !important; border-width: 4px; }
    #main-content-wrapper { width: calc(100% - 28px); margin-bottom: 32px; }
    body:not(.home) #main-content-wrapper { grid-template-columns: minmax(0, 1fr); margin-top: 16px; padding: 20px 18px; }
    #main-content-home { padding: 28px 22px; }
    #home-cols-inner { row-gap: 32px; }
    .camera_caption > div { padding: 14px 18px; }
}

@media (max-width: 480px) {
    #header-content-wrapper { padding: 8px 14px; }
    #home-cols-inner { grid-template-columns: minmax(0, 1fr); }
    #home-cols .col4a img { max-width: 240px; display: block; margin: 0 auto; }

}