/* =========================================================
   AUTOMOBILE KOBEISSI — layout for IONOS MyWebsite
   Written against the real rendered markup.

   Everything IONOS outputs is wrapped in .diyw, and its own
   stylesheets are scoped that way too. Any rule that has to
   beat IONOS is prefixed .diyw and, where its module CSS is
   inline, marked !important. Rules for markup that only this
   template produces stay unprefixed.
   ---------------------------------------------------------
   ONE LINE TO CHANGE: --accent, just below.
   ========================================================= */

:root{
  /* Taken from the logo SVGs, not eyeballed:
     navy #12283F  gold #C2A15B  cream #F5F1E7  light gold #D8BC7E */
  --ink:      #0E1F32;   /* deepest navy — top bar, call band  */
  --ink2:     #12283F;   /* brand navy — head bar, footer      */
  --paper:    #F5F1E7;   /* brand cream — fact strip           */
  --text:     #22303F;
  --muted:    #6B7789;
  --accent:   #C2A15B;   /* brand gold                         */
  --accent-d: #A5843F;   /* darker gold: links on cream/white  */
  --accent-l: #D8BC7E;   /* light gold: accents on navy        */
  --eu:       #0B3EA8;   /* EU plate blue — deliberately not
                            the brand navy, or the band would
                            vanish against the bar             */
  --hair:     rgba(255,255,255,.14);
  --hair-d:   #E3DCCB;   /* cream-toned hairline               */

  --wrap:    1440px;     /* content measure; bars stay full-bleed */

  /* Display is the condensed cut of the body superfamily, so the
     banner and section headings share their skeleton with the nav
     and footer instead of arguing with them. The plate uses the
     same face — condensed grotesque is what real plates use. */
  --display: "IBM Plex Sans Condensed","Barlow Condensed","Arial Narrow",sans-serif;
  --body:    "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --plate:   "IBM Plex Sans Condensed","Arial Narrow",Impact,sans-serif;
}

/* =========================================================
   0. RESET THE IONOS SHELL
   layout.css sizes and floats #container/#wrapper/#content/
   #sidebar for the stock template. All of it has to go.
   ========================================================= */
body.body{
  margin:0; padding:0; background:#fff;
  font:400 16px/1.65 var(--body); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.diyw{width:auto !important; max-width:none !important; min-width:0; margin:0; padding:0; background:none}
html,body.body{min-width:0; overflow-x:hidden}
.diyw #container,
.diyw #wrapper{
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  background:none; border:0; float:none;
}
.diyw #content,
.diyw #sidebar,
.diyw #footer,
.diyw #header,
.diyw #header_wrapper{
  width:auto !important; float:none !important;
  margin:0; border:0;
}
.diyw #content_area{width:auto; margin:0; padding:0}
.c{clear:both; height:0; line-height:0; font-size:0; overflow:hidden}
.gutter{max-width:var(--wrap); margin:0 auto; padding:0 40px}
.diyw img{border:0}

.diyw p.eyebrow{
  margin:0 0 10px; font:600 12px/1 var(--body);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-d);
}
.eyebrow_light{color:var(--accent)}


/* =========================================================
   1. TOP BAR + PLATE
   The separator dot and the EU ring are pseudo-elements:
   Tidy deletes empty <span>s on save, so they cannot be
   markup.
   ========================================================= */
#topbar{background:var(--ink); color:rgba(255,255,255,.6); font-size:13px}
.topbar_in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:46px; flex-wrap:wrap;
}
.diyw p.topbar_meta{margin:0}
.topbar_meta span + span:before{
  content:""; display:inline-block; vertical-align:middle;
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); margin:0 12px;
}
.topbar_call{display:flex; align-items:center; gap:14px}
.topbar_label{
  font:600 11px/1 var(--body); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}

