/* Property detail page: contain the .left / .right floats so #footer doesn't
   ride up into the page when our single-page layout makes .left tall. Legacy
   never hit this because each tab was its own URL — our SPA-style detail
   makes .left ~6000px while .right is ~400px. */
#view { display: flow-root; }

/* reCAPTCHA legal notice on the contact form — small, muted, under the button. */
.recaptcha_notice { font-size: 11px; color: #777; margin-top: 8px; line-height: 1.4; }
.recaptcha_notice a { color: #555; }

/* Sticky top bar: holds logo + main menu + lang switcher. Becomes pinned at
   the viewport top when the page scrolls, hero photo scrolls away below it.
   Background colour follows the legacy palette: dark #322f2e (same as the
   footer) with white menu text — preserves the legacy "white text on dark
   ground" look. The logo gets a small white panel so its blue lettering
   stays readable on the dark bar. */
#topbar {
    position: sticky; top: 0; z-index: 100;
    background: #322f2e;
    height: 111px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
#topbar .logo {
    display:block; margin:10px 0 0;
    background:#fff; padding: 4px 10px;
    border-radius: 0 0 4px 4px;
}
/* Legacy menu was pinned at top:0 of a 68px row, sitting on the hero photo.
   In the new 111px sticky topbar we vertically centre it instead. */
#topbar #main_menu { position:absolute; top:50%; right:0; transform: translateY(-50%); }

/* Restore legacy menu colours over the dark topbar bg. */
#topbar #main_menu span a.o          { color: #fff; }
#topbar #main_menu span a.o:hover    { color: #000; text-decoration: underline; }
#topbar #main_menu span.active a.o   { color: #fff; text-decoration: underline; }
#topbar #main_menu span.active a.o:hover { color: #000; }

/* Dropdown panel under "Woningaanbod" — legacy light grey + dark links. */
#topbar #main_menu .drop                { background:#e6e6e6; box-shadow: 0 4px 8px rgba(0,0,0,.2); }
#topbar #main_menu .drop a              { color:#322f2e; text-decoration: none; padding: 4px 12px; }
#topbar #main_menu .drop a:hover        { background:#fff; color:#000; }
#topbar #main_menu span.o1:hover .drop  { display:block !important; }   /* CSS-only hover dropdown */

/* Language toggle — small pill at the right end of the menu row, vertically
   aligned with the menu text baseline. Two abutting halves; the active half
   is filled white with dark text, the other ghosted. Hover on the inactive
   half darkens the bg for clear contrast (not white-on-white). */
#topbar #main_menu span.o4.lang_switch {
    width: auto;
    height: 68px;                          /* same row height as menu items */
    display: inline-flex; align-items: center;   /* vertically centre the pill */
    float: left;
    margin: 0 0 0 18px;
    padding: 0;
}
#topbar #main_menu span.o4.lang_switch::before { content: ""; }   /* no separator */
#topbar #main_menu span.o4.lang_switch a,
#topbar #main_menu span.o4.lang_switch a:visited {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    height: 24px; min-width: 32px; padding: 0 9px;
    font: 700 12px 'Open Sans Condensed', sans-serif;
    letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
#topbar #main_menu span.o4.lang_switch a:first-child {
    border-radius: 999px 0 0 999px; border-right: none;
}
#topbar #main_menu span.o4.lang_switch a:last-child {
    border-radius: 0 999px 999px 0;
}
#topbar #main_menu span.o4.lang_switch a:hover {
    color: #fff;
    background: rgba(0,0,0,0.35);          /* darker fill — readable against white text */
}
#topbar #main_menu span.o4.lang_switch a[aria-current="true"] {
    background: #fff; color: #322f2e; border-color: #fff;
}
#topbar #main_menu span.o4.lang_switch a[aria-current="true"]:hover {
    color: #322f2e; background: #fff;       /* active half: no white-on-white when hovered */
}

