/* ============================================================================
   Stan Verdult Inventarisatie — modern rebuild of the Relaxation theme.

   The original top-ethica theme draws its box-chrome with fixed 714px-wide
   GIF sprites (top-2r.gif / middle-2r.gif / bottom-2r.gif). Those cannot be
   widened — stretching the layout to 1000px left the chrome misaligned and
   the float + negative-position sidebar overlapping the banner.

   This stylesheet is loaded LAST and overrides that chrome with pure CSS:
   flexible width, rounded corners, soft shadow, a real flexbox two-column
   layout. The despinoza visual identity is kept — olive page, cream panel,
   Georgia serif headings, the blue/orange accents.

   No PHP markup was changed; only the IDs/classes already in use are styled.
   ============================================================================ */

:root {
   --olive:       #a9ac99;   /* page background (despinoza brand) */
   --panel:       #fdfdfa;   /* content panel */
   --panel-soft:  #f4f4ec;   /* recessed sections */
   --panel-rule:  #c9ccb8;   /* banner divider */
   --ink:         #2c2418;   /* body text */
   --blue:        #005577;   /* headings */
   --orange:      #a06000;   /* links / accents */
   --sage:        #808979;   /* muted text */
   --sage-title:  #8f9279;   /* banner title */
   --border:      #e0e0d0;
   --darkred:     #990000;
   --serif:       Georgia, 'Times New Roman', Times, serif;
   --sans:        'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, sans-serif;
}

/* -- Reset the bits the old theme got wrong -------------------------------- */
html { height: auto; margin: 0; }

body {
   margin: 0;
   min-width: 0;                 /* kill the 714px min-width */
   padding: 30px 18px;
   background: var(--olive);
   color: var(--ink);
   font-family: var(--sans);
   font-size: 13px;
   line-height: 1.65;
   text-align: left;             /* kill the legacy IE centering hack */
}

/* -- Outer panel ---------------------------------------------------------- */
#container {
   position: relative;
   width: auto;
   max-width: 1120px;
   margin: 0 auto;
   background: var(--panel);     /* replaces middle-2r.gif */
   border-radius: 8px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.24);
   overflow: hidden;
}

#container-inner {
   width: auto;
   padding: 0 0 30px 0;
   background: none;             /* replaces bottom-2r.gif */
}

/* -- Banner --------------------------------------------------------------- */
#banner {
   position: relative;
   width: auto;
   height: auto;
   padding: 0;
   color: var(--sage-title);
   background: linear-gradient(180deg, #f6f6ee 0%, #ecebde 100%);
   border-bottom: 3px solid var(--panel-rule);
   text-align: left;
}

#banner-inner {
   margin: 0;
   padding: 18px 40px 20px 300px;
   min-height: 84px;
   /* dsp-stamp.gif is a fixed-size logo (440x77) -- fine as a raster image.
      Scaled to 250px wide; the left padding above clears it. 
   background: url(dsp-stamp.gif) no-repeat center center;
   background-size: cover; */
   background: url(dsp-stamp.gif) no-repeat;
   background-size: 100% 100%;
}

#banner-header {
   margin: 4px 0 2px 0;
   font-family: var(--serif);
   font-size: 30px;
   font-weight: normal;
   line-height: 1.2;
   color: var(--sage-title);
}
#banner-header a { color: var(--sage-title); text-decoration: none; }
#banner-header a:hover { text-decoration: none; color: var(--orange); }

#banner-description {
   margin: 0;
   font-family: var(--sans);
   font-size: 11px;
   font-weight: normal;
   letter-spacing: 0.09em;
   color: #a7aa95;
}

/* -- Page body: real flexbox two-column layout ---------------------------- */
#pagebody {
   position: static;
   width: auto;
}

#pagebody-inner {
   width: auto;
   display: flex;
   align-items: flex-start;
   gap: 34px;
   padding: 26px 40px 10px 40px;
}

/* main column */
#alpha {
   display: block;
   float: none;
   position: static;
   margin: 0;
   width: auto;
   flex: 1 1 auto;
   min-width: 0;                 /* allow shrink, prevent overflow */
   top: auto;
}
#alpha-inner { position: static; width: auto; }

/* sidebar */
#beta {
   display: block;
   float: none;
   position: static;
   margin: 0;
   width: 264px;
   flex: 0 0 264px;
   top: auto;                    /* kill the -92px overlap hack */
}
#beta-inner { position: static; width: auto; }

/* -- Content entries ------------------------------------------------------ */
.date-header {
   font-family: var(--sans);
   font-size: 11px;
   font-weight: bold;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--darkred);
   text-align: right;
   margin: 4px 0 18px 0;
}

.entry {
   position: static;
   overflow: visible;
   clear: both;
   width: auto;
   margin: 0 0 26px 0;
   padding: 20px 22px;
   background: var(--panel-soft);
   border: 1px solid var(--border);
   border-radius: 6px;
}

.entry-header {
   font-family: var(--serif);
   font-size: 19px;
   font-weight: normal;
   color: var(--blue);
   margin: 0 0 12px 0;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border);
}
.entry-header a { color: var(--blue); text-decoration: none; }

.entry-content { margin: 0; clear: both; }
.entry-body { clear: both; }

/* -- Sidebar modules ------------------------------------------------------ */
.module { font-size: 11px; width: auto; overflow: visible; }

.module-header {
   margin: 0 0 8px 0;
   padding-bottom: 6px;
   border-bottom: 2px solid var(--blue);
}

.module-header-title,
.module-header h2 {
   margin: 0;
   font-family: var(--serif);
   font-size: 15px;
   font-weight: normal;
   color: var(--blue);
   letter-spacing: 0.02em;
}

.module-content {
   margin: 0 0 24px 0;
   text-align: left;
}

.module-list,
.archive-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

.module-list-item {
   margin: 0;
   line-height: 1.7;
   border-bottom: 1px solid #ededdf;
}
.module-list-item:last-child { border-bottom: 0; }
.module-list-item a {
   display: block;
   padding: 4px 2px;
   color: #443;
   text-decoration: none;
}
.module-list-item a:hover { color: var(--orange); }

.module-powered .module-content {
   color: var(--sage);
   padding: 8px 10px;
   background: var(--panel-soft);
   border: 1px solid var(--border);
   border-radius: 4px;
   text-align: center;
   width: auto;
}

/* -- Generic typography inside the panel ---------------------------------- */
#container a { color: var(--orange); text-decoration: none; }
#container a:hover { text-decoration: underline; }

#container h2 {
   font-family: var(--serif);
   font-weight: normal;
   color: var(--blue);
}

#container p { line-height: 1.7; margin: 1em 0; text-align: left; }
#container li { line-height: 1.6; margin: 0.2em 0; text-align: left; }

/* -- Responsive: stack the columns on narrow screens ---------------------- */
@media (max-width: 860px) {
   body { padding: 0; }
   #container { border-radius: 0; }
   #banner-inner {
      padding: 18px 22px;
      background: none;          /* drop the logo on small screens */
      min-height: 0;
   }
   #banner-header { font-size: 23px; }
   #pagebody-inner {
      flex-direction: column;
      padding: 20px 22px;
      gap: 24px;
   }
   #beta {
      width: auto;
      flex: 1 1 auto;
      align-self: stretch;
   }
}