/* ============================================================================
   dd-site.css — dark theme for the PUBLIC pages (index.php, indexil.php,
   maof.php). Loaded LAST, after bootstrap / bs5-compat / w3.css.

   WHY A SEPARATE FILE FROM dd-theme.css. dd-theme is 117 KB and is almost
   entirely DataTables, Editor and grid rules that no marketing page has any
   use for. These are the pages a prospective customer meets first and the ones
   Search Console measures, so they get ~4 KB instead. Nothing here depends on
   the app stylesheet, and the app never loads this one.

   THE TOKENS BELOW ARE DUPLICATED FROM dd-theme.css ON PURPOSE. Eight values,
   copied so the public pages need no part of the app's CSS. If a surface or
   the accent ever changes there, change it here too -- this comment is the
   only thing keeping the two in step, so treat the pair as one edit.

   SCOPE: everything is under `body.dd-site`, so linking this file cannot
   affect anything that does not opt in.
   ============================================================================ */

:root {
    --dd-s0: #0d1013;          /* page canvas                                */
    --dd-s1: #14181d;          /* card / raised panel                        */
    --dd-s2: #1b2027;          /* navbar, footer, recessed band              */
    --dd-text: #e8edf2;
    --dd-muted: #a4b0bd;
    --dd-line: #2c343e;
    --dd-s3: #232a33;        /* hover / open menu, above the navbar */
    --dd-accent: #ff5000;
    --dd-accent-rgb: 255, 80, 0;
    --dd-accent-hover: #ff7a3d;

    /* The four module identities, same values as dd-theme.css. Businesses is
       VIOLET: it used to be #f87171, byte-identical to the error red, so the
       module and the Delete glyph were the same pixel colour, and under
       deuteranopia it sat 9.2 dE from Properties green. */
    --dd-people:     #3ecfe0;
    --dd-properties: #4ade80;
    --dd-vehicles:   #fbbf24;
    --dd-businesses: #a78bfa;
}

body.dd-site {
    background-color: var(--dd-s0);
    color: var(--dd-text);
}

/* ---- w3.css surfaces ----
   The three pages use seven w3 colour classes, 94 times between them. w3.css
   hardcodes each as a plain background/color pair, so every one of them is a
   light slab on a dark page. They are remapped rather than removed: retiring
   w3.css is a LAYOUT change and belongs in its own commit, where a broken
   grid cannot be confused with a broken colour. */
body.dd-site .w3-white,
body.dd-site .w3-light-grey { background-color: var(--dd-s1) !important; color: var(--dd-text) !important; }
body.dd-site .w3-grey       { background-color: var(--dd-s2) !important; color: var(--dd-text) !important; }
body.dd-site .w3-dark-grey  { background-color: var(--dd-s0) !important; color: var(--dd-text) !important; }
body.dd-site .w3-black      { background-color: var(--dd-s0) !important; color: var(--dd-text) !important; }

/* 37 uses, and every one of them would be black on near-black. */
body.dd-site .w3-text-black { color: var(--dd-text) !important; }

/* w3-card is a white-ish drop shadow, invisible on dark and doing nothing.
   A hairline plus a real shadow separates the card from the canvas instead. */
body.dd-site .w3-card,
body.dd-site .w3-card-2,
body.dd-site .w3-card-4 {
    border: 1px solid var(--dd-line);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5) !important;
}

/* ---- The two light literals the pages declare themselves ----
   #dfe6e0 on .page/.view and #efdcd4 on .card-footer. Removed from the pages'
   own <style> blocks in the same pass, so these are the definitions now, not
   overrides of them. */
body.dd-site .page,
body.dd-site .view      { background-color: var(--dd-s1); }
body.dd-site .card      { background-color: var(--dd-s1); border-color: var(--dd-line); }
body.dd-site .card-footer {
    background-color: var(--dd-s2);
    border-top: 1px solid var(--dd-line);
    color: var(--dd-text);
}

/* ---- Navigation ---- */
body.dd-site .w3-bar {
    background-color: var(--dd-s2) !important;
    border-bottom: 1px solid var(--dd-line);
}