/* Marina's user-friendly admin (login + dashboard). Standalone — doesn't touch main.css. */
.content_block.login_block,
.content_block.dashboard_block {
    background: #fff;
    margin: 30px auto;
    padding: 30px 40px;
    max-width: 939px;
    box-sizing: border-box;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 13px;
    color: #333;
}
.content_block h1 { font: 300 28px "Open Sans Condensed", Arial, sans-serif; color:#7a4b2a; margin: 0 0 20px; }
.content_block h2 { font: 300 20px "Open Sans Condensed", Arial, sans-serif; color:#7a4b2a; margin: 25px 0 12px; }

.login_form .field, .property_form .field { margin-bottom: 12px; }
.login_form label, .property_form label { display:block; font-weight:600; margin-bottom:4px; }
.login_form input[type=text],
.login_form input[type=password],
.property_form input[type=text],
.property_form input[type=number],
.property_form input[type=url],
.property_form input[type=email],
.property_form select,
.property_form textarea {
    width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid #ccc;
    font-family:inherit; font-size:13px;
}
.property_form textarea { min-height: 100px; }

.btn {
    display:inline-block; padding:8px 18px; background:#7a4b2a; color:#fff;
    text-decoration:none; border:none; cursor:pointer; font:600 13px "Open Sans", Arial, sans-serif;
    margin-right: 6px;
}
.btn:hover { background:#5e3920; }
.btn_secondary { background:#999; }
.btn_secondary:hover { background:#666; }

.form_error, .has_error .errors {
    color:#b00020; background:#fbeaea; padding:8px 12px; border-left:3px solid #b00020;
    margin: 10px 0;
}

.dash_header { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom: 20px; }
.dash_actions { display:flex; align-items:center; gap:6px; }
.dash_actions form { margin: 0; }

.dash_table { width:100%; border-collapse: collapse; font-size:13px; }
.dash_table th, .dash_table td { padding:8px 10px; border-bottom:1px solid #eee; text-align:left; vertical-align:top; }
.dash_table th { background:#f4ece4; font-weight:600; color:#7a4b2a; }
.dash_table tr:hover { background:#fafafa; }
.dash_table a { color:#7a4b2a; text-decoration: none; }
.dash_table a:hover { text-decoration: underline; }

.messages { list-style:none; padding:0; margin: 0 0 15px; }
.messages li { padding:8px 12px; background:#eef7ee; border-left:3px solid #4a9a4a; color:#2a5d2a; }
.messages li.error { background:#fbeaea; border-color:#b00020; color:#b00020; }

.form_grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.form_grid.form_grid_wide { grid-template-columns: 1fr; }
.form_grid.form_grid_wide textarea { min-height: 260px; font-size: 14px; }
@media (max-width: 700px) { .form_grid { grid-template-columns: 1fr; } }
.field_checkbox { display:flex; align-items:center; gap:8px; }
.field_checkbox label { margin:0; font-weight:400; }
.field .help { color:#666; font-size:11px; margin-top:4px; }

/* Compact single-column photo formset — thumb on left, inline tiny controls. */
.photo_formset { display:flex; flex-direction:column; gap: 4px; }
.photo_row {
    display:grid;
    grid-template-columns: 60px minmax(0, 1fr) 60px 90px 200px 90px;
    gap:10px; align-items:center; padding:4px 6px;
    background:#f8f4ee; border:1px solid #eee;
    font-size: 12px;
}
.photo_row > img { display:block; width:60px; height:45px; object-fit:cover; }
.photo_row .sub { margin:0; min-width:0; }
.photo_row .sub label { display:inline; font-weight:600; margin-right:4px; }
.photo_row .sub input[type=text]   { width:100%; padding:2px 4px; font-size:12px; }
.photo_row .sub input[type=number] { width:46px;  padding:2px 4px; font-size:12px; }
.photo_row .sub input[type=file]   { font-size:11px; width:100%; }
.photo_row .sub_caption    { /* col 2 */ }
.photo_row .sub_sort       { white-space:nowrap; }
.photo_row .sub_plan       { white-space:nowrap; }
.photo_row .sub_image      { font-size:11px; }
.photo_row .sub_image a    { text-decoration:none; color:#7a4b2a; }
.photo_row .sub_delete     { white-space:nowrap; text-align:right; }
.photo_row .sub_hidden     { display:none; }
.photo_row .field_label_inline { color:#7a4b2a; }


/* --- tabbed editor + dashboard scope tabs (legacy admin workflow) --- */
.breadcrumb { font-size: 12px; color: #888; margin-bottom: 4px; }
.breadcrumb a { color: #888; }
.edit_tabs { margin: 14px 0 18px 0; }
.dash_scope_tabs a { margin-right: 4px; }
.save_buttons { clear: both; padding: 18px 0 8px 0; }
.save_buttons .btn { margin-right: 8px; }
.field_wide textarea { width: 100%; min-height: 220px; box-sizing: border-box; }
.form_grid_wide { display: block; }
button.linklike { background: none; border: 0; padding: 0; color: #7a2c2c; cursor: pointer; font: inherit; text-decoration: underline; }
.dash_table td small { color: #777; }