/* ==========================================================================  Skamby & Omegns Borgerforening — modern responsive layout  Structural IDs/classes below (#wrapper, #venstre, #hSectionMenu, .webbox,  etc.) are generated by the Comasys CMS and cannot be renamed — only styled.  ========================================================================== *//* Required by the CMS — hides internal admin/tracking elements it doesn't  otherwise style itself. */#topDiv, #worker, #userOnline{ display:none;}.formHold #logoPrev{ display:none;}:root{ --bg:#f6f4ec; --surface:#ffffff; --text:#2f2f28; --text-muted:#6a6a5f; --accent:#2f6b3c; --accent-dark:#234f2c; --accent-light:#e7f0e3; --border:#e2ddce; --shadow:0 1px 3px rgba(40, 35, 20, 0.08), 0 4px 14px rgba(40, 35, 20, 0.06); --radius:10px;}*{ box-sizing:border-box;}html{ height:100%;}body{ min-height:100%; margin:0; padding:0; background:var(--bg); color:var(--text); font-family:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size:15px; line-height:1.65;}td{ vertical-align:top;}p{ margin:0 0 1em 0;}a{ color:var(--accent-dark); text-decoration:none;}a:hover{ text-decoration:underline;}h1{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:0 0 0.6em 0; font-weight:700; color:var(--accent-dark); line-height:1.25;}h2{ font-size:1.25rem; margin:1.4em 0 0.6em 0; font-weight:700; color:var(--accent-dark);}h3{ font-size:1rem; margin:1.2em 0 0.5em 0; font-weight:700;}.mceContentBody{ background-image:none; background-color:var(--surface);}table{ border-collapse:collapse;}#main table,.mceContentBody table{ border-collapse:separate; max-width:100%; display:block; overflow-x:auto;}img{ border:0; max-width:100%; height:auto;}/* ---------------------------------------------------------------------  Page shell — a single CSS Grid on #wrapper. #venstre and #indhold are  collapsed with display:contents so their children (#logo, #undermenu,  #menu, #midte, #hojre) can be placed directly as grid areas without  touching the CMS-required DOM nesting.  --------------------------------------------------------------------- */#wrapper{ max-width:1220px; margin:0 auto; padding:24px 20px 60px; display:grid; grid-template-columns:210px 1fr 300px; grid-template-areas:  "logo  nav nav"  "subnav main side"; column-gap:28px; row-gap:18px; align-items:start;}#venstre,#indhold{ display:contents;}#logo{ grid-area:logo;}#logo img{ display:block; width:100%; max-width:150px; height:auto;}#undermenu{ grid-area:subnav;}#menu{ grid-area:nav; align-self:center;}#midte{ grid-area:main; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 30px; min-width:0;}#hojre{ grid-area:side; display:flex; flex-direction:column; gap:18px; min-width:0;}/* ---------------------------------------------------------------------  Mobile hamburger toggle (CSS-only, no JS)  --------------------------------------------------------------------- */#navToggle{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;}.hamburger{ display:none; grid-area:burger; width:44px; height:44px; align-self:center; justify-self:end; border-radius:8px; border:1px solid var(--border); background:var(--surface); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;}.hamburger span{ display:block; width:22px; height:2px; background:var(--accent-dark); border-radius:2px;}/* ---------------------------------------------------------------------  Horizontal main navigation (#hSectionMenu — CMS-rendered table)  --------------------------------------------------------------------- */#hSectionMenu{ width:100%;}#hSectionMenu tbody,#hSectionMenu tr{ display:flex; flex-wrap:wrap; gap:4px;}#hSectionMenu td.menuSep{ display:none;}#hSectionMenu td{ display:block;}#hSectionMenu .icon{ display:none;}#hSectionMenu .link{ float:none;}#hSectionMenu a{ display:block; padding:10px 16px; border-radius:8px; font-weight:600; font-size:0.95rem; color:var(--text); background:transparent;}#hSectionMenu a:hover{ background:var(--accent-light); text-decoration:none;}#hSectionMenu .hSecItem.menuActive a{ background:var(--accent); color:#fff;}/* ---------------------------------------------------------------------  Category sub-menu (#autoMenu.sectionCategoryMenu — CMS-rendered table)  --------------------------------------------------------------------- */#undermenu{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px;}#autoMenu{ width:100%;}#autoMenu tbody,#autoMenu tr{ display:block;}#autoMenu td{ display:block;}#autoMenu .icon{ display:none;}/* The CMS's own stylesheet floats .icon/.link (".menuItem .link{float:left}")  for its old sprite-based layout. A plain display:block row/cell doesn't  contain a floated child, so every row collapsed to ~0 height and the  floated links stacked side by side instead of one per line. */#autoMenu .link{ float:none;}#autoMenu a{ display:block; color:var(--text);}#autoMenu .linkText{ padding:9px 12px; border-radius:8px; font-size:0.9rem;}#autoMenu a:hover .linkText{ background:var(--accent-light); text-decoration:none;}/* The CMS still renders an empty <table id="autoMenu"> (with only  whitespace inside) on pages with no sub-pages, so :empty never matches —  check for an actual row instead. */#undermenu:not(:has(tr)){ display:none;}/* ---------------------------------------------------------------------  Main content (#main — CMS placeholder content)  --------------------------------------------------------------------- */#main ul,#main ol{ padding-left:1.3em; margin:0 0 1em 0;}#main li{ margin-bottom:0.4em;}#main hr{ border:none; border-top:1px solid var(--border); margin:1.8em 0;}#main iframe{ width:100%; max-width:530px; aspect-ratio:530 / 315; height:auto; border:0; border-radius:8px; display:block;}#main a{ text-decoration:underline;}/* Newsletter / generic CMS forms */#main .label{ font-weight:600; margin-top:14px;}#main .field{ margin-top:4px;}#main .textField,#main input[type="text"],#main input[type="email"]{ width:100%; max-width:320px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; color:var(--text); background:var(--bg);}#main .textField:focus,#main input:focus{ outline:2px solid var(--accent); outline-offset:1px;}#main #button{ margin-top:16px;}#main #button input[type="submit"],#main input[type="submit"]{ background:var(--accent); color:#fff; border:none; padding:11px 26px; border-radius:8px; font-weight:600; font-size:0.95rem; cursor:pointer;}#main #button input[type="submit"]:hover,#main input[type="submit"]:hover{ background:var(--accent-dark);}.form .cell,.form .section .title{ padding-bottom:10px;}/* ---------------------------------------------------------------------  Right sidebar cards (#blade, #gallerier, #annoncer, #facebook)  --------------------------------------------------------------------- */#blade,#gallerier,#annoncer,#facebook{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px;}#blade > img,#annoncer > img{ display:block; margin-bottom:10px; border-radius:6px;}#blade .webboxes,#annoncer .webboxes{ display:flex; flex-wrap:wrap; gap:10px;}#blade .webbox img,#annoncer .webbox img{ border-radius:6px; max-width:120px;}#annoncer .webbox img{ max-width:100%;}#gallerier{ text-align:center;}#gallerier a{ display:block; font-size:1.1rem; font-weight:700; color:var(--accent-dark); padding:6px;}#facebook{ display:flex; align-items:center; justify-content:space-between;}#facebook a{ display:inline-flex;}.comasys{ opacity:0.75;}.billedeMargin{ margin-left:10px;}/* ---------------------------------------------------------------------  Responsive breakpoint  --------------------------------------------------------------------- */@media (max-width:900px){ #wrapper{  grid-template-columns:1fr auto;  grid-template-areas:   "logo  burger"   "nav  nav"   "subnav subnav"   "main  main"   "side  side";  row-gap:14px;  padding:16px 16px 40px;} #logo img{  max-width:110px;} .hamburger{  display:flex;} #menu{  align-self:stretch;} #hSectionMenu tbody, #hSectionMenu tr{  flex-direction:column;  gap:2px;} #menu{  max-height:0;  overflow:hidden;  transition:max-height 0.25s ease;  background:var(--surface);  border:1px solid var(--border);  border-radius:var(--radius);} #navToggle:checked ~ #menu{  max-height:600px;  padding:8px;} #hSectionMenu a{  border-radius:6px;} #midte{  padding:20px;} /* Category sub-menu reads as a row of tab/button chips on mobile (wrapping   side by side, since there's width to spare) — only the desktop sidebar   (narrow column) forces one per row. */ #autoMenu tbody{  display:flex;  flex-wrap:wrap;  gap:6px;} #autoMenu tr{  display:block;  width:auto;} #autoMenu .linkText{  background:#e9e7e0;  border:1px solid var(--border);} #autoMenu a:hover .linkText, #autoMenu a:active .linkText{  background:var(--accent-light);  border-color:var(--accent);}}@media (max-width:520px){ #blade .webbox img{  max-width:45%;}}