body.dd-site .w3-bar .w3-button { color: var(--dd-text); }

body.dd-site .w3-bar .w3-button:hover {
    background-color: rgba(var(--dd-accent-rgb), .14) !important;
    color: var(--dd-accent-hover) !important;
}

/* ---- Links and the accent ----
   #ff5001 appears inline 11 times across the pages: a one-digit drift from the
   brand #ff5000 that predates the design system. Left in the markup (it is
   visually identical) but everything this file sets uses the real value. */
body.dd-site a { color: var(--dd-accent-hover); }
body.dd-site a:hover,
body.dd-site a:focus-visible { color: var(--dd-accent); }
body.dd-site .w3-bar a { text-decoration: none; }

/* One filled action per view, in brand orange with a dark label -- white on
   #ff5000 is 3.28:1, --dd-s0 on it is 5.81:1. Same rule as the app's Save. */
body.dd-site .btn-primary,
body.dd-site .w3-button.dd-cta {
    background-color: var(--dd-accent);
    border-color: var(--dd-accent);
    color: var(--dd-s0);
    font-weight: 600;
}

body.dd-site .btn-primary:hover,
body.dd-site .w3-button.dd-cta:hover {
    background-color: var(--dd-accent-hover);
    border-color: var(--dd-accent-hover);
    color: var(--dd-s0);
}

/* ---- Odds and ends the pages inherit from Bootstrap ---- */
body.dd-site .price { color: var(--dd-accent); }
body.dd-site hr { border-color: var(--dd-line); opacity: 1; }
body.dd-site .text-dark { color: var(--dd-muted) !important; }
body.dd-site .bg-light  { background-color: var(--dd-s1) !important; }
body.dd-site .table     { --bs-table-color: var(--dd-text); --bs-table-bg: transparent; }

/* ---- Additions after seeing the pages rendered ---- */

/* THE PHOTOGRAPHS ARE ALL GONE. Every .bgimg-N carried one (hands4.jpg on the
   two homepages, maof.jpg on maof, about.jpg on the three inner sections) and
   all ten declarations were removed from the pages' own <style> blocks -- so
   the files are not fetched at all, not merely covered. The scrim rules that
   used to tame them were deleted with them: over a plain surface an inset
   shadow is not a scrim, it is just an unexplained dark veil on every
   section. Sections now fall back to their w3 surface, which alternates
   --dd-s0 and --dd-s1 down the page. Placeholder by intent -- real artwork
   comes later. */
/* THE HERO CTAs were w3-red #f44336 and w3-orange #ff9800 -- Material tones,
   neither of them the brand, and the red is the product's semantic danger
   colour sitting on a marketing button. One filled action per view, the rule
   the app's dialogs and the auth pages already follow: the first CTA takes
   brand orange with a dark label (5.81:1; white on #ff5000 is 3.28:1), the
   second becomes a ghost so the pair reads as primary + secondary rather than
   as two shouts. Order and emphasis are preserved. */
body.dd-site .bgimg-1 .w3-red,
body.dd-site .w3-red {
    background-color: var(--dd-accent) !important;
    color: var(--dd-s0) !important;
    font-weight: 600;
}

body.dd-site .bgimg-1 .w3-red:hover,
body.dd-site .w3-red:hover {
    background-color: var(--dd-accent-hover) !important;
    color: var(--dd-s0) !important;
}

body.dd-site .w3-orange {
    background-color: transparent !important;
    color: var(--dd-text) !important;
    border: 1px solid rgba(255, 255, 255, .38);
}

body.dd-site .w3-orange:hover {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--dd-text) !important;
}

/* w3-gray is the American spelling of a class already handled; w3.css defines
   both and the pages use both. */
body.dd-site .w3-gray { background-color: var(--dd-s2) !important; color: var(--dd-text) !important; }

