/* The trattoria skin: poco's light frame, the one Subzy wears, with an Italian
   paint on top. Poco's skin is loaded first and left untouched; only paint
   lives here.
   Linked with a content hash (App\Support\StaticAsset). The font URL is
   relative to this file, so it holds on a custom domain too.

   Norican is the script face of the Poco pizza demo itself (SIL OFL 1.1,
   licence in public/fonts/norican-OFL.txt). It replaces poco's Macedonian
   Artistic, which carries no Latin glyphs: under it every German script line
   fell back to Nunito. The latin subset is U+0000-00FF, so ä ö ü ß are in it.
   The face itself is declared once, in the poco skin that always loads first.

   html:root, not :root: the theme's own tokens are printed as :root in an
   inline <style> that can come after this file on the ordering pages, and
   (0,1,1) wins that tie wherever the two meet. */
html:root{
  --font-script:'Norican',var(--font-heading),cursive;
  /* Basil, the Italian green beside the brand's yellow and red. Measured:
     cream canvas on it about 6.0:1, white on it 6.4:1, so tile copy reads at AA. */
  --trattoria-basil:#2F6B39;
  --trattoria-basil-ink:#FFFFFF;
  /* On cream, accent WORDS are the secondary darkened until they are text:
     Fat Tony's red #E52528 measures 4.2:1 on the canvas raw and 6.3:1 here.
     Yellow is a fill on cream, never a word. */
  --accent-ink:color-mix(in srgb,var(--c-secondary) 78%,#000);
}
/* Norican has real weight of its own; poco's stroke was there to thicken a
   hairline face. */
.script,.eyebrow-script,.banner-script,.delivery-bubble,.dark-promo-script{-webkit-text-stroke:.01em currentColor}
/* ---------- the light frame, Italian paint ----------
   Poco's own white navigation and dark footer, as Subzy has them. The client
   logos this template is for are drawn on a dark square (Fat Tony's is
   #2D2D2D with a white tagline that vanishes on white), so the logo becomes a
   round badge: the shape of Subzy's round marks, the logo file untouched.
   Shape only, never size: poco's nav width budget stays as it is. */
.nav-logo,.nav-drawer-logo{border-radius:50%}
/* A thin green, white and red line under the navigation: the one place the
   flag is spelled out, and only as a hairline. */
.nav{border-bottom:0;background-image:linear-gradient(90deg,var(--trattoria-basil) 0 33.34%,#FFFFFF 33.34% 66.67%,var(--c-secondary) 66.67% 100%);background-size:100% 3px;background-repeat:no-repeat;background-position:bottom}
/* Calling is in basil green (Erdjan, 2026-10-08): the round phone button a
   phone shows is a solid green circle with a white icon, so it reads as
   "call" beside the yellow cart, and the number the wider header and the
   drawer show is the same green. White on basil and basil on white both
   measure 6.4:1. Two classes, so poco's .nav-icon:hover cannot repaint it. */
.nav .nav-icon-phone,.nav .nav-icon-phone:hover{background:var(--trattoria-basil);border-color:var(--trattoria-basil);color:var(--trattoria-basil-ink)}
.call-order .call-order-phone{color:var(--trattoria-basil)}
/* The cart is the "Jetzt bestellen" button's yellow (Daniel, 2026-10-09):
   the same fill, ink and hover as .btn-primary, so ordering looks the same
   wherever it is offered. Poco's red count badge sits on it unchanged. Two
   classes, so poco's .nav-icon:hover cannot repaint it. */
.nav .nav-icon-cart{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-ink)}
.nav .nav-icon-cart:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover);color:var(--c-primary-ink)}
/* The hero circle in the brand red instead of the primary yellow: the pizza
   sits on tomato, and the yellow stays for the buttons. Decorative only. Two
   classes, because poco's rule is printed by the block after this file. */
.poco-hero .poco-hero-circle{background:var(--c-secondary)}
/* An imageless hero centres its copy straight over the circle, and the
   accent ink on the brand red is 1.49:1. Without a pizza to sit behind, the
   circle is not drawn. Three classes beat poco's block-printed rule. */
.poco-hero:has(.hero-centered) .poco-hero-circle{display:none}
/* The third promo tile in basil instead of near-black: yellow, red, green.
   Two classes for the same reason; the medal ring takes the same green. */
.promo-banners .banner-dark{background:var(--trattoria-basil);color:var(--trattoria-basil-ink);--medal-bg:var(--trattoria-basil)}
/* The order band on a faint red gingham, the trattoria tablecloth. Poco puts
   .delivery-band on the .wrap itself, a direct child of the section, so the
   section is found with :has(); a browser without :has() shows the plain band.
   Three classes, because base.css paints even sections with a background
   shorthand at (0,2,2): only background-image is set here, so the even-row
   tint stays underneath the gingham. */