.diyw a.plate{
  display:inline-flex; align-items:stretch; overflow:hidden;
  height:34px; border:2px solid #0E0E0E; border-radius:6px;
  background:#fff; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.diyw a.plate:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.35)}
.plate_eu{
  width:22px; background:var(--eu); color:#fff;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:3px 0 2px;
}
.plate_eu:before{
  content:""; display:block;
  width:11px; height:11px; border-radius:50%;
  border:1.5px dotted #F5C518;
}
.plate_d{font:700 10px/1 var(--body)}
.plate_num{
  display:flex; align-items:center; padding:0 12px;
  font:700 19px/1 var(--plate); letter-spacing:.06em;
  color:#111; white-space:nowrap;
}
.plate_lg{height:62px; border-radius:9px; border-width:3px}
.plate_lg .plate_eu{width:38px; padding:6px 0 4px}
.plate_lg .plate_eu:before{width:18px; height:18px}
.plate_lg .plate_d{font-size:14px}
.plate_lg .plate_num{font-size:36px; padding:0 22px}


/* =========================================================
   2. HEAD BAR + NAVIGATION
   Real markup:
     #navigation > .webnavigation > ul#mainNav1.mainNav1
       > li.navTopItemGroup_N > a.current.level_1 > span
       > li > ul#mainNav2.mainNav2 > li > a.level_2 > span
   Level 2 arrives in its own <li>, so it is pushed to a
   full-width second row rather than a dropdown.
   ========================================================= */
#headbar{
  position:sticky; top:0; z-index:900;
  background:var(--ink2); border-bottom:1px solid var(--hair);
}
.headbar_in{display:flex; align-items:center; gap:28px; min-height:112px; flex-wrap:wrap}
.diyw a#brand{flex:0 0 auto; line-height:0; text-decoration:none}
.diyw a#brand img{max-height:76px; width:auto; display:block}
.diyw a#headcta{flex:0 0 auto; padding:11px 20px; font-size:12px}

#navigation{margin-left:auto}
.diyw #navigation .webnavigation{margin:0; padding:0; background:none; border:0}
.diyw #navigation ul#mainNav1{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:3px;
  background:none; border:0;
}
.diyw #navigation ul#mainNav1 li{
  margin:0; padding:0; list-style:none;
  background:none; border:0; float:none; width:auto;
}
.diyw #navigation ul#mainNav1 a{
  display:block; padding:10px 14px; text-decoration:none; border:0;
  border-radius:4px; background:none;
  font:600 13px/1 var(--body); letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
  transition:color .16s ease, background .16s ease;
}
.diyw #navigation ul#mainNav1 a span{display:inline; background:none; padding:0}
.diyw #navigation ul#mainNav1 a:hover{color:#fff; background:rgba(255,255,255,.07)}
.diyw #navigation ul#mainNav1 a.current{color:var(--accent); background:none}

/* --- the sub-menu, as a dropdown panel -----------------------------
   IONOS puts ul#mainNav2 in its OWN <li>, immediately after the
   current-page <li>. There is no parent/child link to hover, but the
   two are adjacent siblings, so the trigger is reachable with
   `li:has(a.current):hover + li`. The panel is positioned against
   #headbar (the li is set static) so it spans the full bar. */
.diyw #navigation ul#mainNav1 > li:has(> ul#mainNav2){position:static}

.diyw #navigation ul#mainNav2{
  position:absolute; top:100%; left:0; right:0;
  max-width:var(--wrap); margin:0 auto;
  list-style:none;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px;
  padding:18px 40px 24px;
  background:var(--ink); border-top:2px solid var(--accent);
  box-shadow:0 22px 44px rgba(0,0,0,.38);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.diyw #navigation ul#mainNav1 > li:has(a.current):hover + li > ul#mainNav2,
.diyw #navigation ul#mainNav1 > li:has(a.current):focus-within + li > ul#mainNav2,
.diyw #navigation ul#mainNav1 > li:has(> ul#mainNav2):hover > ul#mainNav2,
.diyw #navigation ul#mainNav1 > li:has(> ul#mainNav2):focus-within > ul#mainNav2{
  opacity:1; visibility:visible; transform:none;
}
.diyw #navigation ul#mainNav2 a{
  padding:7px 10px; font:500 13px/1.3 var(--body);
  letter-spacing:.04em; text-transform:none;
  color:rgba(255,255,255,.62); border-radius:3px;
}
.diyw #navigation ul#mainNav2 a:hover{color:var(--ink2); background:var(--accent)}
.diyw #navigation ul#mainNav2 a.current{color:var(--accent); background:rgba(194,161,91,.15)}