/* ---- The hero loses its photograph (index + indexil) ----
   hands4.jpg is a 4928x2677 near-white photo of stacked folders. On a dark
   page it was the whole problem: scrimmed hard enough to belong, it turned to
   mud; left alone, it was a floodlight next to everything else. Dropped
   entirely, which also stops a 4928px image being fetched on the two pages
   Search Console measures.

   The declaration was removed from each page's own <style>, so there is no
   request at all -- not a hidden image.

   `dd-hero` is a marker class rather than styling .bgimg-1 directly, because
   maof.php's hero is a DIFFERENT photo (maof.jpg) that is still in use and
   still wants the scrim below.

   FILTER MUST BE CANCELLED: the header also carries w3-grayscale-min, i.e.
   filter: grayscale(.5). Harmless over a photo, but it would have desaturated
   the brand glow by half -- the glow is the only colour here now. */
body.dd-site .dd-hero {
    filter: none;
    box-shadow: none;                      /* cancels the photo scrim above */
    background-color: var(--dd-s0);
    /* Deliberately small and weak. An early attempt (900x520 at .20 plus
       1100x640 at .10) covered a 1920x902 hero almost edge to edge, so no
       black was left anywhere and the section read as brown. A glow is an
       accent only while most of the surface stays untouched.

       POSITIONED BY MEASUREMENT, not by eye: with the copy centred, the
       wordmark's centre sits at 50% / 35.7% of the hero, so the pool is at
       50% 36% and the light appears to come from behind the logotype. The
       second is a wide, very weak floor wash for depth -- centred too, since
       anything off-axis re-introduces the lopsidedness that centring the copy
       just removed. */
    background-image:
        radial-gradient(680px 380px at 50% 36%,
                        rgba(var(--dd-accent-rgb), .10) 0%,
                        rgba(var(--dd-accent-rgb), 0) 68%),
        radial-gradient(1200px 460px at 50% 104%,
                        rgba(var(--dd-accent-rgb), .05) 0%,
                        rgba(var(--dd-accent-rgb), 0) 72%);
    border-bottom: 1px solid var(--dd-line);
}

/* ---- LOGIN was Bootstrap blue ----
   The nav link carries .text-primary, i.e. #0d6efd -- the same default blue
   just retired from the auth pages, and the only cold colour left on the
   site. It is also the one nav item that is an action rather than a
   destination, so the brand accent is doing real work here, not just
   matching. .text-primary is an !important utility. */
body.dd-site .text-primary,
body.dd-site .text-primary i {
    color: var(--dd-accent) !important;
}

body.dd-site .w3-bar .text-primary:hover,
body.dd-site .w3-bar .text-primary:hover i {
    color: var(--dd-accent-hover) !important;
}

/* ---- The hero CTAs were rendering at 60% ----
   Both carry w3-opacity (opacity: .6), which existed to sink them into the
   photograph. With the photo gone it just made brand orange look like brick
   and cost the dark label its contrast -- the fill measured a correct
   rgb(255,80,0) while the pixels said otherwise, which is exactly the kind of
   thing computed style alone will not tell you.

   Scoped to the hero: w3-opacity is used on images further down the page,
   where it is doing what it was meant to. */
body.dd-site .dd-hero .w3-opacity,
body.dd-site .dd-hero .w3-hover-opacity { opacity: 1; }

/* ---- The four module icons ----
   They use Bootstrap's text-info / -success / -warning / -danger as module
   stand-ins -- the same 4-colour legend the app's navbar and dialog titles
   use, and the same reason it keeps causing trouble: three of them coincide
   with a semantic token by accident, and the fourth does not. Businesses was
   still rendering Bootstrap red #dc3545 here, advertising an identity the app
   dropped when it moved to violet, so the homepage and the product disagreed
   about what Businesses looks like.

   Now the real palette: cyan 10.18:1, green 10.95:1, amber 11.43:1 and violet
   7.01:1 on --dd-s0.

   SCOPED TO GLYPHS via [class*="fa-"]. All 44 uses on these pages are icons
   today, but text-danger is also how an error message would be marked up, and
   that must stay red. Same guard the app uses in the Editor dialog titles. */
body.dd-site [class*="fa-"].text-info    { color: var(--dd-people)     !important; }
body.dd-site [class*="fa-"].text-success { color: var(--dd-properties) !important; }
body.dd-site [class*="fa-"].text-warning { color: var(--dd-vehicles)   !important; }
body.dd-site [class*="fa-"].text-danger  { color: var(--dd-businesses) !important; }