.section:has(> .wrap.delivery-band){background-image:repeating-linear-gradient(0deg,rgba(229,37,40,.05) 0 14px,transparent 14px 28px),repeating-linear-gradient(90deg,rgba(229,37,40,.05) 0 14px,transparent 14px 28px)}
/* ---------- promo tiles: the caption at full ink ----------
   Poco prints the tile caption at opacity .85. In the secondary's ink on
   Fat Tony's red that is #220606 on #E52528, 4.22:1 for 12.8px text and
   under AA; at full ink it is 4.63:1. Two classes, because poco's rule is
   printed by the block after this file. */
.promo-banners .banner-caption{opacity:1}
/* ---------- dark band: the badge ring on a phone ----------
   Poco collapses the badge to its text's own size below 640px, and the
   dashed ring (inset .4rem 1rem) then shrinks to a sliver that cuts through
   "AB 10 €". Hold the box at a size the ring can sit around. Two classes,
   because poco's rule is printed by the block after this file. */
@media (max-width:640px){.dark-promo .dark-promo-badge{width:9rem;height:7rem}}
/* ---------- dish cards: photographs, not cut-outs ----------
   Poco's menu-highlights well floats cut-out dish art inside a tinted,
   padded box with object-fit:contain. Fat Tony's dish pictures are
   photographs on white, which that turns into small letterboxed rectangles.
   A square white frame filled edge to edge shows the dish, and also crops
   away the corner stamp the supplier prints on its photos. auto-fit lets
   four cards share the row instead of leaving a fifth column empty. Two
   classes, because poco's rule is printed by the block after this file. */
.menu-highlights .dish-photo{padding:0;background:#fff;aspect-ratio:1}
.menu-highlights .dish-photo img{object-fit:cover;filter:none}
.menu-highlights .menu-highlights-grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
/* The hero (spec 2026-10-08, Fat Tony's pick): the photo is the Quattro
   Formaggi on its board, so it no longer turns. Poco's own scroll tilt
   (data-drift-r in layout.js, the one Subzy has) moves it instead; the old
   turn animation outranked that inline rotate and hid it. The cut-outs keep
   poco's scroll drift and pointer lean (data-drift, data-mouse). */
.poco-hero .hero-photo{transform-origin:50% 50%;filter:none}
/* The shadow is a soft disc under the photo rather than poco's drop-shadow
   on it. It sits between the red circle and the photo (z-index 1 against
   the photo's 2). */
.poco-hero .hero-visual::before{content:"";position:absolute;left:12%;right:8%;top:10%;bottom:2%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,20,8,.34),rgba(40,20,8,0));transform:translateY(6%);z-index:1;pointer-events:none}
/* The photo at 1.3 times poco's size, scaled about its own centre (poco puts
   it at left 4%, top 0, width 96%), so the pizza leads and the cut-outs
   frame it. Phones take 1.15: at 1.3 the board runs past both edges of a
   390px screen. Poco's phone rule drops the photo 6%, so the centre there
   is 54% down, not 48%. Two classes beat poco's one. The numbers are
   tuned to Fat Tony's photo, a 1000px square with the board 94% wide; a new trattoria client's photo may want its own. */
.poco-hero .hero-photo{left:-10.4%;top:-14.4%;width:124.8%;max-width:none}
@media (max-width:900px){.poco-hero .hero-photo{left:-3.2%;top:-1.2%;width:110.4%}}
/* A little in from the right on a wide screen. The cut-outs move with it,
   the red circle stays in its corner. */
@media (min-width:900px){.poco-hero .hero-visual{translate:-4vw 0}}
/* Between a tablet and a small laptop (900 to 1099px) the copy column is
   narrow, and the 1.3 board pushed 4vw in reaches the end of the address
   and of FAT TONY. There it keeps the phone size, 1.15 about the desktop
   centre, and does not move in. */
@media (min-width:900px) and (max-width:1099px){.poco-hero .hero-photo{left:-3.2%;top:-7.2%;width:110.4%}.poco-hero .hero-visual{translate:none}}
/* FAT TONY on one row: poco drops the accent word onto a line of its own.
   No nowrap, so a longer heading on a narrow phone still wraps. */
.poco-hero .hero-heading .accent-word{display:inline}
/* The line under the heading in Italian colours, one per word: basil, the
   brand's yellow, the brand's red, then round again. Yellow alone is about
   1.9:1 on the cream, so it carries a darker outline of itself. The "&"
   between the words is plain text and stays muted ink. */
.poco-hero .hero-subheading{font-size:clamp(1.9rem,1.3rem + 1.7vw,2.9rem);line-height:1.15;margin:0 0 .9rem;color:var(--ink-muted)}
.poco-hero .hero-heading:has(+ .hero-subheading){margin-bottom:.35rem}
.poco-hero .hero-subheading span:nth-of-type(3n+1){color:var(--trattoria-basil)}
.poco-hero .hero-subheading span:nth-of-type(3n+2){color:var(--c-primary);-webkit-text-stroke:.03em color-mix(in srgb,var(--c-primary) 70%,#000);paint-order:stroke fill}
.poco-hero .hero-subheading span:nth-of-type(3n){color:color-mix(in srgb,var(--c-secondary) 88%,#000)}