/* burger — bars are a pseudo-element, see note above */
#navtoggle{position:absolute; left:-9999px}
#burger{display:none}
#burger:before{
  content:""; display:block; width:24px; height:2px; background:#fff;
  box-shadow:0 7px 0 #fff, 0 -7px 0 #fff;
}


/* =========================================================
   3. BUTTONS — mine, plus IONOS's own button module
   ========================================================= */
.diyw a.btn,
.diyw a.diyfeLinkAsButton{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding:14px 28px; border-radius:4px; border:2px solid transparent;
  font:700 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.diyw a.btn_accent,
.diyw a.diyfeLinkAsButton{background:var(--accent); color:var(--ink2); border-color:var(--accent)}
.diyw a.btn_accent:hover,
.diyw a.diyfeLinkAsButton:hover{background:var(--accent-d); border-color:var(--accent-d); color:#fff}
.diyw a.btn_ghost{color:#fff; border-color:rgba(255,255,255,.5); background:transparent}
.diyw a.btn_ghost:hover{background:var(--paper); color:var(--ink2); border-color:var(--paper)}


/* =========================================================
   4. HERO
   The emotionheader area renders a whole module: a slideshow,
   a logo overlay, a title overlay, a tinted title box and an
   SVG copy of the title. All the overlays are hidden — the
   headline below is the real one — and the image is stretched
   to fill.
   ========================================================= */
.diyw #header_wrapper{position:relative; background:var(--ink); overflow:hidden}
.diyw .hero_media{
  position:absolute; top:0; left:0; right:0; bottom:0;
  z-index:1; overflow:hidden;
}
.diyw .hero_media div#emotion-header{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  background:none !important; position:relative; margin:0;
}
.diyw .hero_media #ehSlideshowPlaceholder,
.diyw .hero_media #ehSlideShow,
.diyw .hero_media #ehSlideShow .slide-container,
.diyw .hero_media #ehSlideShow .slide-container > div{
  position:absolute; top:0; left:0;
  width:100% !important; height:100% !important;
}
.diyw .hero_media #emotion-header img{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  display:block; object-fit:cover;
  filter:saturate(.85) contrast(1.05);
}
/* overlays from the old header — hidden, not deleted */
.diyw #emotion-header > a,
.diyw img#emotion-header-logo,
.diyw div#emotion-header-title-bg,
.diyw #emotion-header strong#emotion-header-title,
.diyw #emotion-header .notranslate,
.diyw svg#emotion-header-title-svg{display:none !important}

.hero_veil{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(100deg,
    rgba(14,31,50,.95) 0%, rgba(14,31,50,.82) 42%, rgba(14,31,50,.30) 100%);
}
.hero_in{position:relative; z-index:3; padding-top:82px; padding-bottom:78px; color:#fff}
.diyw p.hero_title{
  margin:0 0 20px; color:#fff;
  font:700 clamp(46px,7vw,94px)/.96 var(--display);
  text-transform:uppercase; letter-spacing:-.005em;
}
.diyw p.hero_sub{
  margin:0 0 34px; max-width:36ch;
  font-size:18px; line-height:1.6; color:rgba(255,255,255,.8);
}
/* Qualified with the element on purpose. web.css ships
   `body, p, .diyw p, h1, .diyw h1, ... { margin:0; padding:0 }`
   and loads AFTER this file, so a bare `.hero_actions` (0,1,0) is
   beaten by `.diyw p` (0,1,1). `.diyw p.hero_actions` scores
   (0,2,1) and holds. Same reason for p.hero_sub and p.eyebrow. */
.diyw p.hero_actions{margin:0; padding-top:16px; display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap}

/* phone rides on the button row rather than stacking under it —
   deliberately NOT a third plate. The plate is the signature, and
   using it three times on one screen spends it. */
.diyw a.hero_call{
  display:inline-flex; align-items:baseline; gap:12px;
  text-decoration:none; padding-left:22px;
  border-left:2px solid rgba(255,255,255,.25);
}
.hero_call_lbl{
  font:600 11px/1 var(--body); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap;
}
.diyw a.hero_call b{
  font:700 clamp(24px,2.6vw,32px)/1 var(--plate);
  letter-spacing:.02em; color:#fff; white-space:nowrap;
  transition:color .18s ease;
}
.diyw a.hero_call:hover b{color:var(--accent-l)}


/* =========================================================
   4b. THE BANNER IS TEMPLATE-LEVEL, SO IT LANDS ON EVERY PAGE
   IONOS marks the home page with body.startpage (and gives every
   page a #page-<id>). That is the only hook available, since one
   template serves the whole site. Subpages keep a slim image band
   and drop the headline, buttons and phone.
   ========================================================= */
body:not(.startpage) .hero_in{display:none}
body:not(.startpage) .diyw #header_wrapper{height:200px}
body:not(.startpage) .hero_veil{
  background:linear-gradient(100deg,
    rgba(14,31,50,.86) 0%, rgba(14,31,50,.62) 60%, rgba(14,31,50,.34) 100%);
}


/* =========================================================
   5. FACT STRIP
   ========================================================= */
#facts{background:var(--paper); border-bottom:1px solid var(--hair-d)}
.facts_grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair-d)}
.fact{background:var(--paper); padding:26px 24px}
.fact b{display:block; font:700 28px/1.1 var(--display); text-transform:uppercase; color:var(--ink2)}
.fact span{display:block; margin-top:5px; font-size:14px; color:var(--muted)}