/* ---- Hero copy is centred on all three pages ----
   Interim: the heroes are placeholders until the artwork is designed, and
   centred copy is the arrangement that does not look accidental while a
   section is otherwise empty. Left-anchored copy only works when something
   occupies the other side, and the photograph that used to do that is gone.

   w3-display-left pins the block to the left edge (position:absolute; left:0;
   translate(0,-50%)), so centring means overriding the position, not just the
   text alignment. `text-align` needs !important because all three carry it
   inline -- two as `right`, one as the meaningless `middle`.

   Width is capped so the subtitle does not run edge to edge on a wide screen;
   min() keeps it fluid below that. RTL is unaffected: dir governs the text
   direction, text-align: center governs the block, and the two do not fight. */
body.dd-site .dd-hero .w3-display-left {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92%, 940px);
    text-align: center !important;
}

/* ---- Demo-server notice, under the hero CTAs ----
   digidrawer.com is the free demo and shop host: real people register on it and
   upload real files, but that data is explicitly disposable and is meant to be
   cleared periodically. Nothing on the site said so, which is exactly how a
   demo box ends up holding passports and title deeds nobody meant to leave
   there. The product stores IDs, property and vehicle records, so "don't upload
   the real thing" is the part that actually protects people.

   WHY IT LIVES IN THE HERO AND NOT IN THE APP: the application tree deploys
   UNCHANGED to the LAN appliance, where none of this is true -- there the data
   is permanent and privately held. A banner in mbregister.php or mb.php would
   have to be forked or feature-flagged per box, and forking the app per
   environment is the one thing the LAN port is set up to avoid. The hero CTA
   block is already public-site-only (a sold appliance has no "free to try"
   signup), so the caveat sits where it costs no divergence at all.

   Deliberately muted: --dd-muted is ~7:1 on the hero canvas, so it is properly
   legible, but it must not compete with the two accent CTAs directly above it.
   This is a caveat, not an alarm -- a red warning box under a "free to try"
   button reads as a fault in the product rather than a property of the demo.

   max-width is in ch so the three short lines wrap sensibly at any font size;
   the block is centred by the hero's own text-align, and RTL needs nothing
   extra here for the same reason the subtitle does not. */
body.dd-site .dd-demo-note {
    max-width: 54ch;
    margin: 1.25rem auto 0;
    color: var(--dd-muted);
    font-size: .8125rem;
    line-height: 1.6;
    /* Without this the English wraps to three lines with "documents." orphaned
       on the last one, which reads as sloppy directly under two polished CTAs.
       balance evens the line lengths instead. It is capped at ~6 lines by spec,
       so it costs nothing here, and browsers without it just wrap normally. */
    text-wrap: balance;
}

body.dd-site .dd-demo-note strong {
    color: var(--dd-text);
    font-weight: 600;
}

/* ---- Sections stop reserving room for photographs that no longer exist ----
   .bgimg-2/-3/-4 were sized to SHOW an image, not to fit their text:
   min-height 94%, 50% and 60% of the viewport respectively. With the photos
   removed, "About DigiDrawer" ended up anchored to the top of a nearly
   full-height box with a screen's worth of nothing beneath it -- the section
   was still holding the space, just holding it empty.

   min-height: 0 lets each one size to its content and its own padding again.

   The HERO is deliberately excluded: a full-viewport opening section is a
   choice, not a leftover, and .dd-hero keeps it. */
body.dd-site .bgimg-2,
body.dd-site .bgimg-3,
body.dd-site .bgimg-4 {
    min-height: 0;
}

/* ---- The language dropdown was a white card ----
   w3.css gives .w3-dropdown-content `background-color:#fff` and .w3-border a
   #ccc edge, so the LANGUAGE menu opened as a white panel hanging off a dark
   navbar -- the last light surface on the site, and one that only appears on
   hover, which is why it survived every full-page sweep. Its items are plain
   .w3-bar-item .w3-button, so they inherit the black w3.css sets on the
   container unless told otherwise.

   Raised surface rather than the navbar's, so an open menu reads as sitting
   ABOVE the bar it came from. */
