/**
 * =============================================================================
 *  Project:        Enterramon
 *  Filename:       assets/css/gp-compat.css
 *  Location:       /var/www/enterramon.com/public_html/new/assets/css/gp-compat.css
 *  Description:    The GeneratePress rules that EnterramonTheme's style.css
 *                  actually depends on. Nothing else from GP is included.
 *  Version:        1.0
 *  Copyright :     (c) 2026 InlineBlack. All rights reserved.
 * =============================================================================
 *
 *  WHY THIS FILE EXISTS
 *  --------------------
 *  The live site loads two themes: GeneratePress (parent) and EnterramonTheme
 *  (child). EnterramonTheme's markup uses the GP wrapper classes and relies on
 *  GP's master.css for a handful of layout rules. Under a "no WordPress" build
 *  GP is gone, so those specific rules are reproduced here.
 *
 *  This file is deliberately narrow. It was built by inspecting which rules
 *  actually apply in the browser (computed-style dump against the live page),
 *  not by copying GeneratePress wholesale. Every rule below is one the live
 *  page genuinely resolves.
 *
 *  Load order matters: this must come BEFORE style.css, matching the live
 *  cascade where generate-style-css is printed before generate-child-css.
 *
 *  MEASURED VALUES ON THE LIVE HOMEPAGE (1600px viewport)
 *  -----------------------------------------------------
 *    .site-content   width 1600px, no max-width (full bleed)
 *    .site-main      margin 20px, padding 0  (separate-containers + no-sidebar)
 *    .inside-article padding 0               (child theme overrides GP's 40px)
 */

/* =============================================================================
   BASE ELEMENT STYLES - GeneratePress, verbatim and in order
   =============================================================================
   GeneratePress styles far more than headings and wrappers. Anything the theme
   does NOT style falls through to GP, so omitting these silently changes
   rendering wherever the theme is silent.

   Found the hard way. The DNS page surfaced two of them at once:
     - `table` was missing, so tables lost `margin: 0 0 1.5em`. The record-types
       table's container came out 332px against live's 352px, pushing the page
       20px short.
     - `code,kbd,tt,var { font: 15px Monaco,... }` was missing, so every <code>
       in that table rendered at the inherited 13.6px in the default monospace
       instead of GP's 15px.

   Earlier the homepage surfaced the heading sizes for the same reason.

   The rules below are GP's element-level selectors, copied verbatim, in GP's
   own order - order matters, because GP sets a `border` shorthand on tables and
   then overrides `border-width` afterwards.

   Cascade note: on the live site the order is theme style.css, then GP
   main.min.css, then theme style.css again, so the theme wins wherever it has
   an opinion and GP shows through only where it does not. Loading this file
   before style.css reproduces that end state.
   ============================================================================= */

blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul {
    margin:0;
    padding:0;
    border:0
}
html {
    font-family:sans-serif;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
main {
    display:block
}
progress {
    vertical-align:baseline
}
html {
    box-sizing:border-box
}
button,input,optgroup,select,textarea {
    font-family:inherit;
    font-size:100%;
    margin:0
}
body,button,input,select,textarea {
    font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight:400;
    text-transform:none;
    font-size:17px;
    line-height:1.5
}

/*
    GP's form-control rules. Both were missing from this file.

    The second one matters beyond native forms: it is an attribute selector,
    (0,1,1), so it outranks the class selector (.enm-input, (0,1,0)) in the
    embed widget's own stylesheet. Without it the widget's own
    `padding: 11px 16px` won instead of GP's `10px 15px`, making every input in
    the embedded widget 2px taller than live - five widgets on /tool-widgets/,
    all 2px out.
*/
button,input[type=button],input[type=reset],input[type=submit] {
    background:#55555e;
    color:#fff;
    border:1px solid transparent;
    cursor:pointer;
    -webkit-appearance:button;
    padding:10px 20px
}
input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea {
    border:1px solid;
    border-radius:0;
    padding:10px 15px;
    max-width:100%
}
p {
    margin-bottom:1.5em
}
h1,h2,h3,h4,h5,h6 {
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit
}
pre {
    background:rgba(0,0,0,.05);
    font-family:inherit;
    font-size:inherit;
    line-height:normal;
    margin-bottom:1.5em;
    padding:20px;
    overflow:auto;
    max-width:100%
}
blockquote {
    border-left:5px solid rgba(0,0,0,.05);
    padding:20px;
    font-size:1.2em;
    font-style:italic;
    margin:0 0 1.5em;
    position:relative
}
table,td,th {
    border:1px solid rgba(0,0,0,.1)
}
table {
    border-collapse:separate;
    border-spacing:0;
    border-width:1px 0 0 1px;
    margin:0 0 1.5em;
    width:100%
}
td,th {
    padding:8px
}
th {
    border-width:0 1px 1px 0
}
td {
    border-width:0 1px 1px 0
}
hr {
    background-color:rgba(0,0,0,.1);
    border:0;
    height:1px;
    margin-bottom:40px;
    margin-top:40px
}
fieldset {
    padding:0;
    border:0;
    min-width:inherit
}
h1 {
    font-size:42px;
    margin-bottom:20px;
    line-height:1.2em;
    font-weight:400;
    text-transform:none
}
h2 {
    font-size:35px;
    margin-bottom:20px;
    line-height:1.2em;
    font-weight:400;
    text-transform:none
}
h3 {
    font-size:29px;
    margin-bottom:20px;
    line-height:1.2em;
    font-weight:400;
    text-transform:none
}
h4 {
    font-size:24px
}
h5 {
    font-size:20px
}
h4,h5,h6 {
    margin-bottom:20px
}
ol,ul {
    margin:0 0 1.5em 3em
}
ul {
    list-style:disc
}
ol {
    list-style:decimal
}
dt {
    font-weight:700
}
dd {
    margin:0 1.5em 1.5em
}
b,strong {
    font-weight:700
}
cite,dfn,em,i {
    font-style:italic
}
address {
    margin:0 0 1.5em
}
code,kbd,tt,var {
    font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace
}
abbr,acronym {
    border-bottom:1px dotted #666;
    cursor:help
}
ins,mark {
    text-decoration:none
}
sub,sup {
    font-size:75%;
    height:0;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup {
    bottom:1ex
}
sub {
    top:.5ex
}
small {
    font-size:75%
}
big {
    font-size:125%
}
figure {
    margin:0
}
table {
    margin:0 0 1.5em;
    width:100%
}
th {
    font-weight:700
}
img {
    height:auto;
    max-width:100%
}
textarea {
    width:100%
}
a,button,input {
    transition:color .1s ease-in-out,background-color .1s ease-in-out
}
a {
    text-decoration:none
}
embed,iframe,object {
    max-width:100%
}
a,body,button,input,select,textarea {
    transition:all 0s ease-in-out
}

/* Wrapper: GP sets word-wrap and the flex container. */
.site-content {
    word-wrap: break-word;
    display: flex;
}

/* GP's default is 40px; the child theme zeroes it on these page types. */
.site-content,
.full-width-content.separate-containers .inside-article {
    padding: 0;
}

/* Main column inside the flex wrapper. */
/* -----------------------------------------------------------------------------
   Direct children of .site-main get a 20px bottom margin, with the last one
   reset. Both were missing from this file and it caused a real misposition:
   the report's floating "Rate Your Report" button is a direct child of
   .site-main, so on live it carries margin-bottom 20px - which on a
   position:fixed element moves it 20px up from its own `bottom: 1.5rem`.
   Without these rules the button sat 20px lower than live, which is what the
   report's pixel diff caught.
   ----------------------------------------------------------------------------- */

.page-header, .sidebar .widget, .site-main > * {
    margin-bottom: 20px;
}

.one-container .site-main > :last-child, .separate-containers .site-main > :last-child {
    margin-bottom: 0;
}

.separate-containers .site-main {
    margin: 20px;
}

.separate-containers.no-sidebar .site-main {
    margin-left: 0;
    margin-right: 0;
}

/* The article wrapper. GP pads it 40px; the child theme sets 0. */
.inside-article {
    padding: 0;
}

/* GP's grid container is what actually constrains content width on pages
   that use it. The homepage does not, but inner pages do. */
/* GP's stock value is 1200px, but the live site computes 2000px (measured),
   so that is what is used here. style.css then forces min-width:100%. */
.grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
}

/* Entry header/meta: GP hides and rewrites parts of these. */
.entry-header,
.site-content {
    word-wrap: break-word;
}

.entry-header .gp-icon,
.posted-on .updated {
    display: none;
}

/* Screen-reader utility, as GP defines it. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/*
    IMPORTANT - this rule is deliberately NOT here.

    An earlier draft of this file set `.site-content p { margin-block-end: 1em }`
    as a guess at GeneratePress's paragraph reset. It is specificity (0,1,1),
    which OUTRANKS the theme's own margin utilities (0,1,0) - so every paragraph
    carrying `mb-12` (48px) was forced back to 16px, and the homepage ended up
    735px shorter than the live page. Measured with _shots/diff-live.mjs.

    GeneratePress's actual reset is `p { margin-bottom: 1.5em }` at (0,0,1),
    which loses to the utilities as intended. Nothing needs to replace it: the
    theme's own `p, li` rule in style.css handles paragraph styling, and the
    spacing utilities own the margins.
*/

/*
    Clearfix GP applies to .grid-container ONLY.

    This rule previously also carried a .site-content::after selector, which was
    my own addition rather than GP's. That second clearfix created a block
    formatting context on #content, which stops the first section's 160px
    margin-top from collapsing as it does on live - the whole about page sat
    24px lower, and every section with it. GP clears .grid-container and
    nothing else; removing the invented half restores live's behaviour.
*/
.grid-container::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   WORDPRESS BLOCK MARKUP IN THE PORTED ARTICLES
   ==========================================================================
   The 45 article pages were exported from WordPress and keep their block
   classes - wp-block-image, wp-block-spacer, wp-block-heading, wp-block-list -
   because that markup is what live renders and changing it would change the
   output.

   Those classes were styled by two things that disappear at cutover:
   GeneratePress's main.min.css and WordPress's block-library stylesheet. Both
   rules below are copied verbatim from what live actually loads, so the article
   images and captions keep the same metrics once WordPress is gone.

   Found by diffing the computed style of every block element on an article
   between live and the rebuild: the caption was the only difference left -
   16px/start/0/0 against live's 13px/center/6.5px/13px.
   ========================================================================== */

/* GeneratePress: main.min.css */
.wp-block-image figcaption {
    font-size: 13px;
    text-align: center;
}

/* WordPress block library. The em units resolve against the 13px above, which
   is what produces live's 6.5px and 13px margins. */
.wp-block-image :where(figcaption) {
    margin-top: .5em;
    margin-bottom: 1em;
}