/* =========================================================
   6. CONTENT
   Real markup: #content > .gutter > #content_area >
   .sortable-matrix > .n.module-type-XXX.diyfeLiveArea
   ========================================================= */
#content{padding:74px 0 84px}
.diyw #content h1,
.diyw #content h2,
.diyw #content h3,
.diyw #content h4{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase; color:var(--ink2); line-height:1.08;
}
.diyw #content h1{font-size:clamp(32px,4.2vw,52px); margin:0 0 18px}
.diyw #content h2{font-size:clamp(25px,3.2vw,36px); margin:0 0 14px}
.diyw #content h3{font-size:22px; margin:0 0 12px}
.diyw #content p{margin:0 0 18px}
.diyw #content a{color:var(--accent-d)}
.diyw #content .module-type-text a:hover{color:var(--ink)}

/* the three-column teaser grid — floats replaced with real grid */
.diyw #content .diyfeModGridGroup{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:44px; margin:34px 0;
}
.diyw #content .diyfeModGridElement{
  width:auto !important; float:none !important;
  margin:0 !important; padding:0 !important;
}
.diyw #content .diyfeModGridGroup > div[style*="clear"]{display:none}

/* image modules */
.diyw #content .imageSubtitle .align-container{margin:0}
.diyw #content .imageSubtitle img{
  border-radius:5px; height:auto;
  box-shadow:0 1px 2px rgba(18,40,63,.10), 0 10px 26px rgba(18,40,63,.08);
  transition:transform .22s ease, box-shadow .22s ease;
}
.diyw #content a.imagewrapper:hover img{
  transform:translateY(-3px);
  box-shadow:0 4px 8px rgba(18,40,63,.13), 0 16px 36px rgba(18,40,63,.16);
}

/* the 22 brand logos: a stack of separate image modules in the
   first grid column, retiled into a 3-across grid */
.diyw #content .diyfeModGridElement1st .sortable-matrix-child{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start;
}
.diyw #content .diyfeModGridElement1st .module-type-imageSubtitle{
  flex:0 0 calc(33.333% - 7px); margin:0;
}
.diyw #content .diyfeModGridElement1st .module-type-text,
.diyw #content .diyfeModGridElement1st .module-type-header,
.diyw #content .diyfeModGridElement1st .module-type-spacer{flex:0 0 100%}
.diyw #content .diyfeModGridElement1st .align-container{
  max-width:none !important; width:100%;
}
.diyw #content .diyfeModGridElement1st .imageSubtitle img{
  width:100% !important; max-width:none !important;
}

.diyw #content .module-type-googlemaps iframe{width:100%; height:340px}


/* =========================================================
   7. CALL BAND
   ========================================================= */
#callband{background:var(--ink); color:#fff; padding:56px 0}
.callband_in{display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap}
.diyw .callband_title{
  margin:0; color:#fff;
  font:700 clamp(30px,4vw,48px)/1.04 var(--display); text-transform:uppercase;
}