body.dd-site .w3-dropdown-content {
    background-color: var(--dd-s3) !important;
    border-color: var(--dd-line) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

body.dd-site .w3-dropdown-content .w3-bar-item {
    color: var(--dd-text) !important;
}

body.dd-site .w3-dropdown-content .w3-bar-item:hover {
    background-color: rgba(var(--dd-accent-rgb), .16) !important;
    color: var(--dd-accent-hover) !important;
}

/* ---- The mobile sidebar, same class of miss as the dropdown ----
   `w3-sidebar w3-bar-block w3-white w3-card`, opened by the burger below
   993px. w3-white is already remapped above, but the sidebar needs more than
   a surface: it is a full-height panel overlaying the page, so it wants the
   raised colour and a real edge, not the same tone as the section behind it.

   Found by reasoning about what the sweep COULD NOT see rather than by
   looking: a rendered scan only reports what is on screen, and both this and
   the language menu are hidden until a user acts. Anything else revealed by
   hover, click or scroll on these pages deserves the same suspicion. */
body.dd-site .w3-sidebar {
    background-color: var(--dd-s3) !important;
    border-inline-end: 1px solid var(--dd-line);
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}

body.dd-site .w3-sidebar .w3-bar-item {
    color: var(--dd-text) !important;
}

body.dd-site .w3-sidebar .w3-bar-item:hover {
    background-color: rgba(var(--dd-accent-rgb), .16) !important;
    color: var(--dd-accent-hover) !important;
}

/* ---- FAQ accordion toggles ----
   15 `btn btn-link` buttons, one per question, rendering Bootstrap's dark
   link blue #6ea8fe -- the last cold colour on the site after LOGIN.

   NOT the accent, despite being interactive. Fifteen orange rows would
   out-shout the two real CTAs and break the rule the rest of the product
   follows: one filled/accented action per view, and it is the thing the view
   is for. These are headings you can open, so they read as headings --
   --dd-text at 15.13:1 -- and the accent is spent on STATE instead:

     rest      --dd-text, no underline (the row is the target, and 15 rules
               of underline is noise)
     hover     --dd-accent-hover + underline, so the affordance appears when
               you go looking for it
     expanded  --dd-accent -- Bootstrap drops `.collapsed` when a panel opens,
               so the open question is marked by colour. Same principle as the
               row-disclosure control in the app: colour carries state, and
               the state is visible without opening anything else. */
body.dd-site .btn-link {
    color: var(--dd-text);
    text-decoration: none;
}

body.dd-site .btn-link:hover,
body.dd-site .btn-link:focus-visible {
    color: var(--dd-accent-hover);
    text-decoration: underline;
}

body.dd-site .btn-link:not(.collapsed) {
    color: var(--dd-accent);
}

/* ---- Shop cards: one alignment, not two ----
   The three product cards are `w3-card w3-padding w3-center`, so everything
   PayPal renders into them inherits text-align:center -- description, the
   Quantity label, the button. Two things escaped it and made the cards look
   like the alignment was an accident, because it was:

   `.item-header` (title + price) is PayPal's own flex container, and it sets
   align-items:flex-start. text-align does not reach flex ITEMS, so the title
   and price sat left while the four description lines under them sat centred.
   Note the rule arrives via `#paypal-form-fields-container-<button-id>`, an ID
   selector scoped per product -- specificity (1,1,0) that no reasonable
   element-and-class selector of ours beats, hence !important. It is also
   inside an `@container (max-width: 47rem)` query that stacks the header into
   a column; our cards are ~390px so that branch is always the live one. Above
   47rem (a card only gets there past a ~2400px viewport) the header is a row
   and align-items:center merely centres title and price on their shared
   baseline-ish line, which is harmless.

   The <select> defaults to text-align:start, so the "1" hugged the left edge
   of a full-width control while its own "Quantity" label was centred over it.

   Both are one-line fixes, and they are per-alignment rather than a restyle --
   PayPal owns these widgets and their markup can change under us, so we touch
   the two properties that are wrong and nothing else. */
body.dd-site paypal-add-to-cart-button .item-header {
    align-items: center !important;
}

body.dd-site paypal-add-to-cart-button .selectContainer select {
    text-align: center !important;
}

/* ---- Facebook mark: the 2019 logo, not the 2013 one ----
   The contact row used `fab fa-facebook`, which in Font Awesome 5.4.1
   (Oct 2018) is the ROUNDED SQUARE -- the mark Meta retired in 2019 for the
   circular one. FA 5 has no updated glyph and never will, and upgrading the
   icon font is not a thing to do for one logo: 5.4.1 is load-bearing across
   the whole app. So the mark is inline SVG on the five public pages, and the
   icon font is left alone.

   Neutral, not Facebook blue and not the accent. The site's icon rule spends
   orange on the page's own controls and leaves neutrals for links that go
   elsewhere, which is exactly what this is; #1877F2 would also be the only
   cold colour left on the page now LOGIN is handled. Rendered at --dd-text it
   matches the envelope directly above it, which is the real comparison -- the
   two contact rows now read as one pair.

   `fill="currentColor"` in the markup means colour comes from here, so there
   is one place to change it. `margin-inline-end` rather than the old
   `w3-margin-right` is only insurance, not a fix: the contact paragraphs on
   the Hebrew pages compute direction:ltr (only the runs of Hebrew text inside
   them are RTL), so today it resolves to margin-right exactly as before. It
   costs nothing and does the right thing if one of those blocks is ever given
   a real dir="rtl". */
body.dd-site .dd-brand-icon {
    width: 32px;
    height: 32px;
    margin-inline-end: 16px;
    vertical-align: -0.35em;
    color: var(--dd-text);
}

/* The envelope beside it was `fa-fw w3-xxlarge` -- 36px, in a 45px fixed-width
   box. Next to a 32px circle that reads as oversized, and the mismatch only
   became visible once the Facebook mark stopped being an orange blob. The FA
   envelope's ink is about 1em wide by 0.75em tall, so matching the circle's
   32px of ink means a SMALLER type size, not the same number: 28px puts the
   two optically level. Compared on screen at 36/32/28/26/24 before choosing.
   fa-fw is dropped with it -- fixed-width cells matter for a stacked list of
   icons, and these are two standalone rows. */
body.dd-site .dd-contact-icon {
    font-size: 28px;
    margin-inline-end: 16px;
    vertical-align: -0.25em;
}

/* ---- Shop cards: the three Add to Cart buttons sit on one line ----
   The G10/G20 blurbs open with "RPI5 computer, 2GB RAM, 32GB MicroSD Card",
   which wraps once a card is narrower than ~400px; every S12 line is short and
   never wraps. So from ~780px of viewport upward the first two descriptions
   are five lines and the third is four, the S12 card ends one line (27px)
   short, and its button and bottom border float above its neighbours'.

   Reserving the fifth line is the fix rather than adding a blank one to the
   product copy: that copy lives in the PayPal catalogue, not in this repo, and
   a literal empty line would only be correct at the widths where the other two
   happen to wrap. `lh` is the line-height unit, so it stays right if the
   widget's type size changes. Browsers without `lh` (pre-Chrome 109 / Safari
   16.4) drop the declaration and get the old ragged behaviour -- no worse.

   KNOWN LIMIT -- this does NOT fix 601-780px. w3.css turns `.w3-third` into
   33% at 601px, so the cards go three-up at ~200px each and the two long
   blurbs run to nine lines against S12's four. The deficit there is not one
   line but five, and it slides continuously with width, so no single reserved
   height can track it. That band is cramped on its own terms -- the titles
   wrap mid-name -- and the real repair is to stack the cards until ~780px
   instead of 601px, which is a layout change and deliberately not made here.

   Tied to the current copy by nature: if a product grows a sixth line, this
   is the number to revisit. */
@media (min-width: 601px) {
    body.dd-site .item-description {
        min-height: 5lh;
    }
}