/* =========================================================
   8. FOOTER
   ========================================================= */
.diyw #footer{background:var(--ink2); color:rgba(255,255,255,.62); font-size:14.5px}
.footer_grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:44px; padding-top:58px; padding-bottom:48px}
.diyw .footer_h{
  margin:0 0 16px; font:700 13px/1 var(--body);
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
}
.diyw #footer p{margin:0 0 14px}
.diyw #footer a{color:rgba(255,255,255,.62); text-decoration:none}
.diyw #footer a:hover{color:var(--accent)}
.diyw #sidebar{margin:0; padding:0}

/* sidebar holds five image modules — same retiling treatment */
.diyw #sidebar_content .sortable-matrix{display:flex; flex-wrap:wrap; gap:10px}
.diyw #sidebar_content .module-type-imageSubtitle{flex:0 0 calc(33.333% - 7px)}
.diyw #sidebar_content .align-container{max-width:none !important; width:100%; margin:0 !important}
.diyw #sidebar_content img{
  width:100% !important; max-width:none !important;
  height:auto; border-radius:4px; display:block;
}

.diyw p.hours{display:flex; justify-content:space-between; gap:16px; max-width:230px}
.hours b{color:#fff; font-weight:600}

#footer_bottom{border-top:1px solid var(--hair); padding:20px 0; font-size:13px}
.diyw #footer_bottom #contentfooter{color:rgba(255,255,255,.42)}
.diyw #footer_bottom .leftrow{float:left}
.diyw #footer_bottom .rightrow{float:right; text-align:right}
.diyw #footer_bottom #contentfooter:after{content:""; display:block; clear:both}
.diyw #footer_bottom img.inline{vertical-align:middle; margin-right:5px}


/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .diyw a#headcta{display:none}
  .diyw #navigation ul#mainNav1 a{padding:10px 10px; font-size:12px; letter-spacing:.08em}
  .diyw #content .diyfeModGridGroup{gap:28px}
  .diyw #navigation ul#mainNav2{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:860px){
  .diyw p.topbar_meta{display:none}
  .topbar_in{justify-content:center; min-height:52px}

  #burger{
    display:flex; flex-direction:column; align-items:flex-end; gap:9px;
    margin-left:auto; cursor:pointer; padding:10px 4px; color:#fff;
  }
  #burger em{
    font:700 12px/1 var(--body); letter-spacing:.16em;
    text-transform:uppercase; font-style:normal;
  }

  #navigation{
    order:99; flex:0 0 100%; margin:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  #navtoggle:checked ~ #navigation{max-height:80vh; overflow-y:auto}
  .diyw #navigation ul#mainNav1{display:block; padding:6px 0 18px}
  .diyw #navigation ul#mainNav1 a{
    padding:13px 4px; font-size:14px; border-bottom:1px solid var(--hair);
  }
  .diyw #navigation ul#mainNav1 > li:has(> ul#mainNav2){border-top:0; margin:0; padding:0}
  .diyw #navigation ul#mainNav2{
    position:static; display:block; opacity:1; visibility:visible;
    transform:none; max-width:none; padding:0 0 0 14px;
    background:none; border-top:0; box-shadow:none;
  }
  .diyw a#brand img{max-height:52px}
  .headbar_in{min-height:74px}

  .headbar_in{min-height:66px; gap:16px}
  .hero_in{padding-top:56px; padding-bottom:52px}
  .diyw a.hero_call{border-left:0; padding-left:0; flex:0 0 100%; margin-top:4px}
  body:not(.startpage) .diyw #header_wrapper{height:140px}
  .facts_grid{grid-template-columns:repeat(2,1fr)}
  .footer_grid{grid-template-columns:1fr; gap:34px}
  .diyw #content .diyfeModGridGroup{grid-template-columns:1fr; gap:34px}
  .diyw #footer_bottom .leftrow,
  .diyw #footer_bottom .rightrow{float:none; text-align:left}
}

@media (max-width:560px){
  .plate_lg{height:50px}
  .plate_lg .plate_num{font-size:26px; padding:0 16px}
  .plate_lg .plate_eu{width:30px}
  .facts_grid{grid-template-columns:1fr}
  #content{padding:48px 0 56px}
  #callband{padding:42px 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}